语义化的label?

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

    恩, 有点意思.

发表评论

(必填)

(必填)