SuperAPI AI 工具集

ux-form-design

前端与建站

查看项目

更新于 10-16 00:21

技能介绍

用途:面向表单与输入框的设计实现模式,覆盖数据收集、校验与用户反馈,并包含无障碍表单设计及表单关联自定义元素(form-associated custom elements)。

主要能力:演示表单关联自定义元素的基础结构,使用 static formAssociated=true 与 attachInternals,要求在构造函数中直接保存元素引用而不使用 querySelector;实现 set/get value、formResetCallback、formDisabledCallback 等表单生命周期。校验方面用 internals.setValidity 标记 valueMissing 并配合 aria-invalid 与 role=alert 提示错误。输入结构包含 label、input、hint、error,并用 aria-describedby 关联提示与错误。文本域提供 field-sizing: content 现代方案及基于输入事件的旧浏览器回退自动调整高度。布局含垂直堆叠、行内字段与操作区。校验模式分实时(首次 blur 后输入时校验)与提交时校验,提交失败可聚焦输入并触发 shake 动画,成功则派发 form-submit 自定义事件。无障碍要求每个输入有标签,必填项标注 aria-required,错误通过 aria-describedby 关联,支持 Ctrl/Cmd+Enter 提交。还给出 inputmode、autocomplete、placeholder 使用规范、触控目标尺寸以及 disabled 与 read-only 样式区别。

使用方式:按资料中的结构、CSS 与类方法组织代码,保持直接元素引用、setFormValue 与 setValidity 等调用不变。

适用场景:构建表单、输入组件、需无障碍与自定义元素集成的界面。

限制:资料未提供安装命令、依赖或平台支持范围;示例中的 CSS 变量与动画工具需自行具备。