-
使用表格来定义表单布局时，可在表单中实现更为统一的空间布局，无论文本框之前的标签文本长短如何，所有的文本框都是在垂直方向上对齐的。
-
在将文本标签和input控件放到表格之前，首先创建好表单。
-
在表单中可使用tabindex特性和accesskey特性来设置input控件的Tab键顺序和键盘快捷方式。Tab键的索引是从0开始。
** 许多块级元素会在页面中强制产生一个换行。这样就会导致在单元格，或表单中产生一些额外的间距。这些间距无法通过调整padding或margin来删除，最简单的就是使用CSS关闭表单的margin（需使用form标记作为选择器，在样式声明中添margin：0和padding：0声明，就可重置这两个值并移除任何额外的间距）**
- 在meter元素中，optimum特性用于声明理想的值，在一个多步骤的处理过程中，使用progress元素来指示进度。
datalist元素用于在input控件中添加建议数据以帮助用户填写表单。
<input name=”~” list=”~~~~”>
<datalist id=”~~~~”>
<option value=”@@@@”>@@@</optio>
<option value=”@@@@”>@@@</optio>
<option value=”@@@@”>@@@</optio>
……
</datalist>
说了这麽多，下边我们就来个具体的例子来说明下
用样式和Fieldset取代表格布局
<!doctype html>
<html>
<head>
<title>~~~~~</title>
<style>
body{
font-family:verdana;
font-size:11px;
}
input, textarea{
border:1px
solid #aaa;
box-shadow:0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px; padding:4px;
}
input:focus, textarea:focus{
background:#fff;
border:1px solid #555;
box-shadow:0px 0px 3px #aaa;
}
textarea{
overflow:auto;//可以让浏览器根据输入的文本的数量来决定是否显示滚动。overflow:scroll可以强制滚动条显示出来。
padding:5px;
}
input#submit{
color:#555;
font-weight:bold;
}
label{
padding-top:10px;
display:block;
font-weight:bold;
}
legend{
font-size:14pt;
font-weight:bold;
color:#555;
}
fieldset{
border:1px solid #555;
border-radius:4px;
margin-bottom:5px;
}
input:invalid, textarea:invalid{ <!-- input:required:invalid选择器用于告诉浏览器寻找具有required特性，但目前无效的input控件-->
background:#fff url(invalid.png) no-repeat 98% center;
box-shadow:0 0 5px #d45252;
border-color:#b03535;
}
input:required:valid, textarea:required:valid{
background:#fff url(valid.png) no-repeat 98% center;
box-shadow:0 0 5px #5cd053;
border-color:#28921f;
}
</style>
</head>
<body>
<form action=”#”>
<fieldset> <!-- fieldset元素对所有标签及控件进行分组，并将每一组标签和控件放在相应的标题之下。可以使用legend标记为分组定义一个标题。-->
<legend>~~~</legend>
<p>~~~~~~</p>
<label for=”name”>~~</label>
<input name=”name” type=”text” size=”30” id=”name” taborder=”1” required>
<label for=”email”>~~</label>
<input name=”email” type=”email” size=”30” id=”~~” taborder=”2” required>
<label for=”comments”>~~</label>
<textarea name=”comments” cols=”25” rows=”5” required></textarea>
<br><br>
<input type=”submit” name=”Submit” value=”Submit” id=”~~”>//添加id特性，是方便在样式表中作为选择器加以引用
</fieldset>
</form>
</body>
</html>
网友评论