HTML输入和标签：爱情故事-css教程-PHP中文网

首页

web前端

css教程

HTML输入和标签：爱情故事

Lisa Kudrow

Mar 25, 2025 am 10:45 AM

HTML输入和标签：爱情故事

大多数输入都有一些共同点 - 他们最快乐的是带有同伴标签！幸福并不止于此。具有适当输入和标签的表格对于人们来说更容易使用，这也使人们感到高兴。

在这篇文章中，我想专注于缺乏语义标签和输入组合的情况，使各种各样的人更难完成表格。由于数百万人的生计依赖于形式，让我进入我所知道的最好的技巧，以在输入和标签之间建立充实而和谐的关系。

内容警告：在这篇文章中，是爱与人际关系的主题。

爱情故事从这里开始！让我们介绍创建快乐标签和输入的基础知识。

如何配对标签和输入

有两种方法可以配对标签和输入。一个是将输入包裹在标签中（隐式），另一个是将for属性添加到标签中，并在输入中添加ID（explicit）。

将隐性标签视为拥抱输入，而明确的标签则是站在输入旁边并握住手的标签。

 <label> 
  姓名：
  
</label>

属性值的明确标签必须与其输入的ID值匹配。例如，如果为具有名称的值，则ID也应具有名称值。

 名称：

不幸的是，即使使用和使用ID属性，所有辅助技术也无法正确处理隐式标签。因此，使用显式标签而不是隐式标签始终是最好的主意。

 
<label> 
  姓名：
  
</label>

连接到输入
名称：

每个单独的输入元素仅应与一个标签配对。并且标签仅应与一个输入配对。是的，输入和标签是一夫一妻制的。 ♥谢

注意：此规则有一种例外：当我们使用一组输入时，例如几个无线电按钮或复选框。在这些情况下，A 元素用于分组某些输入元素，例如无线电按钮，并用作整个组的可访问标签。

并非所有输入都需要标签

带有类型=“ crist”或type =“ button”的输入不需要标签 - 值属性代替了可访问的标签文本。带有类型=“隐藏”的输入也可以没有标签。但是，所有其他输入，包括和<select>元素，都是标签伴侣最快乐的。</select>

标签中有什么

标签内部的内容应：

描述其伴侣输入。标签想向所有人展示其与输入合作伙伴属于的。
可见。可以单击或敲击标签以集中其输入。与输入相互作用的额外空间是有益的，因为它增加了点击或单击目标。我们将稍微介绍一下。
仅包含纯文本。不要添加标题或链接等元素。同样，我们将进一步介绍“为什么”。

您可以使用标签中的内容来做的一件有用的事情是添加格式提示。例如，的标签将为，如我们所期望的。但是，我们可以为用户提供一个提示，即需要以特定格式输入日期，例如DD-MM-yyyy，以标签和指定要求的输入之间的A 的形式。该提示不仅指定日期格式，而且具有与输入上的ARIA描述相对应的ID值。

 
开始日期

<span>（dd-mm-yyyy）：</span>
<input type="“" date aria-descripedby="“" date-format min="“" max="“">

这样，我们获得了一个清晰标签的好处，该标签描述了输入的目的，并且向用户提示的奖励提示需要以特定的格式输入输入。

健康关系的最佳实践

以下技巧超出了基础知识，以解释如何确保标签和输入尽可能快乐。

做：在正确的位置添加标签

有一个WCAG成功标准，指出页面的视觉顺序应遵循DOM中元素出现的顺序。那是因为：

当阅读顺序似乎在屏幕上跳过时，使用屏幕放大器与屏幕读取器结合使用的较低视力的用户可能会感到困惑。当源顺序与视觉顺序不符时，键盘用户可能难以预测焦点下一步。

考虑一下。如果我们有一些标准的HTML，则标签在输入之前出现：

 橙色

那将标签放在DOM中的输入之前。但是现在，假设我们的标签和形式位于一个灵活的容器中，我们使用CSS命令将输入在标签之前的内容逆转：

标签{order：2; }
输入{顺序：1; }

在元素之间导航的屏幕读取器用户可能会期望输入在标签之前获得焦点，因为输入是在视觉上首次出现的。但是真正发生的是标签焦点。有关使用屏幕读取器和键盘导航之间的区别，请参见此处。

因此，我们应该注意这一点。通常，将标签放在复选框和无线电按钮的输入的右侧。这可以通过将标签放在HTML中的输入之后，确保DOM和视觉顺序匹配。

 
  
  <span>
    
    橙色
  </span>
  
  <span>
    
    香蕉
  </span>
  
  <span>
    您喜欢它们的苹果吗？
    
  </span>

做：使用屏幕读取器检查输入

无论是从头开始写入还是用库生成的输入，最好使用屏幕读取器检查工作。这是为了确保：

所有相关属性都存在 - 尤其是for和id属性的匹配值。
DOM与视觉顺序匹配。
标签文字听起来很清楚。例如，“ dd-mm-yyyy”的读数与其大写等效物（DD-MM-yyyy）不同。

在过去的几年中，我使用JavaScript库（例如Disshift）来构建复杂的形式元素，例如在本机HTML的元素（例如输入或选择）上构建自动完整或组合元素。大多数库使这些复杂元素通过使用JavaScript添加ARIA属性来访问。

但是，如果JavaScript破裂或禁用，使用JavaScript增强的本机HTML元素的好处将完全丢失，从而使其无法访问。因此，请检查一下，并提供服务器渲染的无javaScript替代方案作为安全的后备。

查看这些基本表单测试，以确定如何由不同的屏幕读取器编写和宣布其输入标签或传说。

做：使标签可见

