SuperAPI AI 工具集

form-patterns

前端与建站

查看项目

更新于 10-16 07:38

技能介绍

用途

form-patterns 用于在 DaisyUI v5 项目中统一实现表单相关界面,涵盖输入框、下拉选择、多行文本、校验反馈以及表单结构组织。它面向需要按 DaisyUI v5 规范编写表单的开发者,帮助避免沿用旧版结构。

主要能力

  • v5 结构:使用 fieldset 与 fieldset-legend,而不是旧版的 form-control 与 label-text。
  • 输入包装:以 <label class="input w-full"> 包裹 <input class="grow">。
  • 校验:在 label 上添加 validator 类,即可获得自动校验界面。
  • 选择与文本域:直接应用类名(例如 select w-full),不使用包装层。
  • 错误处理:远程函数会自动提供 .error 属性。
  • 间距:在表单上使用 space-y-4 以保持一致的间距。

使用方式

快速开始示例:

<form {...my_form} class="space-y-4"> <fieldset class="fieldset"> <legend class="fieldset-legend">Name</legend> <label class="validator input w-full"> <input type="text" name="name" placeholder="Your name" class="grow" required /> </label> </fieldset>

{#if my_form.error} <div class="alert alert-error">{my_form.error}</div> {/if}

<button class="btn btn-block btn-primary" type="submit" >Submit</button

适用场景

适用于使用 DaisyUI v5 构建表单界面的前端开发工作,尤其是需要同步应用校验反馈与统一间距的表单页面。

限制

资料仅提供上述模式与示例,未说明适用的框架、构建工具、浏览器兼容范围、版本依赖细节以及具体错误对象的字段结构。关于 forms-guide.md 的具体内容,资料未展开。