• 12/31
  • 2008
您是本文的第2278位读者

  这是一个学习WEB标准的例子,我们在不使用标准之前为表单布局一般都使用表格,在这个例子中我们抛弃表格,来使用CSS为表单进行布局。

  

  CSS设置代码:

  

<style type="text/css">

  label{

  float: left;

  width: 120px;

  font-weight: bold;

  }

  input, textarea{

  width: 180px;

  margin-bottom: 5px;

  }

  textarea{

  width: 250px;

  height: 150px;

  }

  .boxes{

  width: 1em;

  }

  #submitbutton{

  margin-left: 120px;

  margin-top: 5px;

  width: 90px;

  }

  br{

  clear: left;

  }

  </style>

  HTML代码:

  

<form>

  <label for="user">Name</label>

  <input type="text" name="user" value="" /><br />

  <label for="emailaddress">Email Address:</label>

  <input type="text" name="emailaddress" value="" /><br />

  <label for="comments">Comments:</label>

  <textarea name="comments"></textarea><br />

  <label for="terms">Agree to Terms?</label>

  <input type="checkbox" name="terms" class="boxes" /><br />

  <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

  </form>

  在这个例子中用 "label" 标签来布局表单的左部,即表单的提示内容,使表单显示的效果明显分为左右两部分,左部的宽度我们可以使用 "label" 标签来控制。