UIkit3.x文档

表单

轻松创建各种样式和布局的美观表单。

用法

向<form> 元素内的表单控件上添加以下 class 来定义表单组件。

Class Description
.uk-input 将这个class添加到 <input> 元素。
.uk-select 将这个class添加到 <select> 元素。
.uk-textarea 将这个class添加到 <textarea> 元素。
.uk-radio 将这个class添加到 <input type="radio"> 元素来创建单选按钮。
.uk-checkbox 将这个class添加到 <input type="checkbox"> 元素来创建复选框。
.uk-range 将这个class添加到 <input type="range"> 元素来创建滑动条表单。 
<form>
    <select class="uk-select">
        <option></option>
        <option></option>
    </select>
    <textarea class="uk-textarea"></textarea>
    <input class="uk-radio" type="radio">
    <input class="uk-checkbox" type="checkbox">
    <input class="uk-range" type="range">
</form>

将 .uk-fieldset 类添加到 <fieldset> 元素，将 .uk-legend c类添加到<legend> 元素，以定义控件组和表单说明。

  • Legend 
  • <form>
    <fieldset class="uk-fieldset">

        <legend class="uk-legend">Legend</legend>

        <div class="uk-margin">
            <input class="uk-input" type="text" placeholder="Input">
        </div>

        <div class="uk-margin">
            <select class="uk-select">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea"></textarea>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-radio" type="radio" name="radio2" checked> A</label>
            <label><input class="uk-radio" type="radio" name="radio2"> B</label>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-checkbox" type="checkbox" checked> A</label>
            <label><input class="uk-checkbox" type="checkbox"> B</label>
        </div>

        <div class="uk-margin">
            <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
        </div>

    </fieldset>
</form>

状态修饰

使用以下 class 为用户提供基础的反馈信息状态。

Class Description
.uk-form-danger 添加到通知消息，表示验证未通过
.uk-form-success 验证已通过。

在表单控件上添加disabled 属性，来淡化表单的视觉效果。

  • <div class="uk-margin">
    <input class="uk-input uk-form-danger uk-form-width-medium" type="text" placeholder="form-danger" value="form-danger">
</div>

<div class="uk-margin">
    <input class="uk-input uk-form-success uk-form-width-medium" type="text" placeholder="form-success" value="form-success">
</div>

<div class="uk-margin">
    <input class="uk-input uk-form-width-medium" type="text" placeholder="disabled" value="disabled" disabled>
</div>

尺寸

添加以下class之一到 <input>, <select> 或 <textarea> 元素来修改其大小。

Class Description
.uk-form-large 使表单元素更大
.uk-form-small 使表单元素变小 
  • <form>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="Large">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
    </div>

</form>

宽度

添加以下class之一到<input>， <select> 或 <textarea> 元素，以调整它们宽度。

Class Description
.uk-form-width-large 应用500px宽度。
.uk-form-width-medium 应用200px宽度。
.uk-form-width-small 应用130px宽度。
.uk-form-width-xsmall 应用40px宽度。 
  • <form>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-large" type="text" placeholder="Large">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Medium">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-small" type="text" placeholder="Small">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-xsmall" type="text" placeholder="X-Small">
    </div>

</form>

还可以在表单控件上使用 Width 组件中的.uk-width-* 设置宽度。

  •  
  • <form>
    <input class="uk-input uk-width-1-2" type="text" placeholder="uk-width-1-2">
</form>

空白

添加.uk-form-blank class使表单控件的样式极简化。

  •  
  • <form>
    <input class="uk-input uk-form-blank uk-form-width-medium" type="text" placeholder="Form blank">
</form>

布局

定义标签和控件，将堆叠或水平布局应用于表单元素。可以将布局修饰符添加到任何父元素（例如<fieldset>元素）。这使每个表单控件拥有不同的表单布局。

Class Description
.uk-form-stacked label显示在控件上方
.uk-form-horizontal label与控件在同一行
.uk-form-label 定义表单的 labels
.uk-form-controls 定义表单控件 
<form class="uk-form-stacked">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">...</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls">...</div>
    </div>
</form>
  • Radio

  • <form class="uk-form-stacked">

    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">Text</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text...">
        </div>
    </div>

    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-select">Select</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-stacked-select">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls">
            <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
        </div>
    </div>

</form>

水平表单

使用.uk-form-controls-text class 可以更好地将复选框和单选按钮与文本对齐水平线上。

