Web标准实用之网页form表单

平时做网页经常使用表单。在web标准还没有来临以前，我们都用table来规划form标单。web标准来临之后，form表单就不应该用table了。 sflj http://www.it55.com kg^&fgd

下面是我处理表单的一些感受，希望对大家有用。 http://www.it55.com/

基于易用性（accesibility）的考虑，表单的标准写法应该在<form>和</form>之中包含fieldset和legend（说明），让用户明白该表单域的内容概要。简单的结构如下：

免费设计素材下载http://www.it55.com

<form>
<fieldset>
<legend></legend>
......
</fieldset>
</form>
在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观，好办，在CSS中把fieldset的border设置为0，legend的display设置为 none就行了。

在绝大多数情况下，表单的布局分两列，左边是标记（label），右边是输入框(input type="text"...)。如此简单的两列布局，我强烈建议不要使用表格。参考http://stylephreak.frogrun.com/uploads/source/cssform.php和http://www.aplus.co.yu/css/forms/?css=1（绝对有价值的两个参考，你已经可以不必往下看了），我们发现，Web标准通用的解决方法是，为label和input type="text"...的外围加上一个div，并把把该div的display设置为block。把label设为float: left;（这也是要把div设置为display: block;的原因）之后就可以让标记跟输入框同一行上了。让label 对齐的一个小窍门是，固定label的宽度，然后根据需要使用text-align向左或者向右对齐。设定宽度的小窍门是，使用单位em根据标记的最大字数来定宽度，不必辛苦测试px。

精美韩国模版下载http://www.it55.com

为了使我的阐述更容易理解，我简单写些代码： IT资讯之家 http://www.it55.com

XHTML：（部分）

http://www.it55.com

<form>
 <fieldset>
 <legend>表单实例</lengend>
  <div><label for="name">姓名：</label><input type="text" id="name" /></div>
  <div><label for="etc">其他等等：</label><input type="text" id="etc" /></div>
  <div class="submit"><input type="submit" value="提交" /></div>
 </fieldset>
</form>
CSS：（部分） 免费网页模版下载http://www.it55.com

  body {/*跟表单无关，设置页面的显示效果*/
   width: 400px;
   margin: 20px auto;
   font: 14px/1.5 Serif;
   }
  fieldset {
   border: none;
   border-top: 1px solid #ccc;
   }
  legend {
   padding: 2px;
   border: 1px solid #ddd;
   background: #ececed;
   }
  div {
   display: block;
   padding: 5px 0;
   }
  label {
   float: left;
   width: 6em;
   text-align: right;
   }
  .submit {
   margin-left: 6em;
   }
  .submit input {
   padding: 2px;
   border: 1px solid #ccc;
   background: #ececec;
   }

（编辑：IT资讯之家 www.it55.com）