什么是在textbixes和textareas中显示默认文本的最佳方式

Question

我网站上的联系人-us HTML页面上的表单有两个字段

1）主题

2）消息

首次加载页面时，我希望这两个框能够显示“在此输入主题”和“在此输入消息”等消息。

我发现我们可以通过使用文本框的“value”属性来做到这一点，这是最好的方法吗？ 我有什么办法来实现这个目标？

Answer 1

哦，我真的需要写完关于这个主题的文章。这是未经修改的版本：

首先 - 描述输入字段内容的消息不是默认值。默认值是可以想象提交的内容（例如，基于GeoIP输入的国家/地区，或来自客户记录的交付地址）。

第二 - 使用默认值作为假标签，然后在用户关注它时擦除它（可能是您不希望用户必须手动删除该消息）会导致可访问性问题。屏幕阅读器会读出所关注的内容，如果您在重点关注时将其删除，则无法获取信息。

在我看来，最佳选项是在控件旁边放置一个<label>。网页通常不会缩短空间 - 滚动条不是邪恶的。

如果你真的希望它看起来像是在控件中那么：

1. 将<label>和<input>放入<div>
2. 使用JavaScript在<div>上设置一个类（因此您没有废话经验，JS无法使用）
3. 应用CSS将<div>设置为position: relative并为其指定大小。
4. 制作background <input>的{​​{1}}并为其设置样式以填充div
5. transparent Position
下的<label>
6. 编写一个函数，检查输入的值是否为空字符串。根据答案，打开和关闭div上的一个类。
7. 当在div上设置该类时，将<input>设置为较高的负长度（例如text-indent），以便将文本隐藏在屏幕外（但仍可供屏幕阅读器使用）

Answer 2

是的，这是最好的方法。然后，当元素获得焦点时，您可以使用JavaScript清空文本输入/区域。请记住考虑如何处理用户提交默认文本的情况。即，“输入用户名”是否为有效用户名？