连接标签和输入很重要，但同样重要的是保持标签可见。单击或敲击可见标签会将其输入合作伙伴聚焦。这是一种本地的HTML行为，使大量人受益。

想象一个想自豪地与意见相关联的标签：

也就是说，有时候设计需要隐藏的标签。因此，如果必须隐藏标签，则以可访问的方式进行操作至关重要。一个常见的错误是使用显示：无或可见性：隐藏以隐藏标签。这些CSS显示属性完全隐藏了一个元素 - 不仅在视觉上，而且从屏幕读取器中。

考虑使用以下代码视觉隐藏标签：

 /*用于非本地元素。对于本质上可集中的元素 */
/ *使用。视觉隐藏：不（：focus）：not（：active） */
。
  边缘宽度：0！重要；
  剪辑：rect（1px，1px，1px，1px）！
  身高：1px！重要；
  溢出：隐藏！重要；
  填充：0！重要；
  位置：绝对！重要；
  白空间：Nowrap！重要；
  宽度：1px！重要；
}

Kitty Giraudel在深入解释了如何负责任地隐藏内容。

要避免什么

为了保持和维持投入和标签之间的健康关系，配对时有些事情不做。让我们了解这些是什么以及如何预防它们。

不要：期望您的输入在每个浏览器中相同

在某些较旧的桌面浏览器中，某些类型的输入不支持。例如，Internet Explorer（IE）11甚至Safari 14 ¹ （2020年9月发布）中不支持类型=“日期”的输入。这样的输入落后于type =“ text”。如果日期输入没有明确的标签，并且它会自动落到较旧浏览器中的文本输入中，那么人们可能会感到困惑。

不要：用占位符代替标签

这就是为什么不应使用标签上使用占位符属性的原因：

并非所有屏幕读者都宣布占位符。
占位符的价值有可能在较小的设备上切断，或者在浏览器中翻译页面时。相比之下，标签的文本内容可以轻松地包裹在新系列上。
仅仅因为开发人员可以在小视网膜屏幕上看到淡灰色的占位符文字，在光线充足的房间中，在无注意的环境中，并不意味着其他所有人都可以。一个占位符也可以使那些视力良好的人抬起眼睛，并最终放弃形式。

一旦将字符输入输入，其占位符将变得不可见 - 无论是视觉上还是筛选读者。如果某人必须回路以审查他们以表格输入的信息，则必须删除输入的内容，以再次查看占位符。
IE 9及以下不支持占位符的属性，并且在IE 11中集中输入时消失。要注意的另一件事：占位符颜色无法使用IE 11中的CSS自定义。

占位符就像当一切都完美时出现的朋友一样，但是当您最需要时会消失。将输入与漂亮的高对比度标签配对。标签不是片状，并且忠于100％的时间。

尼尔森·诺曼集团（Nielsen Norman Group）有一篇深入的文章，解释了为什么形式领域中的占位符为何有害。

不要：用另一个属性或元素代替标签

当不存在标签时，一些屏幕阅读器会寻找相邻的文本并宣布这一点。这是一种打击的方法，因为屏幕阅读器可能找不到任何文字要宣布。

以下代码示例来自真实的网站。该标签已被非语义连接到输入的元素取代。

 <div>
  <span>卡号</span>
  <div>
    <input type="“" text value="“”" name="“" cardnumber maxlength="“">
  </div>
</div>

上面的代码应重新编写，以确保可访问性通过用=“ cardNumber”的标签替换跨度来确保可访问性。这是迄今为止最简单，最强大的解决方案，使大多数人受益。

尽管标签可以用具有与输入的aria-labelled属性相匹配的ID的跨度替换，但人们将无法单击跨度以按照标签允许的方式来聚焦输入。最好利用本地HTML元素的力量而不是重新发明它们。本地输入和标签元素之间的爱情故事无需重写！真是太好了。

不要：将互动元素放入标签中

标签中只能包含纯文本。避免插入诸如标题或互动元素之类的内容，例如链接。并非所有的屏幕读取器都会正确宣布标签，如果包含纯文本以外的其他标签。另外，如果有人想通过单击其标签来集中输入，但是该标签包含链接，则他们可能会错误地单击链接。

 
  <div>
    
    
    我接受<a href="%E2%80%9C" https:>条款和条件</a> 
  </div>
  <div>
    
    
    我接受条款和条件。
    <span>阅读<a href="%E2%80%9C" https:>条款和条件</a> </span>
  </div>

现实生活中的例子

我总是发现现实生活中的例子可以帮助我正确理解一些东西。我搜索了网络，并从流行的组件库和网站找到了标签和输入的示例。在下面，我解释了元素不足的位置以及如何改进它们以确保配对更好。

组件库：材料

物料图是基于Google设计系统的React组件库。它包括带有浮动标签模式的文本输入组件，该模式已成为许多设计师和开发人员的流行：

单击输入感觉很光滑，看起来很棒。但这就是问题。它的素质大多是皮肤深处。

在撰写本文时，我发现的一些问题包括：

为了提供更多的交互式区域，可以将标签放在输入之外。
可以选择添加一个提示，就像我们之前看到的那样。不幸的是，提示仅通过接近度与输入相关联，而不是通过匹配的ID和ARIA描述的。这意味着并非所有屏幕读取器都可以将助手消息与输入相关联。
标签位于DOM的输入后面，使视觉顺序不正确。
至少只要不活跃，空的输入看起来似乎已经填充了，至少它已经填写。
单击输入时，标签向上滑动，这使得它不适合那些喜欢减少运动的人。

亚当·西尔弗（Adam Silver）还解释了为什么浮子标签有问题，并详细批评了材料的文本输入设计。