メインコンテンツにスキップ

ドキュメント

フォーム

異なるスタイルとレイアウトで、見栄えの良いフォームを簡単に作成できます。

使用方法

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

<fieldset>要素に.uk-fieldsetクラスを、<legend>要素に.uk-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>

フォームとアイコン

アイコンコンポーネントのアイコンをフォーム内で使用します。<span>要素に.uk-form-iconクラスを追加します。両方の周囲のコンテナ要素にユーティリティコンポーネントの.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`属性に追加できます。 詳細はこちら

オプション 値 デフォルト 説明
target CSSセレクター、ブール値 false 値表示のターゲット。

JavaScript

JavaScriptコンポーネントの詳細はこちらをご覧ください。

初期化

UIkit.formCustom(element, options);

アクセシビリティ

適切なWAI-ARIAの役割、状態、およびプロパティをフォームコンポーネントに設定します。

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