技术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>

运转结果：