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

執行結果：

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

執行結果：