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

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

フォームレイアウト

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

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

縦型または基本型

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

  • 親の<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>

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

Bootstrapは、主​​に入力、テキスト領域、チェックボックス、ラジオ、および選択の最も一般的なフォームコントロールをネイティブにサポートします。

入力

最も一般的なフォームテキストフィールドは入力フィールドです。これは、ユーザーが重要なフォームデータのほとんどを入力する場所です。Bootstrapは、テキスト、パスワード、日時、日時ローカル、日付、月、時刻、週、番号、電子メール、URL、検索、電話番号、色など、すべてのネイティブHTML5入力タイプをサポートします。入力を完全にスタイル設定するには、適切な型宣言が必要です。

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

Textarea

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

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

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

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

  • フォームを作成するときに、ユーザーがリストから任意の数のオプションを選択できるようにする場合は、チェックボックスを使用します。ユーザーを1つの選択だけに制限する場合は、ラジオを使用します。

  • .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>を使用します。

  • 使用複数=「複数」のユーザーが複数のオプションを選択することができるようにします。

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

<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 protected]</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を受け取ると、入力のアウトラインが削除され、ボックスシャドウが適用されます。

無効な入力

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

無効なフィールドセット

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

検証状態

ブートストラップには、エラー、警告、および成功メッセージの検証スタイルが含まれています。使用するには、適切なクラス（.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>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved