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

Ann*_*igi 3 html

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

1)主题

2)消息

当页面第一次加载时,我希望这两个框显示" 在此输入主题 "和" 在此输入消息 "等消息.

我发现我们可以通过使用文本框的"value"属性来做到这一点,这是最好的方法吗??我有什么替代方法来实现这一目标?

Que*_*tin 9

哦,我真的需要完成关于这个主题的文章.这是未经抛光的版本:

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

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

最佳选择,在我看来,是将一个<label>旁边的控制.网页通常不会缩短空间 - 滚动条不是邪恶的.

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

  1. 放入<label><input>放入<div>
  2. <div>使用JavaScript 设置一个类(所以你没有垃圾经验是JS不可用)
  3. 应用CSS设置<div>to position: relative并为其指定大小.
  4. 制作它background<input> transparent样式并填充div
  5. Position<label><input>
  6. 编写一个函数,检查输入的值是否为空字符串.根据答案打开和关闭div上的一个类.
  7. 当在div上设置该类时,设置text-indent为高负长度(例如-999em),以便文本隐藏在屏幕外(但仍可供屏幕阅读器使用)