表单

轻松创建具有不同样式和布局的精美表单。

用法

要应用此组件，请将 .uk-form 类添加到表单元素。 所有表单控件元素都并排放置在下一行中。

示例

注意 在此示例中，我们使用了来自 按钮组件 的按钮。 要在表单元素在较小的视口上堆叠时为其添加上边距，只需将来自 实用工具组件 的 data-uk-margin 属性添加到父元素。

标记

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

行

将 .uk-form-row 类添加到 <div> 元素以堆叠表单控件。

示例

标记

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

控件状态

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

禁用

将 disabled 属性添加到表单控件，它将显示为禁用状态。

示例

标记

<input type="text" placeholder="" disabled>

验证状态

将 .uk-form-danger 或 .uk-form-success 类添加到表单控件，以通知用户该值是否已验证。

示例

标记

<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> 元素以使其更小或更大。

示例

标记

<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> 元素以调整其宽度。

示例

标记

<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-* 类应用于表单控件。 如果您希望表单控件扩展到其父容器的完整宽度，这将特别有用。

示例

标记

<input type="text" placeholder="" class="uk-width-1-1">

表单空白

添加 .uk-form-blank 类以最小化表单控件的样式。

示例

标记

<input type="text" placeholder="" class="uk-form-blank">

帮助文本

使用 .uk-form-help-inline 或 .uk-form-help-block 类为控件添加内联和块级帮助文本。

示例

标记

<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 和 .uk-form-horizontal。 两者都要求表单控件用 .uk-form-row 类包装，以便堆叠它们。 标签需要 .uk-form-label 类，并且控件必须包裹在 .uk-form-controls 类中。

标记

<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 类以在控件顶部显示标签。

示例

表单水平

添加 .uk-form-horizontal 类以并排显示标签和控件。

示例

表单控件中的文本

如果您在表单控件中使用文本和复选框或单选按钮，只需添加 .uk-form-controls-text 类即可正确对齐文本。

标记

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

表单控件中的垂直间距

如果您在表单控件中创建段落，请添加 .uk-form-controls-condensed 类以减小间距。

示例

标记

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

表单和栅格

这是如何将表单与 栅格组件 一起使用的示例。

示例

标记

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

表单和图标

这是一个如何将来自 图标组件 的图标添加到表单的示例。

示例

标记

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

表单高级

可以通过 表单高级组件 扩展表单，以设置单选和复选框输入的样式。