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

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

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

下拉选单实际效果：
attachments/200608/18_104621_selectoptgroup.gif

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属性可以标出它的名称。如果还要增强表现，比如类别用其他颜色表示，可以对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">
<!--
body {
  font-family: "宋体";
  font-size: 12px;
}
#logonForm {
  background-color: #333;
  padding: 3px;
  text-align: center;
  width: 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

posted @ 2008-03-05 08:53  NewSea  阅读(1381)  评论(1)  编辑  收藏  举报