Web デザイン用の 5 つのシンプルな XHTML Web フォーム_HTML/Xhtml_Web ページ制作

Web Design 5 の単純な XHTML Web フォーム。                   ​ テクニック 1: ラベルサンドイッチ 入力ボックス、選択ボックス、テキスト ボックスをラベル要素に組み込み、それらをすべてブロック レベルの要素として設定します。ラジオボタンとチェックボックスの表示モードをインラインに設定し、同じ行に表示されるようにします。ラベル
をご希望の場合は ​                   Web デザインにおける 5 つのシンプルな XHTML Web フォーム。                   ​ テクニック 1: ラベルサンドイッチ
すべての入力ボックス、選択ボックス、テキスト ボックスをラベル要素に組み込み、それらをすべてブロックレベル要素として設定します。ラジオボタンとチェックボックスの表示モードをインラインに設定し、同じ行に表示されるようにします。ラベルとラジオ ボタン/複数選択ボックスを別の行に表示したい場合は、ラベルにラベルを含めないか、ハード改行を使用するかを選択できます。
各シナリオを以下に説明します。

これらは流行っているように見えるかもしれませんが、W3C は実際にラベルの例を暗黙的に示しています。
主な利点: シンプル
コード:
label、input、select、textarea {display: block;} ラベル {margin-bottom: 10px;} input[type="radio"]、input[type="checkbox"] {表示: インライン;} フィールドセット>

お問い合わせフォーム

名前ラベル> メール Choices (ラジオ) — ラップされたラベル 選択肢 1 選択肢 2 選択肢 3 選択肢 (チェックボックス) - 非ラップラベル、マージンリセット 選択肢 1 選択肢 2 選択肢 3

選択肢 (チェックボックス) - ラップ、ハード改行 選択肢 1 選択肢 2 選択肢 3 質問 オプション 1オプション>オプション 2オプション> ;オプション 3 メッセージ ラベル> フィールドセット>
実行結果:
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 label {margin- Bottom: 10px;}
#expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;}
テクノロジー 2: 怠け者
多くの開発者がこれを採用型破りですが手早く簡単な方法 (タグを改行で区切る) が使用されます。これは機能しますが、実装するために CSS が必要ないため、CSS 機能に悪影響を及ぼします。
主な利点: 高速
コード:

お問い合わせフォーム

名前 メール 選択肢 (ラジオ) 選択肢 1 選択肢 2 選択肢 3 選択肢 (チェックボックス) 選択肢 1 選択肢 2 選択肢 3 質問 オプション 1 オプション 2 オプション 3 選択> メッセージ フィールドセット>
运行結果：                                                #p#
                       ネットワーク設定の 5 の単一の XHTML ネットワーク テーブル。             テクニック 3: 教師
ウェブ標準のメッセージの 1 つは、データの種類とそれに対応するコードを考慮することです。 >主好处：
结构化代码：ol { リストスタイル: なし; パディング左: 0; }

お問い合わせフォーム

1. ; 名前
2. ; メール
3. ; 選択肢 (ラジオ) 選択肢 1 選択肢 2 選択肢 3
4. ; 選択肢 (チェックボックス) 選択肢 1 選択肢 2 選択肢 3
5. ; 質問 オプション 1 オプション 2 オプション 3
6. ; メッセージ
7. ; gt;

フィールドセット>

运行結果：
#example3 ol {list-style: none;
padding-left: 0;
}
技术4：分而治之
横型フォームを使用する場合、どのようなフォームが必要ですか?多くの状況 (クライアント) では、横型のフォームが必要になります。旧友の p に頼って、フォームを列に分割するだけです。ラベルサンドイッチ法を使用すると、これを簡単に実現できます。
主な利点: スペース使用率
コード:
label、input、select、textarea {display: block;} ラベル {margin-bottom: 10px;} input[type="radio"]、input[type="checkbox"] {表示: インライン;} .form-column { 幅: 150ピクセル; 高さ: 250ピクセル; パディング左: 20px; ボーダー左: 1px ソリッド #ccc; フロート: 左; } フィールドセット>

お問い合わせフォーム

名前ラベル> メール 選択肢 (ラジオ) 選択肢 1 選択肢 2 選択肢 3

選択肢 (ラジオ) 選択肢 1 選択肢 2 選択肢 3 選択肢 (チェックボックス) 選択肢 1 選択肢 2 選択肢 3 質問

オプション 1オプション>オプション 2オプション> ;オプション 3 gt; フィールドセット>
実行結果:
#Example4 label, #Example4 input, #Example4 select, #Example4 textarea {display: block;}
#Example4 label {margin-一番下: 10px;}
#Example4 input[type="radio"], #Example4 input[type="checkbox"] {display: inline;}
#Example4 .form-column {
width: 150px;
height: 250px;
padding-left: 20px;
border-left: 1px Solid #ccc;
float: left;
}
テクノロジー 5: 古いものと同様学者 怠け者
CSS をいじりたくない、急いでいる、ブラウザのテストをするつもりがないのであれば、新しい仕事を見つけたほうがいいでしょう。冗談です、これはあなたのためのものです。
主な利点: 直感的
コード:

お問い合わせフォーム

名前 メール 選択肢 (ラジオ) 選択肢 1 選択肢 2 選択肢 3 選択肢 (チェックボックス) 選択肢 1 選択肢 2 選択肢 3 質問 オプション 1 オプション 2 オプション 3 メッセージ gt; フィールドセット>
运行結果：