この記事では、次のトピックについて説明します。
前提条件: フォームを作成する
まず、HTMLを活用してフォームを作成する「 <フォーム> ' エレメント：
< 形 >< / 形 >
次に、「 <フィールドセット> ” 要素にクラスを割り当てます “ col-12 」。
< フィールドセット クラス = 「col-md-12」 >
< 伝説 >学生登録フォーム< / 伝説 >
< / フィールドセット >
出力
テキスト入力フィールドを無効にする方法は?
進行中の例については、指定された指示に従います。
- 「の中に <フィールドセット> ” 要素の凡例要素の後に タグを追加し、クラスを割り当てます “ フォームグループ 」。
- 次に、「 <ラベル> ' と ' <入力> 」要素をそれぞれキャプション フィールドと入力フィールドに使用します。入力要素にクラスを割り当てます “ フォームコントロール 」。
- その後、「 無効 」属性を使用して、入力フィールドを無効にします。
< 分周 クラス = 「フォームグループ」 >
< ラベル >あなたの 名前
< 入力 タイプ = '文章' クラス = 「フォームコントロール」 無効>
< / ラベル >
< / 分周 >以下は、上記のクラスの説明です。
- 「 フォームグループ 」は、フォームに構造を含める最も簡単な方法を提供する柔軟なクラスです。
- 「 フォームコントロール 」は、フォーム要素にスタイルを自動的に追加します。
出力
「」のない別の入力フィールドを追加します 無効 ' 属性：
< 分周 クラス = 「フォームグループ」 >
< ラベル >あなたの父を入力してください 名前
< 入力 タイプ = '文章' クラス = 「フォームコントロール」 >
< / ラベル >
< / 分周 >最初の入力フィールドが無効になり、2 番目の入力フィールドが有効になっていることがわかります。
選択ボックスオプションを無効にする方法は?
フォームに選択ボックスを作成するには、HTML「 <選択> ' エレメント。 「 <オプション> 」要素が追加され、ボックス項目を選択します。
この例では、「 無効 ' 属性：
< 分周 クラス = 「フォームグループ」 >
< ラベル > 無効 セレクトボックス
< 選択する クラス = 「フォームコントロール」 >
< オプション >選択< / オプション >
< オプション 無効> 無効 選択< / オプション >
< オプション >メニュー< / オプション >
< / 選択する >
< / ラベル >
< / 分周 >出力
チェックボックス入力要素を無効にする方法は?
別のフォーム コントロール チェックボックスを作成しましょう。チェックボックスを無効にするには、「 無効 」属性は次のように指定されます。
< 分周 クラス = 「フォームチェック」 >
< ラベル クラス = 「フォームチェックラベル」 >
< 入力 クラス = 「フォームチェック入力」 タイプ = 「チェックボックス」 無効>
あなたはできる これをチェックしないでください
出力
ボタン入力要素を無効にする方法は?
フォーム送信用の HTML ボタン要素を追加することもできます。それでは、「 無効 ' クラス：
< ボタン タイプ = '参加する' クラス = 「 btn btn-primary btn-lg 無効」 >提出する< / ボタン >出力
以上で、Bootstrap で入力フィールドを無効にすることができました。
結論
Bootstrap では、「 無効 」属性またはクラス。属性は、要素の開始タグ内に配置されます。一方、「 無効 ” クラスは “ 内に配置されます クラス ' 属性。この記事では、Bootstrap でフォーム コントロールを無効にする方法を示す例を提供しました。