Should I put input tags inside a label tag?

I was just wondering if there is a best practice concerning label and input tag :

classic way:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

or

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

---

从W3开始：标签本身可以位于相关控件之前，之后或周围。

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

---

I prefer

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

over

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

Mainly because it makes the HTML more readable. And I actually think my first example is easier to style with CSS, as CSS works very well with nested elements.

But it's a matter of taste I suppose.

---

If you need more styling options, add a span tag.

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Code still looks better in my opinion.

---

If you include the input tag in the label tag, you don't need to use the 'for' attribute.

That said, I don't like to include the input tag in my labels because I think they're separate, not containing, entities.

链接地址: http://www.djcxy.com/p/71520.html

上一篇: 将脚本放在底部

下一篇: 我应该将输入标签放在标签标签内吗？