# 表单 轻松创建拥有不同样式与布局的漂亮表单。 ## 用法 为了应用这个组件，需要添加 `.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) 进行扩展，以定义单选框与复选框的样式。