网页设计之5种简单的XHTML网页表单(2)

技术3：语义先生

web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。

主要好处： 结构化

代码：

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

运行结果：

技术4：分而治之

假如你采取将横向表单，需要何种形式？很多情况（客户）会要求横向表单。我们可以依赖的是老伙伴 div，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。

主要好处：空间的利用

代码：

label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
.form-column {
width: 150px;
height: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
<form> <fieldset>
<legend>Contact Form</legend>
<div class="form-column">

<label for="name">
Name</label>
<input id="name" name="name" size="20" />

<label for="email">
Email</label>
<input id="email" name="email" size="20" />

<label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3</div>
<!-- /form-column -->
<div class="form-column">

<label for=" Choices3"> Choices (radio)</label>
<input name=" Choice2" type="radio" /> Choice 1
<input name=" Choice2" type="radio" /> Choice 2
<input name=" Choice2" type="radio" /> Choice 3

<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice2" type="checkbox" /> Choice 1
<input name=" Choice2" type="checkbox" /> Choice 2
<input name=" Choice2" type="checkbox" /> Choice 3

<label for="dropdown">
Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

<input type="submit" value="send it" /></div>
<!-- /form-column -->

</fieldset>
</form>

运行结果：

技术5：老学究似的懒人

如果你不想纠缠与 CSS，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。

主要好处：直观

代码：

<form> <fieldset>

<legend>Contact Form</legend>
<table border="0">
<tbody>
<tr><!-- column one -->
<td><label for="name">Name</label>
<input id="name" name="name" size="20" /> <label for="email">Email</label>
<input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3</td>
<!-- column two -->
<td><label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
<label for="dropdown">Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select></td>
<!-- column three -->
<td><label for="message">Message</label>
<input type="submit" value="send it" /></td>
</tr>
</tbody></table>
</fieldset>
</form>

运行结果：