# 表單 輕松創建擁有不同樣式與布局的漂亮表單。 ## 用法 為了應用這個組件，需要添加 `.uk-form` 類到表單元素中。所有表單控件都被并排放置在下面這行。 ### 示例  注意 在這個例子中，我們使用了一個[按鈕組件](http://iyunye.com/uikit/docs/button.html)中的按鈕。當表單元素在較小的視口中堆疊時，只需要添加 [效果組件](../docs/utility.html) 中的 `data-uk-margin` 屬性到它的父元素中，即可實現添加頂部margin。 ### Code ``` <form class="uk-form"> <fieldset data-uk-margin> <legend>...</legend> <input type="text" placeholder=""> <input type="password" placeholder=""> <select> <option>...</option> <option>...</option> </select> <button class="uk-button">...</button> <label><input type="checkbox"> ...</label> </fieldset> </form> ``` * * * ### 行 為一個 `&lt;div&gt;` 元素添加 `.uk-form-row` 用來放置表單控件。 #### 示例  #### Code ``` <form class="uk-form"> <fieldset> <legend>...</legend> <div class="uk-form-row">...</div> <div class="uk-form-row">...</div> </fieldset> </form> ``` * * * ## 控件的狀態 通過表單控件上反饋的狀態，為用戶提供基礎信息。 ### 禁用 添加 `disabled` 屬性到表單控件中，它的顏色會變淡，并禁止操作。 ### 示例  #### Code ``` <input type="text" placeholder="" disabled> ``` * * * ### 有效性狀態 添加 `.uk-form-danger` 或 `.uk-form-success` 類到表單控件中，用于提示用戶某個值是否通過有效性驗證。 #### 示例  #### Code ``` <input type="text" placeholder="" class="uk-form-danger"> <input type="text" placeholder="" class="uk-form-success"> ``` * * * ## 控件的修飾 ### 尺寸的調整 添加 `.uk-form-large` 或 `.uk-form-small` 類到 `&lt;input&gt;`, `&lt;select&gt;` 或 `&lt;textarea&gt;` 元素中使之變大或變小。 #### 示例  #### Code ``` <input type="text" placeholder="" class="uk-form-large"> <input type="text" placeholder="" class="uk-form-small"> ``` * * * ### 寬度的調整 添加 `.uk-form-width-large`, `.uk-form-width-medium`, `.uk-form-width-small` 或 `.uk-form-width-mini` 類到一個 `&lt;input&gt;`, `&lt;select&gt;` 或 `&lt;textarea&gt;` 元素中，調整它的寬度。 #### 示例  #### Code ``` <input type="text" placeholder="" class="uk-form-width-large"> <input type="text" placeholder="" class="uk-form-width-medium"> <input type="text" placeholder="" class="uk-form-width-small"> <input type="text" placeholder="" class="uk-form-width-mini"> ``` 你還可以在表單控件里使用 [網格組件](grid.html) 中的 `.uk-width-*` 類。這是非常有用的，如果你想讓表單控件的寬度擴展填滿它的父級容器的寬度。 #### 示例  #### Code ``` <input type="text" placeholder="" class="uk-width-1-1"> ``` * * * ### 白板表單 添加 `.uk-form-blank` 類使表單控件的樣式極簡化。 #### 示例  #### Code ``` <input type="text" placeholder="" class="uk-form-blank"> ``` * * * ### 幫助文本 使用 `.uk-form-help-inline` 或 `.uk-form-help-block` 類，為表單控件添加行內的或者塊級的幫助文本。 #### 示例  #### Code ``` <div class="uk-form-row"> <input type="text" placeholder=""> <span class="uk-form-help-inline">...</span> </div> <div class="uk-form-row"> <textarea cols="" rows="" placeholder="">...</textarea> <p class="uk-form-help-block">...</p> </div> ``` * * * ## 布局的調整 這里有兩個可用的類可以用于布局調整： `.uk-form-stacked` and `.uk-form-horizontal`。它們都要求表單空間被放置在帶有 `.uk-form-row` 類的容器中。 Label 必須添加 `.uk-form-label` 類，并把相應的空間放置在帶有 `.uk-form-controls` 類的容器中。 ### Code ``` <form class="uk-form uk-form-stacked"> <div class="uk-form-row"> <label class="uk-form-label" for="">...</label> <div class="uk-form-controls">...</div> </div> </form> ``` 注意 布局調整類同樣可以用于 `&lt;fieldset&gt;` 元素中。這意味著如果你使用了多個fieldset，你可以為每個 fieldset設置不同的布局。 * * * ### 表單疊放 添加 `.uk-form-stacked` 類使label標簽顯示在控件上方。 #### 示例  * * * ### 水平放置表單 添加 `.uk-form-horizontal` 類使label標簽和控件水平并排放置。 #### 示例  * * * ### 表單控件中的文本 如果你在表單控件中同時使用了文本與單選框或者文本與復選框，只需要添加 `.uk-form-controls-text` 類就能使文本適當地對齊。 #### Code ``` <div class="uk-form-controls uk-form-controls-text">...</div> ``` * * * ### 表單控件中的垂直間距 如果你在表單控件中創建了段落，添加 `.uk-form-controls-condensed` 類可以減小段落間的間隔。 #### 示例  #### Code ``` <div class="uk-form-controls uk-form-controls-text"> <p class="uk-form-controls-condensed">...</p> <p class="uk-form-controls-condensed">...</p> </div> ``` * * * ## 表單與網格 這個例子展示了如何用 [網格組件](../docs/grid.html) 空間表單。 ### 示例  ### Code ``` <form class="uk-form"> <div class="uk-grid"> <div class="uk-width-1-2"><input type="text" placeholder="" class="uk-width-1-1"></div> <div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div> <div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div> </div> </form> ``` * * * ## 表單與圖標 這個例子展示了怎么為表單添加 [圖標](../docs/icon.html)。 ### 示例  ### Code ``` <div class="uk-form-icon"> <i class="uk-icon-calendar"></i> <input type="text"> </div> ``` * * * ## 表單增強 表單可以用 [表單增強組件](../docs/form-advanced.html) 進行擴展，以定義單選框與復選框的樣式。