Question

在HTML中包装字段集和标签的正确方法是什么？

E.g。

<label> First name </label> 
<input type="text" name="firstname">

<label> Nick Name </label> 
<input type="text" name="Nickname">

<label> Surname </label> 
<input type="text" name="Surname">

<label> Favourite Color </label> 
<input type="text" name="favourite-color">

<label> Favourite TV Show </label> 
<input type="text" name="favourite-tv-show">

<label> Favourite Food </label> 
<input type="text" name="favourite-food">

我想将每个标签包装并输入HTML标签，以便更容易排列到网格中。

e.g。

    <div>
<label> First name </label> 
<input type="text" name="firstname">
    </div>

    <div>
<label> Nick Name </label> 
<input type="text" name="Nickname">
    </div>

fieldset是正确的标签吗？我不确定你是否应该将它用于单个标签和输入对或它们的组（例如，所有的Name输入都在fieldset标签中，所有的收藏夹都在另一个fieldset标签中）。

我知道我可以使用DIV（如我的第二个例子），但我不确定这是否是最好的标签。

Answer 1

<div>
  <label> First name </label>
  <input type="text" name="firstname">
</div>
<div>
  <label> Nick Name </label>
  <input type="text" name="Nickname">
</div>
<div>
  <label> Surname </label>
  <input type="text" name="Surname">
</div>
<div>
  <label> Favourite Color </label>
  <input type="text" name="favourite-color">
</div>
<div>
  <label> Favourite TV Show </label>
  <input type="text" name="favourite-tv-show">
</div>
<div>
  <label> Favourite Food </label>
  <input type="text" name="favourite-food">
</div>

如果需要更多样式，可以使用其他css样式

div{
 display: table-row;
}
label,input{
 display:table-cell;
}

Answer 2

有几种正确的方法。您可以将它们包装在div，span或表格行的单元格内。其他方法也是可能的，但不太自然。 fieldset元素用于控件和关联标签的组。具有单一控制的组正式正确，但毫无意义。除了分别构成块级别或内联元素之外，div和span都没有赋予它任何含义。但是，由于您可能希望每个控件都从一个新行开始，div使事情变得更简单，因为默认情况下它具有这样的渲染。 table元素构成元素网格，因此是一种自然选择，因为控件和相关标签的集合在逻辑上形成网格。

在任何情况下，请注意示例中使用的label元素是毫无意义的，并没有提供任何功能优势。它们应具有for个属性，通过其id属性将每个属性与其控件相关联。

Answer 3

你拥有的是正确的。标签标签允许用户点击它的文本来切换控件。请参阅：http://www.w3schools.com/tags/tag_label.asp

Fieldset只允许您对输入进行分组。

您可以使用HTML表格来设置标签和输入的样式，以及css。

<fieldset>
<label> First name </label> 
<input type="text" name="firstname">

<label> Nick Name </label> 
<input type="text" name="Nickname">

<label> Surname </label> 
<input type="text" name="Surname">

<label> Favourite Color </label> 
<input type="text" name="favourite-color">

<label> Favourite TV Show </label> 
<input type="text" name="favourite-tv-show">

<label> Favourite Food </label> 
<input type="text" name="favourite-food">
</fieldset>

您可以像这样设置样式（在标签中添加：

<style>
fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  }
label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }
</style>

Answer 4

是的，你可以使用fieldset，形式是正确的标签。（关于问题编辑，你不需要这样做。）

以下是其他选项：

您可以使用fieldset（例如div）。如果要将所有字段（和标签）包装在一起，请使用一个fieldset。如果您需要包装每一对，请使用div。

但是，也许您不需要包装这些对，只需重新排列HTML。这段代码怎么样？

<label> 
    First name
    <input type="text" name="firstname">
</label>

<label> 
    Nick Name
    <input type="text" name="Nickname">
</label>

<label> 
    Surname  
    <input type="text" name="Surname">
</label>

<label> 
    Favourite Color
    <input type="text" name="favourite-color">
</label>

<label> 
    Favourite TV Show 
    <input type="text" name="favourite-tv-show">
</label>

<label> 
    Favourite Food 
    <input type="text" name="favourite-food"
</label>

您可以在float上使用label制作网格（例如，如果您想在一行中使用两对），等等。

HTML修正标签和字段的正确方法

4 个答案: