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

技术1：标签三明治

将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 和单选按钮/多选框出现在不同行，可以选择不把它包含在 label 里面，或者使用硬换行处理。
每种情况都在下面展示了。

当这些看起来比较时髦的时候，w3c 事实上已经含蓄地展示了他们的 label 例子。

主要好处：简单

代码：

label, input, select, textarea {display: block;}label {margin-bottom: 10px;}input[type="radio"], input[type="checkbox"] {display: inline;}<form> <fieldset><legend>contact form</legend><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) — <em>wrapped label</em></label><input name=" choice" type="radio" /> choice 1<input name=" choice" type="radio" /> choice 2<input name=" choice" type="radio" /> choice 3<label style="margin-bottom: 0pt;" for=" choices2"> choices (checkbox) — <em>non-wrapped label, margin reset</em></label><input name=" choice2" type="checkbox" /> choice 1<input name=" choice2" type="checkbox" /> choice 2<input name=" choice2" type="checkbox" /> choice 3<div style="height: 10px;"><!-- just to split the demo up --></div><label for=" choices3"> choices (checkbox) — <em>wrapped, hard line-break</em></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><label for="message">message<textarea cols="36" rows="12" name="message"></textarea></label><input type="submit" value="send it" /></fieldset></form>

运行结果：

技术2：懒人

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

主要好处：快速
代码：

<form> <fieldset><legend>contact form</legend><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<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><label for="message">message</label><textarea cols="36" rows="12" name="message"></textarea><input type="submit" value="send it" /></fieldset></form>

运行结果：