IT技术博客大学习 共学习 共进步

语义化的label?

样式之美 2010-04-07 09:11:44 浏览 2,327 次

大家应该经常看到在文本框里提示文字,然后一点就没了。通常做法都是默认给个value,通过js来处理。详细实现都不介绍了,大家都会。现在来看一下一个比较创意的实现。

就是直接用label的内容盖在input上面,然后用js来处理一下。详细实现就不用说了,反正我想尝试纯CSS是没办法实现滴。从结构上来看,还是比较理想的,充分利用了label

<label id="usernameLabel" for="username" class="placeholder"><span>Member Name</span></label>
<input id="username" name="username" class="text" type="text" maxlength="128" value="" />

MobileMe的登录界面

其实看图看不出什么,点图去网站看一下。

我还特别试了一下noscript的效果,跳转

建议继续学习

  1. Inline Form Labels(2) (阅读 2,924)
  2. WEB设计中的“帮助用户从错误中恢复” (阅读 2,064)