Html 什么'；创造一种现代形式的最佳实践是什么？特别是标签与占位符之争

我正在寻求建议和反馈，因为我无法决定该怎么做

我正在构建HTML5表单，我希望它们尽可能容易使用。 这就是为什么，我总是使用标签来解释在字段中输入什么，并使用占位符作为具有良好格式的值的示例

因此，我的代码总是如下所示：

<form>
    <fieldset>
        <p>
            <label for="origin-field">Please enter your origin address</label>
            <input type="text" name="origin" id="origin-field" placeholder="23th Street, New York City" required />
        </p>
        <p>
            <label for="destination-field">Please enter you destination address</label>
            <input type="text" name="destination" id="destination-field" placeholder="Ashbury Street, San Francisco" required />
        </p>
    </fieldset>
    <p>
        <input type="submit" />
    </p>
</form>

请输入您的原始地址


请输入您的目的地地址

此代码是可访问的，标签使用for属性链接到输入，简而言之，它尊重最佳实践。它还有其他UX优势：如果用户点击输入，然后分心，标签总是显示在它旁边，可以很容易地提醒他们输入正在等待什么信息

但是，我的产品负责人和设计师强烈希望我删除标签并使用占位符，因此代码将被删除

<form>
    <fieldset>
        <p>
            <input type="text" name="origin" id="origin-field" placeholder="Origin address" required />
        </p>
        <p>
            <input type="text" name="destination" id="destination-field" placeholder="Destination address" required />
        </p>
    </fieldset>
    <p>
        <input type="submit" />
    </p>
</form>

这两个参数是，它在屏幕上使用更少的空间/更漂亮，而且用户错误地将示例值视为他们本可以输入的内容，并且不理解字段为什么不是空的（这当然是一个对比度问题，占位符是浅灰色的，不应该被误认为是一个真正的值，深黑色，但是，根据PO，他们会）

我应该怎么做？我应该努力让标签保持在设计中吗？如果我在标签上放一个

显示：无

，屏幕阅读器还会读吗？我应该放一个

位置：绝对；左：-9999px；顶：-9999px；

---

当前的最佳做法是什么？

回答您的问题：

创建现代形式、无障碍等的最佳实践是什么？ 特别是标签与占位符之争

使用bootstrap和font-awesome，如果您将它们组合在一起，您将得到一个很棒的bootstrap表单：）使用表单组

我该怎么办？我应该努力让标签保持在最佳状态吗 设计？如果我在标签上显示：无，它还会被读取吗 通过屏幕阅读器？我应该放一个位置：绝对；左：-9999px； 顶部：-9999px；相反

目前的最佳实践是什么

和以前一样，使用引导程序可以轻松完成任务。请忘记在DOM上隐藏东西之类的事情，因为这对SEO不友好：(

---

回答您的问题：

创建现代形式、无障碍等的最佳实践是什么？ 特别是标签与占位符之争

使用bootstrap和font-awesome，如果您将它们组合在一起，您将得到一个很棒的bootstrap表单：）使用表单组

我该怎么办？我应该努力让标签保持在最佳状态吗 设计？如果我在标签上显示：无，它还会被读取吗 通过屏幕阅读器？我应该放一个位置：绝对；左：-9999px； 顶部：-9999px；相反

目前的最佳实践是什么

和以前一样，使用引导程序可以轻松完成任务。请忘记在DOM上隐藏东西之类的事情，因为这对SEO不友好：(

对于

占位符

属性，它特别指出不要将占位符用作标签

警告！使用占位符属性替换标签会降低控件的可访问性和可用性

占位符文本存在许多问题：

• 文本可能会被误认为是已输入的内容
• 文本内容不够完整
• 当输入字段接收到焦点时，文本消失

其中许多是认知问题，这是无障碍性的一个重要方面。 即使所有这些理由看起来“愚蠢”，因为你永远不会有任何这些问题，你也不是每个人的代表性样本

一些替代方案是，在输入字段的“内部”显示一个“浮动”标签，但当字段接收到焦点时，标签会在字段外部浮动。有一个非常好的示例。有一个示例，但我不喜欢它的美观性（但你当然可以调整）。要查看一个实时示例，请在登录区域使用它们

如果希望将说明文本与输入字段相关联，例如显示日期格式（mm/dd/yy vs ddmmmyy vs which）或电子邮件格式或电话号码格式等，文本应在屏幕上可见，并与字段分开，但通过

aria descripbeby

属性与字段关联。例如：

<label for="phone">Phone number</label>
<input id="phone" aria-describedby="info">
<span id="info">(xxx)-xxx-xxxx</span>

电话号码
（xxx）-xxx-xxxx

当然，从一般用户体验的角度来看，你不应该有用户可以键入无效文本的输入字段。你应该尝试找出他们键入的内容并为他们设置格式。有很多电话号码算法可以让用户键入他们想要的格式，或者让他们以任何格式键入日期（虽然像1/2/18这样的东西很难决定是1月2日还是2月1日，但是使用Location会有所帮助），或者使用“selector”小部件来选择日期、国家或其他任何东西。

对于

占位符

属性，它特别说明不要使用占位符作为标签

警告！使用占位符属性替换标签会降低控件的可访问性和可用性

占位符文本存在许多问题：

• 文本可能会被误认为是已输入的内容
• 文本内容不够完整
• 当输入字段接收到焦点时，文本消失

其中许多是认知问题，这是无障碍性的一个重要方面。 即使所有这些都是真的