HTML マークアップ言語 - フォーム

<form action="/path/to/script" method="post">
<テーブル>
<tr>
<th>名前:</th>
<td><input type="text" name="名前" /></td>
</tr>
<tr>
<th>メールアドレス:</th>
<td><input type="text" name="メール" /></td>
</tr>
<tr>
<th>&nbsp;</th>
<td><input type="submit" value="submit" /></td>
</tr>
</テーブル>
</フォーム>

方法B: テーブルは必要なく、ただ押し合うだけ

<form action="/path/to/script" method="post">
<p>
名前: <input type="text" name="name" /><br />
メールアドレス: <input type="text" name="email" /><br />
<input type="submit" value="submit" />
</p>
</フォーム>

1 つの段落と複数の <br /> タグを使用してすべての要素を区切るのは実行可能な方法ですが、見た目が少し混雑する可能性があります。図 5-2 は、ブラウザーの 11 番目のバージョンでの効果を示しています。

図 5-2: ブラウザに方法 B の効果が表示されます。テーブルなしでレイアウトを完成させることはできますが、少し混雑して見栄えが悪くなります。同時に、フォーム要素を完全に揃えることができないという問題も発生します。
CSS を使用して <input> 要素に外側のパッチを追加し、混雑感を軽減できます。次のようになります。

入力{
マージン:6px 0;
}

前のセクションでは、各 <input> 要素 (名前、メール アドレスの入力ボックス、送信ボタンを含む) の上部と下部に 6 ピクセルの外側のパッチを追加し、要素間に余分なスペースを追加しました。図 5-3 のようになります。

図 5-3. 入力要素に外部パッチを追加した後のメソッド B。メソッド B 自体は問題ありませんが、微調整することでフォームをより良くすることができます。メソッド C でもこれらの微調整テクニックが使用されているので、見てみましょう。

方法C: シンプルで使いやすい

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">名前:</label><br />
<input type="text" id="name" name="名前" /></p>
<p><label for="email">メールアドレス:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</フォーム>

方法 C には、いくつか気に入っている点があります。まず、このような単純なフォームでは、各説明とフォーム要素をそれぞれ独自の段落に配置するのが便利だと思います。段落間の事前設定された距離は、スタイル設定なしで表示したときにコンテンツを読みやすくするのに十分です。また、後で CSS を使用して、フォーム内に含まれる <p> タグの間隔を設定します。
さらに一歩進んで、フォームに固有の id="thisform" を与えました。つまり、先ほど述べた正確な間隔は、おおよそ次のように記述できます。

#thisform p{
マージン:6px 0;
}

これは、このフォーム内の <p> タグの上部と下部のパディングを 6 ピクセルに設定し、通常の段落のブラウザのデフォルトを上書きすることを意味します。
方法 C と前の 2 つの方法のもう 1 つの違いは、各グループ (説明と入力ボックス) が <p> 内に配置されているにもかかわらず、<br /> を使用して別の行に配置することです。<br /> を使用して各要素を区切ると、テキストの長さが異なるために入力項目が完全に揃わないという問題を回避できます。
図 5-4 は、<p> タグに以前に設定したスタイルを使用して、一般的なブラウザで方法 C の効果を示しています。

図5-4. ブラウザはPタグにCSSを使用した方法Cの効果を表示します
方法 C の視覚的な効果に加えて、最も重要な利点は使いやすさの向上です。

<label> タグ <label> タグを使用してフォームの使いやすさを向上させるには 2 つの手順が必要ですが、方法 C では両方の手順が完了しています。1 つ目は、<label> タグを使用して、テキストの説明を、テキスト フィールド、テキスト領域、ラジオ ボタン、チェック ボックスなどの関連するフォーム要素に接続することです。方法 C では、"Name:" および "Email:" タイトルの <label> タグを使用して、それらをデータ入力要素に接続します。
2 番目のステップは、<label> タグに for 属性を追加し、対応する入力ボックスの ID を入力することです。
たとえば、方法 C では、「Name:」を <label> タグで囲み、その背後にある入力ボックス ID と同じ値を for 属性に入力します。

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">名前:</label> <br />
<input type="text" id="name" name="名前" /></p>
<p><label for="email">メールアドレス:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</フォーム>

<label> を使用する理由は何ですか?
フォーム内で <label> タグを使用する必要があるという意見を聞いたことがあるかもしれません。最も重要な質問は、なぜ<label> タグを使用する必要があるのか​​ということです。
ラベル/ID の関連付けを確立すると、レイアウト方法に関係なく、スクリーン リーダーが各フォーム要素の正しいラベルを読み取ることができるようになり、これは良いことです。同時に、<label> タグはフォーム フィールド ラベルをマークするように設計されています。このタグを使用すると、各要素の意味を説明し、フォームの構造を強化しています。
単一選択ボックスおよび複数選択ボックスを扱うときに <label> タグを使用することのもう 1 つの利点は、ユーザーが <label> 内のテキストをクリックすると、ほとんどのブラウザーで要素の値も変更されることです。これにより、入力要素のクリック可能な領域が大きくなり、運動能力が制限されているユーザーがフォームに入力しやすくなります (Mark Pilgrim、「Dive Into Accessibility」、 http://diveintoaccessibility.org/day_28_labeling_form_elements.html )。
たとえば、ユーザーが「この情報を書き留める」ことを選択できるように、フォームに複数選択ボックスを追加する場合、次のように <label> タグを使用できます。

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">名前:</label><br />
<input type="text" id="name" name="名前" /></p>
<p><label for="email">メールアドレス:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="checkbox" id="remember" name="remember" />
<label for="remember">この情報を覚えていますか?</label></p>
<p><input type="submit" value="submit" /></p>
</フォーム>

このようにチェックボックスをマークすると、スクリーン リーダーが正しい説明テキストを読み上げる (この例のように、テキストが入力ボックスの後に表示される場合でも機能します) ことと、チェックボックスの切り替え範囲が拡大され、チェックボックス自体に加えてテキストも含まれるようになる (ほとんどのブラウザーでサポートされています) という 2 つの利点があります。
図 5-5 は、このフォームがブラウザでどのように表示されるかを示しています。複数選択ボックスの拡大範囲を具体的にマークします。

図 5-5. トグル範囲にテキストを含むチェックボックス。フォームと段落に加えて、定義リストを使用してフォームをマークアップする別の方法も示します。

前のページ1 2 3 4 次のページ 全文を読む