表单构成

技术1：标签三明治
将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 和单选按钮/多选框出现在不同行，可以选择不把它包含在 label 里面，或者使用硬换行处理。每种情况都在下面展示了。当这些看起来比较时髦的时候，W3C 事实上已经含蓄地展示了他们的 label 例子。
主要好处：简单
代码：

label, input, select, textarea {display: block;}<br />label {margin-bottom: 10px;}<br />input[type="radio"], input[type="checkbox"] {display: inline;}<br /><form><fieldset><br /><legend>Contact Form</legend><br /><label for="name"><br />Name</label><br /><input id="name" name="name"><br /><label for="email">Email</label><br /><input id="email" name="email"><br /><label for=" Choices">Choices (radio) — <em>wrapped label</em></label><br /><input type="radio" name=" Choice"> Choice 1<br /><input type="radio" name=" Choice"> Choice 2<br /><input type="radio" name=" Choice"> Choice 3<br /><label style="MARGIN-BOTTOM: 0pt" for=" Choices2">Choices (checkbox) — <em>non-wrapped label, margin reset</em></label><br /><input type="checkbox" name=" Choice2"> Choice 1<br /><input type="checkbox" name=" Choice2"> Choice 2<br /><input type="checkbox" name=" Choice2"> Choice 3<br /><div style="HEIGHT: 10px"><!-- just to split the demo up --></div><br /><label for=" Choices3">Choices (checkbox) — <em>wrapped, hard line-break</em></label><br /><input type="checkbox" name=" Choice3"> Choice 1<br /><input type="checkbox" name=" Choice3"> Choice 2<br /><input type="checkbox" name=" Choice3"> Choice 3<br /><label for="dropdown"><br />Question</label><br /><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option></select><br /><label for="message"><br />Message<br /><textarea name="message" rows="12" cols="36">

运行结果：
技术2：懒人
许多开发者采用了这种不正统但是快速简单（用换行隔断标记）的方法。虽然能运行，但是对你的 css 能力有害，因为你不需要任何 css 去实现它。
主要好处：快速代码：

<br /><form><fieldset><br /><legend>Contact Form</legend><br /><label for="name">Name</label><br /><input id="name" name="name"> <label for="email">Email</label><br /><input id="email" name="email"> <label for=" Choices">Choices (radio)</label><br /><input type="radio" name=" Choice"> Choice 1<br /><input type="radio" name=" Choice"> Choice 2<br /><input type="radio" name=" Choice"> Choice 3<br /><label for=" Choices3">Choices (checkbox)</label><br /><input type="checkbox" name=" Choice3"> Choice 1<br /><input type="checkbox" name=" Choice3"> Choice 2<br /><input type="checkbox" name=" Choice3"> Choice 3<br /><label for="dropdown">Question</label><br /><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option></select><br /><label for="message">Message</label><br /><textarea name="message" rows="12" cols="36">

运行结果：
技术3：语义先生
web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。
主要好处： 结构化
代码：

ol {<br />list-style: none;<br />padding-left: 0;<br />}<br /><form><fieldset><br /><legend>Contact Form</legend><br /><ol><br /><li><label for="name">Name</label><br /><input id="name" name="name"></li><br /><li><label for="email">Email</label><br /><input id="email" name="email"></li><br /><li><label for=" Choices">Choices (radio)</label><br /><input type="radio" name=" Choice"> Choice 1<br /><input type="radio" name=" Choice"> Choice 2<br /><input type="radio" name=" Choice"> Choice 3</li><br /><li><label for=" Choices3">Choices (checkbox)</label><br /><input type="checkbox" name=" Choice3"> Choice 1<br /><input type="checkbox" name=" Choice3"> Choice 2<br /><input type="checkbox" name=" Choice3"> Choice 3</li><br /><li><label for="dropdown">Question</label><br /><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option></select></li><br /><li><label for="message">Message</label><textarea name="message" rows="12" cols="36">

运行结果：
技术4：分而治之
假如你采取将横向表单，需要何种形式？很多情况（客户）会要求横向表单。我们可以依赖的是老伙伴 div，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。
主要好处：空间的利用
代码：

label, input, select, textarea {display: block;}<br />label {margin-bottom: 10px;}<br />input[type="radio"], input[type="checkbox"] {display: inline;}<br />.form-column {<br />width: 150px;<br />height: 250px;<br />padding-left: 20px;<br />border-left: 1px solid #ccc;<br />float: left;<br />}<br /><form><fieldset><br /><legend>Contact Form</legend><br /><div class="form-column"><br /><label for="name"><br />Name</label><br /><input id="name" name="name"><br /><label for="email"><br />Email</label><br /><input id="email" name="email"><br /><label for=" Choices">Choices (radio)</label><br /><input type="radio" name=" Choice"> Choice 1<br /><input type="radio" name=" Choice"> Choice 2<br /><input type="radio" name=" Choice"> Choice 3</div><br /><!-- /form-column --><br /><div class="form-column"><br /><label for=" Choices3">Choices (radio)</label><br /><input type="radio" name=" Choice2"> Choice 1<br /><input type="radio" name=" Choice2"> Choice 2<br /><input type="radio" name=" Choice2"> Choice 3<br /><label for=" Choices3">Choices (checkbox)</label><br /><input type="checkbox" name=" Choice2"> Choice 1<br /><input type="checkbox" name=" Choice2"> Choice 2<br /><input type="checkbox" name=" Choice2"> Choice 3<br /><label for="dropdown"><br />Question</label><br /><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option></select><br /><input type="submit" value="send it"></div><br /><!-- /form-column --><br /></fieldset><br /></form><br />

运行结果：
技术5：老学究似的懒人
如果你不想纠缠与 CSS，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。
主要好处：直观
代码：
<form><form><fieldset><br /><legend>Contact Form</legend><br /><table border="0"><br /><tbody><br /><tr><!-- column one --><br /><td><label for="name">Name</label><br /><input id="name" name="name"> <label for="email">Email</label><br /><input id="email" name="email"> <label for=" Choices">Choices (radio)</label><br /><input type="radio" name=" Choice"> Choice 1<br /><input type="radio" name=" Choice"> Choice 2<br /><input type="radio" name=" Choice"> Choice 3</td><br /><!-- column two --><br /><td><label for=" Choices3">Choices (checkbox)</label><br /><input type="checkbox" name=" Choice3"> Choice 1<br /><input type="checkbox" name=" Choice3"> Choice 2<br /><input type="checkbox" name=" Choice3"> Choice 3<br /><label for="dropdown">Question</label><br /><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option></select></td><br /><!-- column three --><br /><td><label for="message">Message</label><br /><input type="submit" value="send it"></td><br /></tr><br /></tbody></table><br /></fieldset><br /></form><br /></form>