Webページ用の5つの簡単なXHTML Webフォーム

WebデザインのシンプルなXHTML Webフォーム5。テクノロジー1：ラベルサンドイッチ

[入力]ボックス、選択ボックス、テキストボックスをラベル要素に含め、すべてをブロックレベルの要素として設定します。ラジオボタンとマルチチェックディスプレイをインラインに設定して、同じラインでの外観を容易にします。ラベルボタンとラジオボタン/マルチチェックボックスが異なるラインに表示される場合は、ラベルに含めないか、ハードラインラッピングを使用しないことを選択できます。

各状況を以下に示します。

これらがよりスタイリッシュに見えると、W3Cは実際にラベルの例を暗黙的に示しています。

コード：

ラベル、入力、select、textarea {display：block;} label {margin-bottom：10px;} input [type = radio]、input [type = checkbox] {display：inline：inline;} <form> <fieldset> <legent> contact form </leavers> <label for = name> name> name> label> <input id = name = extim = email> <メール> < /> <label for = choices> choices（radio） - <em> wrapped label < /em> < /label> <入力名=選択タイプ=ラジオ /> chicea name = choice type = radio /> choice 2 <入力名=選択タイプ=ラジオ />選択=ラベルスタイル=マージンボトム：0pt; for = choices2> choices（checkbox） - <em> non-wrappedラベル、マージンリセット< /em> < /label> <input name = choice 2 type =チェックボックス /> chice = choice = choice2タイプ=チェックボックス=チェック= chocite = choice = choice = choice = choice 3 <div style = height = height：10px;> <！ <em> lapped、hard-line-break </em> </label> <input name = choice3 type = checkbox/> choice 1 <input name = choice name = checkbox/> choice 2 <input3 <input3 type = chockbox/> choice 3 <label for = dropdown>質問</label> <選択ID =ドロップダウン> <オプションオプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション3 </option> </select> <label for = message> message <textarea cols = 36 rows = 12 name = message> </textarea> </label> <入力タイプ=送信値=送信/> </fieldset> </form>

＃Expamle1ラベル、＃Expamle1入力、＃expamle1 select、＃expamle1 textarea {display：block;}

＃Expamle1ラベル{マージンボトム：10px;}

＃Expamle1 input [type = "Radio"]、＃Expamle1 input [type = "Checkbox"] {display：inline;}

テクノロジー2：怠zy

多くの開発者は、この非正統的であるが迅速かつ簡単な方法（ラインブレイクパーティションでマークされている）を採用しています。実行することはできますが、CSSを実装する必要がないため、CSS機能に有害です。

コード：

<form> <fieldset> <legend>連絡先フォーム< /legent> name> name> name> label> <input id = name name = name size = 20 /> <label for = email> < /label> <入力id = email name = 20 /> <label = choices> choices> choices（radio）< /label> <input name /> chiceタイプ=選択タイプ=選択タイプ=選択タイプ=選択タイプ=選択for = choices3> choices（チェックボックス）</label> <input name = choice3タイプ=チェックボックス/> choice 1 <入力名= choice3タイプ=チェックボックス/> choice名2 <入力名=選択3 <ラベル3 <ラベル=ラベル> label> <選択ID =ドロップダウン> <オプションラベル=オプションオプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション>オプション3 </option> </select> <ラベル=メッセージ>メッセージ>メッセージ</label> <textarea cols = 36 rows = 12 name = message> </textarea> <入力タイプ=送信値= send it/> </fieldset> </form>