表單

使用不同的樣式和版面配置輕鬆建立美觀的表單。

使用方式

將以下其中一個類別新增至 <form> 元素內的表單控制項以定義它們。

類別	描述
`.uk-input`	將此類別新增至 `<input>` 元素。
`.uk-select`	將此類別新增至 `<select>` 元素。
`.uk-textarea`	將此類別新增至 `<textarea>` 元素。
`.uk-radio`	將此類別新增至 `<input type="radio">` 元素以建立單選按鈕。
`.uk-checkbox`	將此類別新增至 `<input type="checkbox">` 元素以建立核取方塊。
`.uk-range`	將此類別新增至 `<input type="range">` 元素以建立範圍表單。

<form>
    <input class="uk-input" type="text">
    <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 類別新增至 <legend> 元素以定義欄位集和表單圖例。

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

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

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

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

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea" aria-label="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" aria-label="Range">
        </div>

    </fieldset>
</form>

狀態修飾詞

使用以下其中一個類別，透過表單控制項上的回饋狀態為使用者提供基本資訊。

類別	描述
`.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" aria-label="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" aria-label="form-success" value="form-success">
</div>

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

大小修飾詞

將其中一個類別新增至 <input>、<select> 或 <textarea> 元素以修改其大小。

類別	描述
`.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" aria-label="Large">
    </div>

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

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

</form>

寬度修飾詞

將以下其中一個類別新增至 <input>、<select> 或 <textarea> 元素以調整其寬度。

類別	描述
`.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" aria-label="Large">
    </div>

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

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

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

</form>

您也可以將寬度元件的 .uk-width-* 類別套用至表單控制項。

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

空白修飾詞

新增 .uk-form-blank 類別以最小化表單控制項的樣式設定。

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

版面配置

定義標籤和控制項，並將堆疊或水平版面配置套用至表單元素。版面配置修飾詞可以新增至任何父元素，例如 <fieldset> 元素。這使得可以為每個欄位集設定不同的表單版面配置。

類別	描述
`.uk-form-stacked`	新增此類別以在控制項上方顯示標籤。
`.uk-form-horizontal`	新增此類別以並排顯示標籤和控制項。
`.uk-form-label`	新增此類別以定義表單標籤。
`.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>

<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 類別來更好地對齊它們。

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

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

表單和圖示

您可以使用圖示元件中的圖示在表單內。將 .uk-form-icon 類別新增至 <span> 元素。透過將實用工具元件中的 .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" aria-label="Not clickable icon">
        </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" aria-label="Not clickable icon">
        </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" aria-label="Clickable icon">
        </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" aria-label="Clickable icon">
        </div>
    </div>

</form>

表單和網格

您也可以使用網格和寬度元件來定義表單的版面配置。

<form class="uk-grid-small" uk-grid>
    <div class="uk-width-1-1">
        <input class="uk-input" type="text" placeholder="100" aria-label="100">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" aria-label="50">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25" aria-label="25">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25" aria-label="25">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" aria-label="50">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" aria-label="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" aria-label="Custom controls">
            <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" aria-label="Custom controls">
            <span class="uk-link">upload</span>
        </div>
    </div>

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

</form>

注意 uk-form-custom 的懸停和焦點狀態預設未設定樣式，但您可以使用相鄰的同層選取器來執行此操作。

選擇

使用按鈕、文字或連結作為選取表單。只需將 target: SELECTOR 選項新增至 uk-form-custom 屬性，以選取應該顯示選項值的位置。 target: true 將選取標記中的相鄰元素。

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

<form>

    <div class="uk-margin">
        <div uk-form-custom="target: true">
            <select aria-label="Custom controls">
                <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 aria-label="Custom controls">
                <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 aria-label="Custom controls">
                <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 屬性。深入瞭解

選項	值	預設	描述
`目標`	CSS 選取器、布林值	`false`	值顯示目標。

JavaScript

深入瞭解JavaScript 元件。

初始化

UIkit.formCustom(element, options);

無障礙功能

將適當的 WAI-ARIA 角色、狀態和屬性設定至表單元件。

如果沒有 <label> 元素與表單控制項相關聯，請將 aria-label 屬性設定為表單控制項，以描述其含義。

<input class="uk-input" type="text" aria-label="…">

文件

表單