16

同じフォームの例で2つの異なる方法を見ました：

http://www.alistapart.com/articles/prettyaccessibleforms/で、なぜ最初に2つの方法を使用しているのか、2番目fieldsetに2つinputの方法を使用しているのか。なんで？labelfieldsetinputlabel

<fieldset>
  <legend>Delivery Details</legend>
  <ol>
    <li>
      <label for="name">Name<em>*</em></label>
      <input id="name" />
    </li>
    <li>
      <label for="address1">Address<em>*</em></label>
      <input id="address1" />
    </li>
    <li>
      <label for="address2">Address 2</label>
      <input id="address2" />
    </li>
    <li>
      <label for="town-city">Town/City</label>
      <input id="town-city" />
    </li>
    <li>
      <label for="county">County<em>*</em></label>
      <input id="county" />
    </li>
    <li>
      <label for="postcode">Postcode<em>*</em></label>
      <input id="postcode" />
    </li>
    <li>
      <fieldset>
        <legend>Is this address also your invoice »
address?<em>*</em></legend>
        <label><input type="radio" »
name="invoice-address" /> Yes</label>
        <label><input type="radio" »
name="invoice-address" /> No</label>
      </fieldset>
    </li>
  </ol>
</fieldset>

inputなぜ彼らはいつか後を守りlabel、いつか中にいるのですか？

アップデート：

ここhttp://www.usability.com.au/resources/forms.cfm彼らはまた内部にいないinput後に保持していますlabel

4

4 に答える 4

15

これは仕様に準拠しておりid、最新のすべてのブラウザーで機能します（ただし、IE6では機能しません。ラベルをクリックしても、とを含めない限り、入力コントロールにフォーカスが設定されませんfor）。

  <label>
      Name: <input type="textbox" name="firstName" />
  </label>

「理由」について-では<fieldset>、ラジオボタンがラベルに配置されているため、ラベルとそのラジオボタンの間にクリックできないギャップがありません。

于 2010-05-24T07:14:42.693 に答える
6

入力をラベル内に配置すると、2 つが関連付けられます。これはアクセシビリティにとって重要です (たとえば、ページを見てラベルと入力の関係を理解できない人のためのスクリーン リーダー)。for別の方法は、label タグで属性を使用することです。

于 2010-05-24T07:22:56.353 に答える
6

今日、私はここで答えを見つけました。http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html

HTML および XHTML 仕様では、暗黙的なラベルと明示的なラベルの両方が許可されています。ただし、一部の支援技術は、暗黙的なラベル ( First name など) を正しく処理しません。たとえば<label>First name <input type="text" name="firstname"></label>)。

明示的であることが進むべき道であり、より多くのスタイル オプションを提供してくれます。

于 2010-05-30T02:39:41.023 に答える
0

一般的には、入力コントロール サーフェスの拡張を目的として行われます。ラジオ ボタンまたはチェックボックスがある場合、内部にあるすべてのものが<label for="given_control"></label>制御されます。

わかりました、もう一度: コントロール サーフェスが灰色で表示されます (CSS が無効になっていない場合)。コントロールをコントロールの両側のクリックに反応させたい場合は、片側で十分な場合<input>は label タグで囲みます。<label...>クリックを感知するコントロールの<label>前または後にタグを配置します<input>。次の例では、最初の 2 つのコントロールはコントロールの両側 (左側の空白を含む) のクリックに反応し、3 番目のコントロールは左側のみに反応します。

この例を確認してください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Visual Label example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
 .control
 { 
   background-color:#ddd
 }
</style>
</head>
<body>
<form action="" method="post" name="f1">
<label class="control" for="id_1">1. 
<input checked="checked" name="check" id="id_1" value="1" type="checkbox">One
</label>
<br />
<label class="control" for="id_2">2. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="check" id="id_2" value="2" type="checkbox">Two
</label>
<br />
<label class="control" for="id_3">3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input name="check" id="id_3" value="3" type="checkbox">Three
</form>
</body>
</html>
于 2010-05-24T08:07:32.190 に答える