wulin.com HTMLチュートリアル列に戻るには、ここをクリックしてください。
上：マークアップ言語 - 引用
元のソース第5章フォーム
相互作用は常にインターネットの焦点であり、ユーザーは情報を交換して相互に通信できるようにします。フォームにより、ユーザーから情報を整理して同じ方法で収集できるようにするため、Webサイトを設計するときは、あらゆる状況で使用できるカテゴリに常に属します。たとえば、フォームをマークする方法は約10,000の異なる方法があることがわかりました。まあ、それほど多くはないかもしれませんが、私たちはまだいくつかの状況について考えることができ、ユーザーがフォーム構造を簡単に使用し、ウェブサイトの所有者による管理を促進することもできます。フォームをマークする方法A：フォームを使用します
<form action =/path/to/script method = post>
<表>
<tr>
<th>名前：</th>
<td> <入力タイプ=テキスト名= name /> < /td>
</tr>
<tr>
<th>メール：</th>
<td> <入力タイプ=テキスト名=電子メール /> < /td>
</tr>
<tr>
<th>＆nbsp; </th>
<td> <入力タイプ=送信値= submit /> < /td>
</tr>
</table>
</form>
多くの人々は、テーブルで長い間マークされたフォームを持っています。使用頻度が高いため、このようにフォームがタイプするのを見ることに慣れています。左列は右に整列したテキストの説明であり、右の列は左沿いのフォーム要素です。単純な2リストフォームを使用することは、使いやすいフォームタイプセットを完了する簡単な方法の1つです。
フォームは必要ないと考える人もいれば、フォームをフォーム素材と見なすべきだと考える人もいます。どちらのステートメントもサポートするつもりはありませんが、場合によっては、フォーム、特に多くの異なる要素（ラジオボックス、ドロップダウンボックスなどを使用するフォーム）を持つ複雑なフォームを使用するときに特定のフォームレイアウトを実現する最良の方法です。このようなフォームを処理するためにCSSに完全に依存することはイライラする可能性があり、多くの場合、テーブルよりも多くのタグを消費するために追加の<Span>および<div>が必要です。
次に、図5-1をご覧ください。これは、一般的なビジュアルブラウザディスプレイメソッドの効果です。
図5-1：ブラウザに表示される方法Aの効果
テーブルを使用すると、テキスト要素を非常にきちんとした方法で配置できることがわかります。ただし、このような単純なフォームの場合、テーブルの使用を避け、それほど多くのラベルを必要としない他の方法を使用する場合があります。フォームの視覚設計にそのような型版画が必要な場合を除き、フォームは必要ない場合があります。同時に、いくつかの使いやすさも考慮する必要があります。次の2つの方法を研究するとき、私たちはこの部分と接触します。
<form action =/path/to/script method = post>
<p>
名前：<入力タイプ=テキストname = name /> <br />
電子メール：<入力タイプ=テキスト名=電子メール /> <br />
<入力タイプ=送信値= submit />
</p>
</form>
単一の段落といくつかの<BR />タグを使用することは、すべての要素を分離するための実行可能な方法ですが、視覚的に少し絞られている可能性があります。図5-2ブラウザの11番目のバージョンの表示効果：
図5-2：ブラウザ表示方法の効果b
テーブルを使用せずにレイアウトを完了することはできますが、少し混雑していて醜いように見えます。同時に、形成要素を完全に整合させることができないという問題にも遭遇しました。
CSSを使用して<inupt>要素に追加のパッチを追加して、混雑感を和らげることができました。このような：
入力{
マージン：6px 0;
}
前の段落では、各<inupt>要素の上部と下部（名前、電子メール入力ボックス、および送信ボタンを含む）に6ピクセルの追加パッチを追加し、要素間に追加のスペースを追加します。図5-3のように：
図5-3。入力要素に追加のパッチを追加した後の方法Bの効果
方法B自体には大きな問題はありませんが、フォームを改善するために微調整することもできます。方法Cはこれらの微調整技術も使用しているため、見てみましょう。
<form action =/path/to/script id = thisform method = post>
<p> <ラベル= name> name：< /label> <br />
<入力タイプ=テキストID = name name = name /> < /p>
<p> <for = email>電子メールのラベル：< /label> <br />
<入力タイプ=テキストID =電子メール名=電子メール /> < /p>
<p> <入力タイプ=送信値= submit /> < /p>
</form>
私は方法Cのいくつかのことが好きです。最初に、この例に似た単純なフォームについては、各説明とフォーム要素を別の段落に配置する方が便利であることがわかりました。スタイルディスプレイを追加せずに、パラグラフ間のプリセット距離は、コンテンツを簡単に読み取るのに十分です。その後、CSSを使用してフォームに含まれる<p>タグとして間隔を設定できます。
さらに一歩進んで、フォームに一意のID = thisFormを設定しました。したがって、私が今述べた正確な間隔は、このように大まかに書くことができます。
＃thisform p {
マージン：6px 0;
}
これは、この形式の<P>タグの上部、下、外側のパッチを6ピクセルに設定し、一般的な段落のブラウザによって選択されたプリセット値をカバーすることを意味します。
方法Cと最初の2つの方法のもう1つの違いは、各グループ（命令と入力ボックス）が<p>に配置されているが、それらを独立したラインに配置することです。 <br />を使用して各要素を分離すると、異なるテキストの長さの問題をバイパスして、入力アイテムを完全に整列できなくなります。
図5-4は、一般的なブラウザディスプレイメソッドCの効果を示しています。ここでは、<P>タグに設定されたスタイルが使用されていました。
図5-4。ブラウザディスプレイメソッドcの効果、PタグにCSSを使用して
メソッドCの視覚効果に加えて、最も重要な利点は、使いやすさを改善することです。
<label>タグを使用してフォームの使いやすさを改善するには、2つのステップが必要であり、メソッドCはこれら2つのステップを完了しました。まず、<label>を使用して、テキスト入力ボックス（テキストフィールド）、テキストブロック入力ボックス（テキストエリア）、ラジオボックス（ラジオ）、チェックボックス（チェックボックス）など、関連するフォーム要素にテキストの説明を接続します。メソッドCは、名前の<ラベル>タグを使用します。
2番目のステップは、<label>タグに属性を追加し、対応する入力ボックスのIDに入力することです。
たとえば、方法Cでは、<label>タグを使用して名前をラップし、その後の入力ボックスIDと同じ値で属性を入力します。
<form action =/path/to/script id = thisform method = post>
<p> <ラベル= name> name：< /label> <br />
<入力タイプ=テキストID = name name = name /> < /p>
<p> <for = email>電子メールのラベル：< /label> <br />
<入力タイプ=テキストID =電子メール名=電子メール /> < /p>
<p> <入力タイプ=送信値= submit /> < /p>
</form>
たぶん、他の人がフォームに<label>タグを追加する必要があると言うのを聞いたことがあるかもしれません。最も重要な質問は、<label>タグを使用する理由です。
レイアウト配置の影響なしに、スクリーンリーダーが各フォーム要素の正しいラベルを読むことができるラベル/IDアソシエーションを確立することは良いことです。同時に、<label>タグが作成され、フォームバーラベルをマークします。このタグを使用するとき、各要素の意味を説明し、フォームの構造を強化しています。
シングルチェックボックスとマルチチェックボックスを処理するときに<label>タグを使用することには追加の利点があります。つまり、ほとんどのブラウザーは、ユーザーが<label>のテキストをクリックすると、要素の値も変更されます。これにより、入力要素のより大きなクリック領域を作成することができ、モビリティインコンニエントを持つユーザーがフォームに記入しやすくなります（マークピルグリム、アクセシビリティに飛び込み、http：//diveintoaccesibility.org/day_28_labeling_form_elements.html）。
たとえば、ユーザーがこの情報を書き留めることを選択できるようにマルチチェックボックスをフォームに追加する場合、次のような<label>タグを使用できます。
<form action =/path/to/script id = thisform method = post>
<p> <ラベル= name> name：< /label> <br />
<入力タイプ=テキストID = name name = name /> < /p>
<p> <for = email>電子メールのラベル：< /label> <br />
<入力タイプ=テキストID =電子メール名=電子メール /> < /p>
<p> <入力タイプ=チェックボックスID = remember name = remember /> <ラベル=覚えている>この情報を覚えていますか？</label> </p><p> <入力タイプ=送信値= submit /> < /p>
</form>
このようにマルチチェックボックスをマークすることにより、2つの利点を取得できます。スクリーンリーダーは正しい説明テキストを読むことができます（この例と同じように、テキストは入力ボックスの後に表示できます）。これで、マルチチェックボックス自体に加えて、テキスト部分も含まれています（ほとんどのブラウザはそれをサポートしています）。
図5-5は、ブラウザ内のこのフォームの表示効果を示しています。拡大後のマルチチェックボックスの切り替え範囲を具体的に示します。
図5-5。スイッチング範囲のテキストを含む複数の選択ボックス
フォームと段落に加えて、定義リストを使用してフォームをマークする別の方法を示したいと思います。
前のページ1 2 3 4次のページ全文を読む