Question

轻松创建拥有不同样式与布局的漂亮表单。

用法

为了应用这个组件，需要添加 .uk-form 类到表单元素中。所有表单控件都被并排放置在下面这行。

示例

表单

Option 01 Option 02 Button Checkbox

注意 在这个例子中，我们使用了一个按钮组件中的按钮。当表单元素在较小的视口中堆叠时，只需要添加 效果组件 中的 data-uk-margin 属性到它的父元素中，即可实现添加顶部margin。

Code

<form class="uk-form"&GT;
    <fieldset data-uk-margin&GT;
<legend&GT;...</legend&GT;
<input type="text" placeholder=""&GT;
<input type="password" placeholder=""&GT;
<select&GT;
    <option&GT;...</option&GT;
    <option&GT;...</option&GT;
</select&GT;
<button class="uk-button"&GT;...</button&GT;
<label&GT;<input type="checkbox"&GT; ...</label&GT;
    </fieldset&GT;
</form&GT;

---

行

为一个 <div> 元素添加 .uk-form-row 用来放置表单控件。

示例

Legend

Option 01 Option 02 Button Checkbox

Code

<form class="uk-form">
    <fieldset>
<legend>...</legend>
<div class="uk-form-row">...</div>
<div class="uk-form-row">...</div>
    </fieldset>
</form>

---

控件的状态

通过表单控件上反馈的状态，为用户提供基础信息。

禁用

添加 disabled 属性到表单控件中，它的颜色会变淡，并禁止操作。

示例

Option 01 Option 02

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 类到 <input>, <select> 或 <textarea> 元素中使之变大或变小。

示例

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 类到一个 <input>, <select> 或 <textarea> 元素中，调整它的宽度。

示例

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">

你还可以在表单控件里使用 网格组件 中的 .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 类，为表单控件添加行内的或者块级的帮助文本。

示例

这里使用 .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>

注意 布局调整类同样可以用于 <fieldset> 元素中。这意味着如果你使用了多个fieldset，你可以为每个 fieldset设置不同的布局。

---

表单叠放

添加 .uk-form-stacked 类使label标签显示在控件上方。

示例

Text input Password input Select field Option 01 Option 02 Textarea Radio input Radio input
1 2 3 Checkbox input Checkbox input
1 2 3 Mixed controls Checkbox input Number input Option 01 Option 02 Select field

---

水平放置表单

添加 .uk-form-horizontal 类使label标签和控件水平并排放置。

示例

Text input Password input Select field Option 01 Option 02 Textarea Radio input Radio input
1 2 3 Checkbox input Checkbox input
1 2 3 Mixed controls Checkbox input Number input Option 01 Option 02 Select field

---

表单控件中的文本

如果你在表单控件中同时使用了文本与单选框或者文本与复选框，只需要添加 .uk-form-controls-text 类就能使文本适当地对齐。

Code

<div class="uk-form-controls uk-form-controls-text">...</div>

---

表单控件中的垂直间距

如果你在表单控件中创建了段落，添加 .uk-form-controls-condensed 类可以减小段落间的间隔。

示例

Mixed controls混合放置的控件

Checkbox input Number input Option 01 Option 02 Select field

Checkbox input Number input Option 01 Option 02 Select field

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>

---

表单与网格

这个例子展示了如何用 网格组件 空间表单。

示例

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>

---

表单与图标

这个例子展示了怎么为表单添加 图标。

示例

Code

<div class="uk-form-icon">
    <i class="uk-icon-calendar"></i>
    <input type="text">
</div>

---

表单增强

表单可以用 表单增强组件 进行扩展，以定义单选框与复选框的样式。