Bootstrap-forms

提供：Dev Guides
移動先:案内、検索

ブートストラップ-フォーム

この章では、Bootstrapを使用して簡単にフォームを作成する方法を学習します。 Bootstrapは、シンプルなHTMLマークアップとさまざまなスタイルのフォーム用の拡張クラスを使用して簡単に作成できます。 この章では、Bootstrapを使用して簡単にフォームを作成する方法を学習します。

フォームレイアウト

ブートストラップは、次のタイプのフォームレイアウトを提供します-

  • 垂直（デフォルト）フォーム
  • インラインフォーム
  • 横型

縦型または基本型

基本的なフォーム構造にはBootstrapが付属しています。個々のフォームコントロールは、グローバルなスタイルを自動的に受け取ります。 基本的なフォームを作成するには、次のようにします-

  • ロール_form_を親<form>要素に追加します。
  • クラス_.form-group_を使用して、ラベルとコントロールを<div>でラップします。 これは最適な間隔に必要です。
  • _.form-control_のクラスをすべてのテキスト<input>、<textarea>、および<select>要素に追加します。
<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>

   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>

   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>

   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

インラインフォーム

すべての要素がインライン、左揃え、ラベルが並んでいるフォームを作成するには、クラス_.form-inline_を<form>タグに追加します。 

<form class = "form-inline" role = "form">

   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>

   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>

   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>

   <button type = "submit" class = "btn btn-default">Submit</button>
</form>
  • デフォルトでは、Bootstrapの入力、選択、およびテキストエリアの幅は100％です。 インラインフォームを使用する場合は、フォームコントロールの幅を設定する必要があります。
  • クラス_.sr-only_を使用すると、インラインフォームのラベルを非表示にできます。

横型

水平フォームは、マークアップの量だけでなく、フォームの表示においても他のフォームとは異なります。 水平レイアウトを使用するフォームを作成するには、次の操作を行います-

  • _.form-horizo​​ntal_のクラスを親の<form>要素に追加します。
  • クラス_.form-group_を使用して、ラベルとコントロールを<div>でラップします。
  • _.control-label_のクラスをラベルに追加します。
<form class = "form-horizontal" role = "form">

   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>

      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>

   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>

      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>

   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>

   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>

</form>

サポートされているフォームコントロール

ブートストラップは、主に_input、textarea、checkbox、radio、およびselect._の最も一般的なフォームコントロールをネイティブにサポートします。

入力

最も一般的なフォームテキストフィールドは入力フィールドです。 これは、ユーザーが重要なフォームデータのほとんどを入力する場所です。 Bootstrapは、text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、、および_color_のすべてのネイティブHTML5入力タイプをサポートしています。 _Inputs_を完全にスタイル設定するには、適切な_type_宣言が必要です。 

<form role = "form">

   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>

</form>

テキストエリア

textareaは、複数行の入力が必要なときに使用されます。 必要に応じて_rows_属性を変更します（行数が少ない=小さいボックス、行数が多い=大きなボックス）。 

<form role = "form">

   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>

</form>

チェックボックスとラジオボタン

チェックボックスとラジオボタンは、ユーザーがプリセットオプションのリストから選択できるようにする場合に便利です。

  • フォームを作成するときに、ユーザーがリストから任意の数のオプションを選択できるようにする場合は、_checkbox_を使用します。 ユーザーを1つの選択だけに制限する場合は、_radio_を使用します。
  • .checkbox-inline_または.radio-inline_クラスを使用して、コントロールの一連のチェックボックスまたはラジオを同じ行に表示します。

次の例は、両方の（デフォルトおよびインライン）タイプを示しています- 

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>

   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>

   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>

   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>

   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

選択する

selectは、ユーザーが複数のオプションから選択できるようにする場合に使用されますが、デフォルトでは1つしか許可されません。

  • 状態や番号など、ユーザーが使い慣れているリストオプションには<select>を使用します。
  • _multiple = "multiple" _を使用して、ユーザーが複数のオプションを選択できるようにします。

次の例は、両方の（選択および複数）タイプを示しています- 

<form role = "form">

   <div class = "form-group">
      <label for = "name">Select list</label>

      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>

      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

   </div>

</form>

静的制御

水平フォーム内のフォームラベルの横にプレーンテキストを配置する必要がある場合は、<p>で_.form-control-static_クラスを使用します。 

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>

      <div class = "col-sm-10">
         <p class = "form-control-static">email@example.com</p>
      </div>

   </div>

   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>

      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>

   </div>
</form>

フォーム制御状態

：focus（つまり、ユーザーが入力をクリックするかタブで入力する）状態に加えて、Bootstrapは無効な入力とフォーム検証用のクラスのスタイルを提供します。

入力フォーカス

入力が_：focus_を受け取ると、入力のアウトラインが削除され、_box-shadow_が適用されます。

無効な入力

入力を無効にする必要がある場合は、単に_disabled_属性を追加するだけで無効になりません。また、カーソルが要素の上に移動すると、スタイルとマウスカーソルが変更されます。

無効なフィールドセット

<fieldset>内のすべてのコントロールを一度に無効にするには、<fieldset>にdisabled属性を追加します。

検証状態

ブートストラップには、エラー、警告、成功メッセージの検証スタイルが含まれています。 使用するには、適切なクラス（.has-warning、.has-error、または.has-success）を親要素に追加するだけです。

次の例は、すべてのフォームコントロールの状態を示しています- 

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>

   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>

   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div>
      </div>

      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label">
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control">
               <option>Disabled select</option>
            </select>
         </div>
      </div>
   </fieldset>

   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>

   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>

   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

フォームコントロールのサイズ設定

それぞれ_.input-lg_や_.col-lg-* _などのクラスを使用して、フォームの高さと幅を設定できます。 次の例はこれを示しています- 

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>

   <div class = "form-group"></div>

   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>

   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>

   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>

      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>

      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>

   </div>
</form>

ヘルプテキスト

ブートストラップフォームコントロールには、入力とともに流れるブロックレベルのヘルプテキストを含めることができます。 コンテンツの全幅ブロックを追加するには、<input>の後に_.help-block_を使用します。 次の例はこれを示しています- 

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">

   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>

</form>
「https://www.finddevguides.com/index.php?title=Bootstrap-forms&oldid=7313」から取得
Powered by MediaWiki