Should we put <input> inside

2019-02-06 18:42发布

站内问答 / HTML/CSS
1872 4 4

This question already has an answer here:

I saw 2 different method on same form example:

on http://www.alistapart.com/articles/prettyaccessibleforms/ why they are using 2 method in first fieldset they are keeping input after labeland in 2nd fieldset they are keeping input after label. Why?

<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>

why they are sometime keeping input after label and sometime inside?

Update:

here http://www.usability.com.au/resources/forms.cfm they are also keeping input after label not inside

4条回答
Melony?
2楼-- · 2019-02-06 19:34

Today I found answer here. http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, First name ). For example <label>First name <input type="text" name="firstname"></label>).

So explicit is the way to go and it's also give us more style option.

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
3楼-- · 2019-02-06 19:39

This is according to the specs, and works in all modern browsers (but not in IE6 - clicking the label will not set focus to the input control, unless you include an id and for):

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

As for "why" - In the <fieldset>, the radio buttons were put in the labels so there won't be an unclickable gap between the label and its radio button.

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
4楼-- · 2019-02-06 19:39

Putting the input inside the label associates the two. This is important for accessibility (e.g. screen readers for people who can't see the relationship between the label and the input by looking at the page). An alternative is to use the for attribute in the label tag.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
5楼-- · 2019-02-06 19:40

Generally it's done for the purpose of extension of the input control surface. When there is a radio button or a checkbox, everything that is inside <label for="given_control"></label> engages control.

Ok, one more time: Now control surfaces are seen in grey (If Your CSS is not disabled).If You want control to be sensitive to the clicks on the both sides of control, enclose <input> between label tags <label...>, if its enough for one side of the control to be sensitive to the click, put <label> tags either before or after <input>. On the following example: First 2 controls are sensitive to the clicks on the both sides (including whitespace on the left) of the control, the third one - just for the left side.

Check this example:

<!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:#ffffd
 }
</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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)