语义化的label？

Posted on 2009-02-08 by aoao

大家应该经常看到在文本框里提示文字，然后一点就没了。通常做法都是默认给个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的效果，跳转 囧rz。

有些细节的，比如提示文字从灰变得更灰的过渡效果，是-webkit-transition的应用，要用webkit的浏览器才能体现。

再其实，input有个叫placeholder的属性，参考以前类型为search的input及相关属性，可以直接用在type="text"的input上，不过哪种方式在哪些情况应用会更适合呢，大家自己决定吧。

This entry was posted in Web开发 and tagged , . Bookmark the permalink.

13 Responses to 语义化的label？

  1. Andre @ 2009-02-09 at 01:05

    好东西，学习了

    回复
  2. AlloVince @ 2009-02-09 at 08:17

    登录框或者搜索框还好说，如果是输入条目比较多的表单，回过头去复查的时候会完全不知道自己输入的都是什么

    回复
  3. tommyfan @ 2009-02-09 at 09:27

    =..= 经鉴定,此为广告贴

    回复
  4. Cat Chen @ 2009-02-09 at 10:41

    要買MobileMe的話，可以考慮和我們一起買哦～

    回复
  5. xiaorsz @ 2009-02-09 at 15:56

    不错的东东，你怎么不试试？

    回复
    • aoao @ 2009-02-09 at 20:33

      线上的版本还没改

      回复
  6. ashchan @ 2009-02-09 at 16:09

    有几个基于prototype和jquery的插件提供类似功能。如github上的jquery-form-prompt，jquery-clearinginput和prototype_helpers等。

    回复
  7. 大猫 @ 2009-02-10 at 10:04

    这个登录界面用的就是jquery吧

    回复
  8. 千鸟 @ 2009-03-26 at 00:51

    这个玩意儿太高级了。

    回复
  9. hzhjun @ 2009-05-06 at 09:32

    MSN最新版似乎就是用的这样的效果~

    回复
  10. sam @ 2009-05-23 at 16:32

    这个能用Jquery做。

    回复
  11. 古斯比德 @ 2009-06-03 at 17:58

    果然是good idea,noscript情况下跳转，不错；

    回复
  12. swding @ 2009-06-19 at 15:53

    恩, 有点意思.

    回复

给 AlloVince 回复 点击这里取消回复。

（必填）

（必填）