[转]不常见但有用的HTML下拉选单

1.不常见但有用的HTML下拉选单

有想过把下拉选单中一些选项归类吗？而且这些类别不可选？
最近碰上的客户就有这样要求的一个下拉选单，如何做？其实HTML里已经有这种代码，只是不常用，就是<optgroup>。

下拉选单实际效果：

attachments/200608/18_104621_selectoptgroup.gif

HTML源代码如下：

其中<optgroup>是选项类别，label属性可以标出它的名称。如果还要增强表现，比如类别用其他颜色表示，可以对optgroup进行CSS样式定义optgroup {color:#blue;}。
当选项比较多的时候，这种下拉菜单可以给用户更好的体验，类别更清楚。

2.更具提示性的表单样式

当表单填写的条目很多的时候，有没有填写感受上不足呢？其实只需要添加一点样式，就可以让表单更具提示性，也使用户有更好的体验。在<input>上定义一个:hover、:focus及:focus:hover属性的样式，让输入框被鼠标激活时更加突出，利于用户集中精神填写。

表单实际效果示例：

attachments/200608/23_124855_forminputhover.gif

HTML源代码示例如下：

<html>
<head>
<title>更加易用且人性化的表单样式</title>
<style type="text/css">

</style>
</head>

<body>
<form id="logonForm" name="logonForm" method="post" action="">
用户名：
<input name="id" type="text" size="12" />
密码：
<input name="password" type="text" size="12" />
<label>
<input name="Submit" type="submit" class="btn" value="登录" />
</label>
</form>
</body>
</html>

你也可以定义自己喜欢的样式，这里仅仅举了一个例子。

如果你使用的是Firefox，能够看到鼠标离开输入框，但输入框仍被选中的样式。似乎<input>的:focus和:focus:hover属性在IE7中不起作用，所以看不到Firefox中的效果，如果你使用其它IE版本，不妨试试告诉我是否有用？

原文:http://blog.imhb.cn/Blog/BlogDetail.aspx?bid=523