メニュー

フォーム
フォームは、関連するユーザー入力フィールドを構造化された方法で表示します。

ダウンロード

タイプ

フォーム

フォーム

バリデーションを探している場合は、フォームビヘイビアを確認してください。

配送情報

請求情報

領収書

注文を送信

コンテンツ

フィールド

フィールドとは、ラベルと入力欄を含むフォーム要素のことです

フィールド

フィールドのセットをまとめて表示できます

フィールドグループは、自動的にレスポンシブなスタイルが適用され、モバイルデバイスでは1行に1つのフィールドに切り替わります。

テキストエリア

テキストエリアを使用すると、拡張されたユーザー入力を許可できます。

テキストエリアのおおよそのサイズを指定するには、rows属性を使用します。

チェックボックス

フォームには、チェックボックスを含めることができます。

UIチェックボックスは、標準のHTMLチェックボックスの特別なスタイル付きバージョンです。
$('.ui.checkbox') .checkbox() ;

ラジオチェックボックス

フォームには、ラジオチェックボックスを含めることができます。

$('.ui.radio.checkbox') .checkbox() ;

ドロップダウン

フォームには、ドロップダウンを含めることができます。

ドロップダウンは、ドロップダウンとして初期化されたselect要素を自動的に変換します。詳細については、ドロップダウンのドキュメントを参照してください。
$('select.dropdown') .dropdown() ;

複数選択

複数選択は、1つのフォームフィールドでいくつかの選択肢を含めるために使用されます

HTML Select

Javascriptまたはuiドロップダウンが有効なオプションでない場合、フォームはselect要素に基本的なスタイルを提供することもできます

メッセージ

フォームには、メッセージを含めることができます。

フォーム内にあるinfoerrorsuccess、またはwarningのメッセージブロックは、デフォルトで非表示になります。
いくつかの問題が発生しました
  • 名を入力してください
  • 姓を入力してください

読み込み中

フォームが読み込み中の状態の場合、自動的に読み込みインジケータが表示されます。

送信

成功

フォームが成功状態の場合、自動的に成功メッセージブロックが表示されます。

フォームが完了しました

ニュースレターへの登録が完了しました。

送信

エラー

フォームがエラー状態の場合、自動的にエラーメッセージブロックが表示されます。

アクションは禁止されています

同じメールアドレスでアカウントを複数回登録することはできません。

送信

警告

フォームが警告状態の場合、自動的に警告メッセージブロックが表示されます。

何か確認してください!
  • そのメールアドレスは購読済みですが、メール内の認証リンクをクリックしていません。
送信

フィールドエラー

個々のフィールドにエラー状態を表示することができます

無効なフィールド

個々のフィールドを無効にすることができます

読み取り専用フィールド

個々のフィールドを読み取り専用にすることができます

フォームのバリエーション

サイズ

フォームはサイズを変化させることができます

送信
送信
送信
送信
送信
送信
送信

均等幅フォーム

フォームはフィールドを自動的に均等幅に分割することができます

反転

暗い背景のフォームは、カラースキームを反転する必要がある場合があります

送信

フィールドのバリエーション

インラインフィールド

フィールドのラベルを上ではなく、横に表示することができます。

フィールドはグリッド列で幅を指定できます

必須

フィールドに入力が必須であることを示すことができます

グループのバリエーション

均等分割

フィールドの幅を均等に分割することができます

グループ化されたフィールド

フィールドで関連する選択肢を示すことができます

均等幅フィールド

フィールドは自動的に均等幅に分割することができます

インラインフィールド

複数のフィールドを1行にインラインで表示できます

ディマーメッセージ
ディマーのサブヘッダー