我应该将输入元素放在标签元素中吗?

From w3 :

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

或

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

或

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

我更喜欢

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

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

结束

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

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

主要是因为它使HTML更具可读性。实际上,我认为我的第一个示例更容易使用CSS进行样式设置,因为CSS可以很好地处理嵌套元素。

但我想这是品味的问题。

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

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

在我看来,代码仍然看起来更好。

如果你点击空格 之间

这是有意义的,因为在这种情况下,空格只是标签的另一个字符。

div {
  border: 1px solid black;
}
label {
  border: 1px solid black;
  padding: 5px;
}
input {
  margin-right: 30px;
}

<p>Inside:</p>
<label>
  <input type="checkbox" />
  Label. Click between me and the checkbox.
</label>

<p>Outside:</p>
<input type="checkbox" id="check" />
<label for="check">Label. Click between me and the checkbox.</label>

• 更容易点击
• 不太清楚事情的开始和结束

http://getbootstrap.com/css/#forms 跟随他们也许是明智的。但他们在v4.0中改变了主意 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios

复选框和收音机用于支持基于HTML的表单验证,并提供简洁、可访问的标签。因此,我们的 <input> s和 <label> 是兄弟元素,而不是 < 在一段时间内 <标签> . 这要稍微详细一些,因为您必须指定id和属性来关联 < <标签> .

详细讨论这一点的用户体验问题: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable

如果在标签标记中包含输入标记,则不需要使用“for”属性。

也就是说,我不喜欢在标签中包含输入标记,因为我认为它们是独立的,不包含实体。

我个人喜欢把标签放在外面,就像你的第二个例子。这就是为什么存在FOR属性。原因是我会经常对标签应用样式,比如宽度,以使表单看起来漂亮(以下简称):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

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

这样我就可以避免表格和表格中的垃圾。

http://www.w3.org/TR/html401/interact/forms.html#h-17.9 对于W3建议。

他们说这两种方法都可以。它们将这两种方法描述为显式(使用带有元素id的“for”)和隐式(将元素嵌入标签):

隐性的:

要隐式地将标签与另一个控件关联,控件元素必须位于label元素的内容内。在这种情况下,标签只能包含一个控件元素。

两者都是正确的,但将输入放在标签中会使使用CSS进行样式设置时灵活性大大降低。

第一 a <label> is restricted in which elements it can contain . 例如,您只能将 <div> 在 <input> <输入> 不在房间里 <

第二,虽然有一些变通方法可以简化样式设置,比如用跨距包装内部标签文本,但有些样式将继承自父元素,这会使样式设置更加复杂。

第三方编辑

html 5.2 spec for label Content model 是 Phrasing content . 这意味着只有内容模型为短语内容的标记 <label> are allowed inside </label>

内容模型必须包括哪些内容的规范性描述 作为元素的子元素和子元素。

没有任何流内容。

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

对于自定义文本值仅次于单选按钮或复选框的表单功能来说,这可能很诱人,但label元素的单击焦点功能将立即将焦点投射到id在其“for”属性中明确定义的元素,这使得用户几乎不可能单击包含的文本字段来输入值。

就我个人而言,我尽量避免使用带有输入子元素的标签元素。标签元素包含的内容比标签本身包含的内容更多,这在语义上似乎是不合适的。如果您将输入嵌套在标签中以实现某种美学效果,那么应该改用CSS。

应反映遏制 . i、 例如,围绕另一个元素的元素 在标记中 在浏览器中 . 根据这一点,标签应该是输入的同级,而不是父级。因此,第二种选择是任意的,令人困惑的。每个读过这本书的人 Zen of Python 可能会同意(平坦的比嵌套的好,稀疏的比密集的好,应该有一个——最好只有一个——明显的方法来做…)。

label input {
    vertical-align: bottom;
}

以确保收音机正确垂直对齐。

指 什么 Writing a form's user interface )将输入字段放在标签内是正确的。这将节省您的代码,因为 for label 不再需要了。

我非常喜欢将元素包装在我的 <label>

我是一名Javascript开发人员,React或Angular用于生成我或其他人可以重用的组件。那就是

需要考虑的是,用JavaScript与复选框和无线电输入进行交互。

使用以下结构:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

那么您的checkboxState中可能有一些bug。

我最近在IE11上遇到了这个问题。我不确定现代浏览器是否有这种结构的问题。

将输入嵌套到标签中有几个优点,特别是对于radio/checkbox字段,

.unchecked, .checked{display:none;}
  label input:not(:checked) ~ .unchecked{display:inline;}
  label input:checked ~ .checked{display:inline;}

<label>
  <input type="checkbox" value="something" name="my_checkbox"/>
  <span class="unchecked">Not Checked</span>
  <span class="checked">Is Checked</span>
</label>

正如您在演示中看到的,将输入字段嵌套在其他元素之后,

• 输入字段后面的元素将根据字段的状态动态设置样式。

multiple labels

放置的主要优点 input 里面 label 是人类的打字效率和计算机的字节存储。

@兹纳库斯在对OP的评论中说,

<input /> 内部 <label> ,是你可以省略的 for 和 id <label>My text <input /></label> 在你的例子中。太好了!

type="text" 也可以省略和 输入 默认情况下,将呈现文本框。

按键和字节的并排比较[1]。

31次按键,31个字节

<label>My Text<input /></label>

58次按键,58字节

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

[1] 在Windows记事本中创建的文本文件(.txt),来自Windows文件资源管理器属性的字节