ブートストラップによってサポートされるフォームコントロールは次のとおりです。
Bootstrapは、主に入力、Textarea、チェックボックス、ラジオ、および選択の最も一般的なフォームコントロールをサポートします。
入力ボックス
最も一般的なフォームテキストフィールドは、入力ボックス入力です。ユーザーは、必要なフォームデータのほとんどを入力できます。 Bootstrapは、テキスト、パスワード、DateTime、DateTime-Local、Date、Month、Time、Week、Number、Email、URL、Search、Tel、Colorなど、すべてのネイティブHTML5入力タイプをサポートします。入力を完全にスタイルできるように、適切なタイプ宣言が必要です。
<！doctype html> <html> <head> <title> bootstrapインスタンス - 入力ボックス</title> <link rel = "styleSheet" href = "http://apps.bdimg.com/libs/3.3.0/css/boottrap.min.css"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> < src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form role = "> <div> <label for =" name "> tag </label> <入力タイプ=" "placeholder = </ht> </</</</</</f
結果は次のとおりです。
Textarea
複数の入力行を作成する必要がある場合は、テキストボックスTextareaを使用できます。必要に応じて、行のプロパティを変更できます。
<！doctype html> <html> <head> <title> bootstrapインスタンス - テキストボックス</title> <link rel = "styleSheet" href = "http://apps.bdimg.com/libs/3.3.0/css/boottrap.min.css"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> < src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form role = "> <div> <ラベル=" name ">テキストボックス</label> <textarea rows = "3"> </textarea> </div> </form> </body> </html>
結果は次のとおりです。
チェックボックス（（チェックボックス）とラジオボックス（ラジオ）
チェックボックスとラジオボタンは、ユーザーが一連のプリセットオプションから選択できるようにするために使用されます。
フォームを作成するときは、ユーザーがリストからいくつかのオプションを選択したい場合は、チェックボックスを使用します。ユーザーが1つのオプションのみを選択することを制限する場合は、Radioを使用してください。
一連のチェックボックスとラジオボックスに.Checkbox-Inlineまたは.Radio-Inlineクラスを使用して、それらを制御して同じ行に表示されます。
次の例は、これら2つのタイプ（デフォルトとインライン）を示しています。
<！Doctype html> <html> <head> <title> bootstrapインスタンス - チェックボックスとラジオボタン</title> <link rel = "styleSheet" http://apps.bdimg.com/libs/boottrap/3.3.0/css/boottrap.min.css "> < src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> < src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <label for = "name">インスタンスデフォルトチェックボックスとラジオボタンのインスタンス</ラベル> <ラベル> <ラベル> 1 </label> </div> <div> <label> <入力タイプ= "チェックボックス" value = ""> option 2 </label> </div> <div> <label> <入力タイプ= "radio" name "name" optionsradios "id =" optionsradios1 "value =" options1 "checked> options1 </label> </div> <input" "" "" "options"値= "option2">オプション2-選択の選択オプション1 </label> </div> <ラベル= "name"> inlinedチェックボタンインスタンス</label> <div> <label> <input> <input> <input> "チェックボックス" id = "inlinecheckbox1" value = "option1"> option 1 </label> <"inlinechecbbox2"> "inlinecheck2"> "inlinecheckbox2" 2 </label> <label> <入力タイプ= "チェックボックス" id = "inlinecheckbox3" value = "option3"> option 3 </label> <input> <input = "radio" name "id =" optionsradiosinline "id =" optionsradiosinline "id =" optionsradios4 "" options2 "> bow> </</</</</</</</ht </ht </ht </ht </ht </ht>
結果は次のとおりです。
チェックボックスとラジオボタン
ユーザーに複数のオプションから選択する場合は、選択ボックスを使用しますが、デフォルトで選択できるオプションは1つだけです。
<select>表示リストオプションを使用します。これは通常、状態や番号などのユーザーに馴染みのある選択リストです。
倍数= "倍数"を使用して、ユーザーが複数のオプションを選択できるようにします。
次の例は、これら2つのタイプ（選択と複数）を示しています。
<！doctype html> <html> <head> <title> bootstrapインスタンス - [ボックス] </title> <link rel = "styleSheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/boottrap.min.css"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> role = "form"> <div> <label for = "name"> select list </label> <select> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> </select> <label for = "name"> Multive-rect selection list </label> <select複数> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> </select> </div> </form> </body> </html>
結果は次のとおりです。
静的コントロール
水平形式内のフォームタグの後ろにプレーンテキストを配置する必要がある場合は、<p>でclass .form-control-staticを使用します。
<！doctype html> <html> <head> <title> bootstrapインスタンス - 静的コントロール</title> <link rel = "styleSheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/boottrap.min.css"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> role = "form"> <div> <label> email </label> <div> <p> [email protected] </p> </div> </div> <div> <label for = "inputPassword">パスワード</label> <div> <入力タイプ= "ID =" inputPassword "placeholder =" "> div div div> </div> </form </html
結果は次のとおりです。
フォームコントロールステータス
次のことに加えて、フォーカスステータス（つまり、ユーザーは入力をクリックするか、[入力に集中してタブキーを使用します）で、Bootstrapは無効な入力ボックスのスタイルを定義し、フォーム検証用のクラスを提供します。
入力フレームフォーカス
入力入力が受信されると、フォーカス、入力ボックスのアウトラインが削除され、ボックスシャドウが適用されます。
無効な入力ボックス入力
入力ボックスの入力を無効にする場合は、入力ボックスを無効にするだけでなく、マウスポインターが要素を覆うときにマウスポインターのスタイルとマウスポインターのスタイルを変更するだけでなく、無効属性を追加するだけです。
無効フィールドセットフィールドセット
無効属性を<fieldset>に追加して、<fieldset>内ですべてのコントロールを無効にします。
検証ステータス
ブートストラップには、エラー、警告、成功メッセージの検証スタイルが含まれています。適切なクラス（.has-warning、.has-error、または.has-success）を親要素に追加して、検証ステータスを使用するだけです。
<！doctype html> <html> <head> <title> bootstrapインスタンス - フォームコントロールステータス</title> <link rel = "styleSheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/boottrap.min.css"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> < src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form role = "> <div> <div> focus </label </label> <div> <入力ID =" focusedInput "" thip = "" "vallyフォーカス... "> </div> </div> <div> <div> <label for =" inputPassword "> disable </label> <div> <input id =" disabledinput "type =" text "placeholder ="この入力ボックスは入力を禁止します... type="text" id="disabledTextInput" placeholder="disabled"></div><div><label for="disabledSelect">Disable selection menu (Fieldset disabled)</label><div><select id="disabledSelect"><option>Disable selection</option></select></div></fieldset><div><label for="inputSuccess">Enter成功</label> <div> <入力タイプ= "テキスト" id = "inputsuccess"> </div> </div> <div> <label for = "inputwarning"> input警告</label> <div> <input type = "text" id = "inputwarning"> </div> </div> <div> <for = "inputer </labe < id = "inputerror"> </div> </form> </body> </html>
結果は次のとおりです。
フォームコントロールサイズ
クラス.input-lgおよび.col-lg-*を使用して、それぞれフォームの高さと幅を設定できます。次の例はこれを示しています：
<！doctype html> <html> <head> <title> bootstrapインスタンス - フォームコントロールサイズ</title> <link rel = "styleSheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/boottrap.min.css"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </scrip> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> < src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form role = "> <div> <input =" text "placeholder ="入力 "> </div> <div> <入力タイプ=" Text "PlaceHolder ="。入力-Sm "> </div> <div> </div> <div> <select> <select> <option value =" ""> value = ""> PlaceHolder = "。col-lg-4"> </div> </div> </form> </body> </html>
結果は次のとおりです。
wulin.comの編集者は、関連するトピックをお勧めします。
ブートストラップコンポーネント操作スキル
ブートストラップ関連の知識の概要
上記は、ブートストラップでサポートされるフォームコントロールです。誰もがそれを理解しています。ご不明な点がございましたら、メッセージを残してください。編集者は、すべての人に時間内に返信します。同時に、wulin.comのウェブサイトへのサポートに皆様に感謝したいと思います。