Vue 3.0 语义学
#表单当创建一个表单，你可能使用到以下几个元素：<form>、<label>、<input>、<textarea> 和 <button>。
标签通常放置在表单字段的顶部或左侧：
<form action="/dataCollectionLocation" method="post" autocomplete="on">
<div v-for="item in formItems" :key="item.id" class="form-item">
<label :for="item.id">{{ item.label }}: </label>
<input
:type="item.type"
:id="item.id"
:name="item.id"
v-model="item.value"
/>
</div>
<button type="submit">Submit</button>
</form>
点击此处实现
注意如何在表单元素中包含 autocomplete='on'，它将应用于表单中的所有输入。你也可以为每个输入设置不同的自动完成属性的值。
#标签
提供标签以描述所有表单控件的用途；链接 for 和 id：
<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="name" />
点击此处实现
如果你在 chrome 开发工具中检查这个元素，并打开 Elements 选项卡中的 Accessibility 选项卡，你将看到输入是如何从标签中获取其名称的：
警告：
虽然你可能已经看到这样包装输入字段的标签：
<label>
Name:
<input type="text" name="name" id="name" v-model="name" />
</label>
辅助技术更好地支持用匹配的 id 显式设置标签。
#aria-label
你也可以给输入一个带有aria-label 的可访问名称。
<label for="name">Name</label>
<input
type="text"
name="name"
id="name"
v-model="name"
:aria-label="nameLabel"
/>
点击此处实现
请随意在 Chrome DevTools 中检查此元素，以查看可访问名称是如何更改的：
页:
[1]