用途
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 的具体内容,资料未展开。