HTMLのタグと無効にする方法を詳しく解説_HTML/Xhtml_Webページ制作

定義と使用法
タグは、ユーザー情報を収集するために使用されます。
さまざまな type 属性値に応じて、入力フィールドには多くのフォームがあります。入力フィールドには、テキスト フィールド、チェックボックス、マスクされたテキスト コントロール、ラジオ ボタン、ボタンなどがあります。
HTML と XHTML の違い
HTML では、 タグには終了タグがありません。
XHTML では、 タグを正しく閉じる必要があります。
例
2 つのテキスト入力ボックスと送信ボタンを含む単純な HTML フォーム:

XML/HTML コードコンテンツをクリップボードにコピー

1. <フォーム アクション="form_action.asp" メソッド="get">
2. 名: <入力 タイプ= "テキスト" 名前="fname" />
3. 姓: <入力 タイプ= "テキスト" 名前="lname" />
4. <入力 タイプ="送信" 値="送信" />
5. フォーム>

disabled 属性は、入力要素を無効にすることを指定します。
無効になった入力要素は使用できず、クリックすることもできません。無効な属性は、他の条件 (チェックボックスが選択されているなど) が満たされるまで設定できます。次に、JavaScript を使用して無効な値を削除し、入力要素の値を使用可能な値に切り替える必要があります。

次の 3 つの書き込み方法は入力を無効にすることができます

XML/HTML コードコンテンツをクリップボードにコピー

1. <入力 タイプ="テキスト" 無効=「無効」 値=「無効」 />
2. <入力 type="テキスト" 無効=「無効」 値=「無効」 />
3. <入力 type="テキスト" 無効=「無効」 値=「無効」 />

無効な入力はデフォルトでグレーになり、CSS を通じてスタイルを設定できます。注: IE9 以下ではフォントの色を変更できません
1. CSS3 :disabled 擬似要素定義を使用します

CSS コードコンテンツをクリップボードにコピーします

1. //Chrome Firefox Opera Safari
2. 入力:無効{
3. ボーダー: 1px ソリッド #DDD;
4. 背景色: #F5F5F5;
色
5. :#ACA899; }
6. 2. 属性セレクターを使用して

を定義します。

CSS コード

コンテンツをクリップボードにコピーします

//IE6 が失敗しました

1. 入力[無効]{
2. ボーダー
:
3. 1px ソリッド #DDD; 背景色:
#F5F5F5
4. ; 色:#ACA899
;
5. } 3. クラスを使用して、入力を無効にするクラスを定義および追加します
6. CSS コード
コンテンツをクリップボードにコピーします

1. input.disabled{
2. ボーダー: 1px ソリッド #DDD;
3. 背景色: #F5F5F5;
色
4. :#ACA899; }
5. 最終結果:

CSS コード

コンテンツをクリップボードにコピーします

//Chrome Firefox Opera Safari IE9

1. 入力:無効{
2. ボーダー
:
3. 1px ソリッド #DDD; 背景色:
#F5F5F5
4. ; 色:#ACA899
;
5. } //IE8- 入力[無効]{
ボーダー
7. :
1px
ソリッド
9. #DDD; 背景色: #F5F5F5;
色
10. :#ACA899; }
//IE6 Javascript を使用して CSS クラスを追加します
11. "disabled" * html input.disabled{
12. ボーダー
:
13. 1px ソリッド
14. #DDD
;
15. 背景色: #F5F5F5; 色:#ACA899
;
16. } 注: IE8 のバグIE8 は :disabled を認識しないため、input[disabled] スタイルと input:disabled スタイルは無効になります。これらを個別に記述するか、input[disabled] を直接使用することを検討してください。 ; IE9以下では文字色の変更はできません。
デモ