<form class="uk-form-horizontal">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">...</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls uk-form-controls-text">...</div>
    </div>
</form>
  • Radio

  • <form class="uk-form-horizontal uk-margin-large">

    <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-text">Text</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Some text...">
        </div>
    </div>

    <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-select">Select</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-horizontal-select">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls uk-form-controls-text">
            <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
        </div>
    </div>

</form>

表单与图标

在表单中使用 Icon 组件 中的图标。将 .uk-form-icon 类添加到<span> 元素。将Utility 组件中的.uk-inline类添加到围绕这两者容器元素中，将图标与<input> 元素编组。在标记中，图标必须排在第一位。图标默认居于在表单左侧，如果要将图标放在表单右侧，请添加.uk-form-icon-flip类。

<div class="uk-inline">
    <span class="uk-form-icon" uk-icon="icon: user"></span>
    <input class="uk-input">
</div>
  • <form>

    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon" uk-icon="icon: user"></span>
            <input class="uk-input" type="text">
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
            <input class="uk-input" type="text">
        </div>
    </div>

</form>

可点击的图标

要启动某种操作，比如打开模态对话框来选择图片或者链接，可以使用<a>或<button> 元素来创建图标。 

<div class="uk-inline">
    <a class="uk-form-icon uk-form-icon-flip" href="" uk-icon="icon: user"></a>
    <input class="uk-input">
</div>
  • <form>

    <div class="uk-margin">
        <div class="uk-inline">
            <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
            <input class="uk-input" type="text">
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-inline">
            <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
            <input class="uk-input" type="text">
        </div>
    </div>

</form>

表单和网格

您还可以结合使用Grid 和 Width 组件来定义表单的布局。

  • <form class="uk-grid-small" uk-grid>
    <div class="uk-width-1-1">
        <input class="uk-input" type="text" placeholder="100">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
</form>

自定义控件

要用您自己的HTML代码（例如按钮或文本）来替换文本输入表单或者选择表单，请将uk-form-custom属性添加到容器元素。

文件

使用按钮或文本作为文件上传表单。

<div uk-form-custom>
    <input type="file">
    <button type="button"></button>
</div>
  • 这是一段文字
    上传
  • <form>

    <div class="uk-margin">
        <div uk-form-custom>
            <input type="file">
            <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
        </div>
    </div>

    <div class="uk-margin">
        <span class="uk-text-middle">Here is a text</span>
        <div uk-form-custom>
            <input type="file">
            <span class="uk-link">upload</span>
        </div>
    </div>

    <div class="uk-margin" uk-margin>
        <div uk-form-custom="target: true">
            <input type="file">
            <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
        </div>
        <button class="uk-button uk-button-default">Submit</button>
    </div>

</form>

选择表单

使用按钮，文本或链接作为选择表单，只需将 target: SELECTOR 选项添加到uk-form-custom属性中，即可决定选项值的显示位置。 target: true将会选择的相邻元素。

<div uk-form-custom="target: true">
    <select>
        <option></option>
        <option></option>
    </select>
    <button type="button"></button>
</div>
  • Option 01
    Option 01 
  • <form>

    <div class="uk-margin">
        <div uk-form-custom="target: true">
            <select>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
                <option value="3">Option 03</option>
                <option value="4">Option 04</option>
            </select>
            <span></span>
        </div>
    </div>

    <div class="uk-margin">
        <div uk-form-custom="target: > * > span:last-child">
            <select>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
                <option value="3">Option 03</option>
                <option value="4">Option 04</option>
            </select>
            <span class="uk-link">
                <span uk-icon="icon: pencil"></span>
                <span></span>
            </span>
        </div>
    </div>

    <div class="uk-margin">
        <div uk-form-custom="target: > * > span:first-child">
            <select>
                <option value="">Please select...</option>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
                <option value="3">Option 03</option>
                <option value="4">Option 04</option>
            </select>
            <button class="uk-button uk-button-default" type="button" tabindex="-1">
                <span></span>
                <span uk-icon="icon: chevron-down"></span>
            </button>
        </div>
    </div>

</form>

组件选项

您可以添加下面这些选项到uk-form-custom 属性。 了解更多

Option Value Default Description
target CSS selector, Boolean false 显示可选值的目标位置

JavaScript

了解有关JavaScript 组件的更多内容。

初始化

UIkit.formCustom(element, options);