表单

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

用法

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

示例

注意在这个例子中，我们使用了一个按钮组件中的按钮。当表单元素在较小的视口中堆叠时，只需要添加效果组件中的 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>

行

为一个 <div> 元素添加 .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 类到 <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 类，为表单控件添加行内的或者块级的帮助文本。

示例

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标签显示在控件上方。

示例

水平放置表单

添加 .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>

表单与网格

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

示例

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>

表单增强

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