フォームを作成するとき、フォーム検証を行うことは避けられません。また、検証ステータススタイルを提供する必要があり、これらの効果はBootstrapフレームワークでも提供されています。
1.Has Warning：警告ステータス（黄色）
2。.has-error：エラーステータス（赤）
3。.has-success：成功ステータス（緑）
それを使用する場合、フォームグループコンテナに対応するステータスクラス名を追加する必要があります。
<form role="form"><div><label for="inputSuccess1">Success Status</label><input type="text" id="inputSuccess1" placeholder="success status"></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="warning status"></div><div><label for = "inputerror1">エラーステータス</label> <入力タイプ= "text" id = "interror1" placeholder = "エラーステータス"> </div> </form>
実行効果は次のとおりです。または、右側の結果ウィンドウを表示します。
多くの場合、フォームを検証すると、異なる状態がチェックサイン（√）、エラーがクロスサイン（×）などであるなど、異なるアイコンを提供します。この効果はブートストラップボックスにも提供されます。対応する状態にフォームを表示したい場合は、対応する状態にクラス名「Has-Feedback」を追加するだけです。そのような名前は、「has-error」、「has warning」、「has success」にあることに注意してください。
<form role = "form"> <div> <label for = "inputsuccess1">成功ステータス</label> <入力タイプ= "text" id "inputsuccess1" placeholder = "success status"> <span> </span> </div> <div> <div>ステータス "> <span> </span> </div> <div> <div> <label for =" inputerror1 ">エラーステータス</label> <入力タイプ=" text "id" inputerror1 "placeholder =" error status "> <span> </div> </form>
実行効果は次のとおりです。または、右側の結果ウィンドウを表示します。
レンダリングからわかるように、アイコンは右側にあります。ブートストラップの小さなアイコンはすべて @font-faceを使用して作成されます（次のコンテンツでセクションが導入されます）。そして、フォームにスパン要素を追加する必要があります。
<span> </span>
上記は、編集者が紹介したブートストラップのフォームコントロールステータス（検証ステータス）です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！