两个故事
- Jason Grigsby 发现 Chipotle 的在线订购表格使用了一种输入掩码技术，将信用卡有效期年份截断，使其无效，从而拒绝订单。如果使用
pattern="\d\d" maxlength="2"（原生浏览器功能），浏览器将足够智能地执行正确操作，而不拒绝订单。根据已发布的数据，粗略估算，这价值 440 万美元。 - Adrian Roselli 回忆起 一个非常常见的表单可访问性错误，
label和input上缺少for/id属性，导致无法使用，根据粗略估算，这导致 Indiegogo 筹款活动损失了 1800 万美元。
label/input 属性问题真的让我很困扰。我感觉这应该是 HTML 基础知识的一部分，既有利于可访问性，也有利于整体用户体验。这是我见过的所有 HTML 课程的一部分，并且经常被指出是需要正确掌握的内容。但每周我都会发现一些生产网站没有这样做。
我们可以做到！
<label for="name">Name:</label>
<input id="name" name="name" type="text">
<!-- or -->
<label>
Name:
<input name="name" type="text">
</label>
好吧，但如果您更喜欢使用占位符而不是标签呢？
确保添加一个“visuallyhidden”标签。占位符不符合 508 合规性。:D
您不能用占位符替换标签，就像您不能用电梯替换汽车一样。它们的功能不同。
占位符 SUGGESTS 输入的内容，而标签 INSTRUCTS 您该字段代表什么。占位符在您开始输入后就会消失（对于那些难以记住说明的人来说（即大多数客户）毫无用处），并且不会被辅助技术读取。
您应该始终使用标签。一些移动浏览器不显示占位符文本，如果某个人的浏览器尝试使用不正确的信息预填充输入，用户将需要清除输入才能看到占位符。
您永远不应该用占位符代替标签。占位符旨在为用户提供额外的信息，而不是作为标签的替代品。
占位符文本不用来代替标签，而是用作标签的补充。它们有不同的用途：标签描述了该字段中包含的内容，而占位符文本则提供提示，例如日期字段的预期格式。出于可访问性原因，不要仅根据视觉效果选择实现方式，而要使用 HTML 标准提供的语义元素非常重要。标签会被屏幕阅读器读取，而占位符文本通常不会被读取，如果表单没有标签，盲人和低视力用户就无法清楚地知道他们正在填写哪个字段。对于有视力的用户来说，这也是不好的用户体验——一旦您开始填写一个字段，占位符文本就会消失。如果没有可见的标签，每个人都会受到影响。如果设计人员非常重视未标记字段的美观效果，可以通过一些技术方法在字段上初始显示标签，然后在字段获得焦点后将标签移到字段之外。这样您就失去了使用占位符文本提供提示的功能，但如果您使用占位符文本代替标签，您已经做出了这种权衡。
总的来说，使用语义 HTML 元素是有原因的。花时间研究和理解它们绝不会浪费时间。
占位符不是标签。
如果您使用占位符代替标签，可能会损失数百万美元。占位符完全被屏幕阅读器忽略。您必须使用标签来向用户标识该字段是什么，否则“文本输入框、文本输入框”就毫无意义。
很棒的文章
如果您出于视觉设计原因不想使用
<label>，仍然可以使用“arial-label”、“aria-labelledby”甚至“title”为表单元素分配可访问的名称。（但请注意，将“占位符”用作“标签”是一种反模式，应避免。）不要。
不要用占位符属性代替
<label>元素。它们的用途不同：属性描述了表单元素的作用，即它指示期望输入哪种信息，而占位符属性则是关于内容应该采取的格式的提示。在某些情况下，占位符属性永远不会显示给用户，因此表单必须在没有占位符属性的情况下也能被理解。https://mdn.org.cn/pl/docs/Web/HTML/Element/Input
占位符不是标签。它更像是提示性/示例文本。如果设计不需要显示输入，我会使用 CSS 仅向屏幕阅读器显示标签。
不要这样做！事实证明这会导致不良的用户体验和可访问性问题。（https://www.nngroup.com/articles/form-design-placeholders/)
然后只需为您的标签添加一个类，例如 .sr-only（仅屏幕阅读器），并将其隐藏。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
这样它就可以被访问到，但只在输入字段中显示占位符。
占位符应该用作输入字段中要输入值的示例，而不是标签本身。
在这种情况下，您可以通过隐藏标签并使用“for/id”属性使输入字段更易访问。
占位符属性不能代替
<label>元素。如果您更喜欢占位符的视觉效果，可以将标签设置为占位符的样式，但为了基本的可访问性，您需要一个<label>元素。占位符也很不错，但它们的作用与标签不同。
用占位符文本代替标签是一种不好的做法。例如，您的占位符是“First name”。一旦输入不为空，而是被 Chrome 自动填充，用户就不知道该字段需要输入什么。或者，如果用户输入了错误的值，表单返回错误，则用户需要先清空字段才能知道它是姓名字段、电子邮件字段还是地址字段。
从用户体验的角度来看，使用标签（姓名）和占位符“示例：John doe”会更好。
<label for="name" aria-label="Name"></label><input id="name" name="name" type="text" placeholder="Name">总的来说，如果您想要占位符而不是标签，您应该使用 浮动标签
不要只依赖占位符。屏幕阅读器不会像
<label>那样传递占位符。您至少应该使用label[for]，并且可以使用仅对屏幕阅读器可见的玻璃（如 Bootstrap 的sr-only）来显示标签。据我所知，占位符永远不应该用作标签的替代品。一旦用户将焦点应用于该字段，占位符可能会在某些浏览器中丢失，他们现在就会感到困惑，不知道表单希望他们输入什么。
为什么不两者兼而有之？使用标签对于可访问性来说更好，而占位符则由于 :placeholder-shown 伪元素而更好。将两者结合使用，您可以在占位符未显示时（即输入已填充）显示标签。一直在使用此方法，举个例子，以了解这种方法的可能性：https://codepen.io/Steynno/pen/abogMGL
你不应该.
如果你更喜欢使用占位符而不是标签，你仍然需要有一个标签作为辅助功能案例，或者至少使用 ARIA 标签属性来告诉屏幕阅读器输入是什么。
此外，还有很多 codepen 展示了使用标签的辅助功能占位符（而且在你开始输入后也会显示出来）。
占位符根本不能替代标签。
你只需要对用户隐藏标签（并使用类似剪辑的技巧向屏幕阅读器显示它），并将你的文本也放在占位符中。