如何从seo优化和用户角度思考构建出色的html表单控件
作者：互联网
如何制作控件
好吧，我们需要从某个地方开始。不妨从控件本身开始。
HTML 提供三种不同的表单控件以供选择：<input>、<textarea>和<select>。今天，我们将使用<input>，但相同的规则将适用于其他人。
<input />
如何<input>工作
输入通常用于捕获用户数据。为此，它们应该放在一个 <form> 元素中，但这还不够。提交表单时，它不知道如何标记输入的数据。
对于在提交表单时包含输入数据的表单，输入需要一个name属性。您不需要状态管理或数据绑定。只是一个name。
<input name="data" />
如何使输入可访问
现在我们已经让机器人开心了，是时候关注人类了。
为了清晰和可访问性，每个输入还需要一个标签。有几个选项：
- 添加
<label>具有属性的元素for并将其分配给输入的id（显式标签）。 - 用
<label>元素（隐式标签）包装输入。 - 向输入添加一个
aria-label属性。 - 将属性添加
aria-labeledby到输入并将其分配给id另一个元素的。
在所有这些选项中，最可靠的是明确的标签，因为它适用于大多数浏览器、辅助技术和语音控制界面。隐式标签在 Dragon 语音识别中不起作用。ARIA 属性很挑剔。
placeholder和title属性不是正确的标签。
我建议不要将所有内容都包装在<label>标签中，因为：
- 它很可能包含比标签更多的内容。这会导致屏幕阅读器用户体验不佳。
- 向输入的包装器元素添加样式是很常见的。这些样式可能与
<label>.
一般来说，我更喜欢使用 a<div>来隔离控件。
<分区>
<label for="input-id">标签</input>
<input id="input-id" name="data" />
</div>
如果您想要一个不显示标签的输入，请不要从 HTML 中删除标签。相反，使用 CSS 隐藏它或使用不太可靠的选项。将标签保留在标记中，并class使用这些样式在视觉上隐藏它。这些样式使辅助技术可以访问它，同时也可以在视觉上将其删除：
.visually-hidden {
位置：绝对；
溢出：隐藏；
剪辑：矩形（0 0 0 0）；
宽度：1px；
高度：1px；
保证金：-1px；
边界：0；
填充：0；
}
请注意，通常仍建议包含可见标签以避免混淆。Aplaceholder不应该作为标签。
如何选择类型（或不选择）
除了上面列出的不同标记之外，您还可以通过设置输入的type属性来更改控件的行为。例如，如果您想接受用户的电子邮件，您可以将type属性设置为“电子邮件”。
输入类型可以改变 UI 的行为或外观。这里只是几个例子：
- “ number ” 类型通过阻止非数字值输入来改变行为。
- “颜色”类型通过添加一个打开颜色选择器的按钮来更改 UI。
- “日期”类型通过提供日期选择器改进了数据输入体验。
- “ email ”类型对表单提交强制执行内置约束验证。
但是，有些输入类型可能是假的啦。
考虑要求美国邮政编码的输入。只有数字条目是有效的，因此使用 "number" 可能有意义type。然而，“数字”输入的一个问题是它添加了滚动事件功能，这样用户可以在输入上向上滚动以增加值或向下滚动以减少它。
对于邮政编码输入，用户可能会点击输入，输入他们的邮政编码，然后尝试向下滚动页面。这会减少他们输入的值，并且用户很容易错过该更改。结果，他们输入的数字可能是错误的。
在这种情况下，如果您只想将输入限制为数值，最好完全避免该type属性并使用patternsuch 。[0-9]*事实上，“数字”类型的问题往往比它的价值更大。
具有描述性
由于我们已经简要介绍了约束验证，现在是提及描述的好时机。
尽管 HTML 具有内置的验证属性，并且有几个更强大的 JavaScript 验证库，但还有另一种有效的方法可以让用户填写适当的数据，而且不会那么烦人。
确切地告诉他们你想要什么。
某些表单控件（如“姓名”或“电子邮件”）可能很明显，但对于那些不明显的控件，请为您的需要提供清晰的描述。
例如，如果您要求用户创建新密码，请在他们尝试提交表单之前告诉他们要求是什么。并且不要忘记辅助技术用户。
我们可以通过视觉接近度以及使用aria-describedby属性将输入与描述相关联。
<分区>
<label for="password">密码</input>
<input id="password" name="password" type="password" aria-describedby="password-requirements" />
<p id="password-requirements">请创建一个新密码。必须至少包含 8 个字符，1 个大写字母，1 个小写字母和 1 个特殊字符。</p>
</div>
描述也是放置任何验证反馈消息的有效位置。
变通
创建输入时，通常很想为可接受的值添加约束以确保用户只发送良好的数据。但过于严格会导致糟糕的用户体验。
例如，如果您要求用户输入电话号码，请考虑有几种不同的可接受格式：
- 8008675309
- 800 867 5309
- 800-867-5309
- 800.867.5309
- (800) 867-5309
- +1 (800) 867-5309
- 001 800 867 5309
以上所有代表同一个电话号码。理想情况下，用户将能够输入这些格式中的任何一种，并且仍然能够毫无问题地提交表单。
如果您希望您的输入仅发送数字字符，则可以允许用户输入他们想要的任何格式。然后，您可以使用 JavaScript 向事件添加事件处理程序blur，并从输入的值中删除任何不需要的字符（空格、破折号、句点等）。这将只留下数字。
让它变得简单
如果您曾经使用移动设备填写过表格，您可能已经注意到您的手机键盘在不同的输入下看起来会有所不同。
对于基本的文本输入，您会看到标准键盘，对于电子邮件输入，您可能会看到更方便放置的 @ 符号，对于数字输入，您可能会看到键盘被数字键盘取代。
在许多情况下，如果设置了输入，浏览器会选择更合适的键盘向用户显示type。但正如我们在上面看到的，通常只使用基本的文本输入会更好。
type尽管输入缺少属性，我们仍然可以通过要求浏览器显示特定键盘来为移动用户提供更好的用户体验。inputmode我们可以使用接受八个不同选项的属性来完成此操作。
- 文本（默认值）
- 没有任何
- 十进制
- 数字
- 电话
- 搜索
- 电子邮件
- 网址
想要试一试？在您的移动设备上访问inputmodes.com 。它太酷了。