VUE3-48-语义学
表单
当创建一个表单，你可能使用到以下几个元素：、、、 和 ``。
标签通常放置在表单字段的顶部或左侧：
${item.label}:
Submit注意如何在表单元素中包含 autocomplete='on'，它将应用于表单中的所有输入。
你也可以为每个输入设置不同的自动完成属性的值。
标签
提供标签以描述所有表单控件的用途；链接 for 和 id
Name如果你在 chrome 开发工具中检查这个元素，并打开 Elements 选项卡中的 Accessibility 选项卡，你将看到输入是如何从标签中获取其名称的：
Chrome 开发工具显示可从标签输入的可访问名称
aria-label
你也可以给输入一个带有aria-label 的可访问名称。
Name请随意在 Chrome DevTools 中检查此元素，以查看可访问名称是如何更改的：
Chrome Developer Tools showing input accessible name from aria-label
aria-labelledby
使用 aria-labelledby 类似于 aria-label，除非标签文本在屏幕上可见。它通过 id 与其他元素配对，你可以链接多个 id：
Billing
Name:
Submitaria-describedby
aria-describedby 的用法与 aria-labelledby 相同，预期提供了用户可能需要的附加信息的描述。这可用于描述任何输入的标准：
Billing
Full Name:
Please provide first and last name.
Submit占位符
避免使用占位符，因为它们可能会混淆许多用户。
占位符的一个问题是默认情况下它们不符合颜色对比标准；修复颜色对比度会使占位符看起来像输入字段中预填充的数据。
查看以下示例，可以看到满足颜色对比度条件的姓氏占位符看起来像预填充的数据：
最好提供用户在任何输入之外填写表单所需的所有信息。
操作指南
为输入字段添加说明时，请确保将其正确链接到输入。
你可以提供附加指令并在 aria-labelledby 内绑定多个 id。这使得设计更加灵活。
Using aria-labelledby
Current Date:
MM/DD/YYYY或者，你可以用 aria-describedby 将指令附加到输入。
Using aria-describedby
Date of Birth:
MM/DD/YYYY隐藏内容
通常不建议直观地隐藏标签，即使输入具有可访问的名称。
但是，如果输入的功能可以与周围的内容一起理解，那么我们可以隐藏视觉标签。
让我们看看这个搜索字段：
Search:
Search我们可以这样做，因为搜索按钮将帮助可视化用户识别输入字段的用途。
我们可以使用 CSS 直观地隐藏元素，但可以将它们用于辅助技术：
.hidden-visually {
position: absolute;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
height: 1px;
width: 1px;
clip: rect(0 0 0 0);
clip-path: inset(100%);
}aria-hidden="true"
添加 aria hidden="true" 将隐藏辅助技术中的元素，但使其在视觉上对其他用户可用。
不要把它用在可聚焦的元素上，纯粹用于装饰性的、复制的或屏幕外的内容上。
This is not hidden from screen readers.
This is hidden from screen readers.按钮
在表单中使用按钮时，必须设置类型以防止提交表单。
也可以使用输入创建按钮：
Cancel
Submit功能图像
你可以使用此技术创建功能图像。
Input 字段
这些图像将作为表单上的提交类型按钮
Search:- icon
Search:
Search