1.不常见但有用的HTML下拉选单
有想过把下拉选单中一些选项归类吗？而且这些类别不可选？最近碰上的客户就有这样要求的一个下拉选单，如何做？其实HTML里已经有这种代码，只是不常用，就是<optgroup>。
下拉选单实际效果：
HTML源代码如下：
<select>
<optgroup label="金融 Finance">
<option value ="vc">风险投资</option>
<option value ="stocks">证券</option>
</optgroup>
<optgroup label="媒体 Media">
<option value ="tv">电视</option>
<option value ="film">电影</option>
<option value ="magazine">杂志</option>
</optgroup>
</select>
<optgroup label="金融 Finance">
<option value ="vc">风险投资</option>
<option value ="stocks">证券</option>
</optgroup>
<optgroup label="媒体 Media">
<option value ="tv">电视</option>
<option value ="film">电影</option>
<option value ="magazine">杂志</option>
</optgroup>
</select>
其中<optgroup>是选项类别，label属性可以标出它的名称。如果还要增强表现，比如类别用其他颜色表示，可以对optgroup进行CSS样式定义optgroup
{color:#blue;}。
当选项比较多的时候，这种下拉菜单可以给用户更好的体验，类别更清楚。
2.更具提示性的表单样式
当表单填写的条目很多的时候，有没有填写感受上不足呢？其实只需要添加一点样式，就可以让表单更具提示性，也使用户有更好的体验。在<input>上定义一个:hover、:focus及:focus:hover属性的样式，让输入框被鼠标激活时更加突出，利于用户集中精神填写。
表单实际效果示例：
HTML源代码示例如下：
<html>
<head>
<title>更加易用且人性化的表单样式</title>
<style type="text/css">
<!--
body {
font-family: "宋体";
font-size: 12px;
}
#logonForm {
background-color: #333;
padding: 3px;
text-align: center;
350px;
color: #FFFFFF;
}
input {
font-size: 12px;
background-color: #FFFFFF;
border: 2px solid #000000;
padding: 1px;
}
input:hover,input:focus:hover {
font-size: 12px;
border: 2px solid #FF6600;
}
input:focus {
font-size: 12px;
border: 2px solid #FF9900;
}
.btn{
background-color: #FFFFCC;
}
-->
</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>
<head>
<title>更加易用且人性化的表单样式</title>
<style type="text/css">
<!--
body {
font-family: "宋体";
font-size: 12px;
}
#logonForm {
background-color: #333;
padding: 3px;
text-align: center;
350px;
color: #FFFFFF;
}
input {
font-size: 12px;
background-color: #FFFFFF;
border: 2px solid #000000;
padding: 1px;
}
input:hover,input:focus:hover {
font-size: 12px;
border: 2px solid #FF6600;
}
input:focus {
font-size: 12px;
border: 2px solid #FF9900;
}
.btn{
background-color: #FFFFCC;
}
-->
</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
