HTML包装标签和字段的正确方法

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

例如

名字
昵称
姓
喜爱的颜色
最受欢迎的电视节目
喜爱的食物

我想将每个标签和输入包装在一个HTML标记中，这样它们就更容易排列到网格中

e、 g

名字
昵称

标签正确吗？我不确定您是否应该将其用于单个标签和输入对或组（例如，所有名称输入将在一个字段集标记中，所有收藏夹将在另一个字段集标记中）

---

我知道我可以使用DIV（在我的第二个示例中），但我不确定这是否是最好的标记。

您所拥有的是正确的。标签标签允许用户单击其文本以切换控件。见：

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

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>

字段集{
填充：1em；
字体：80%/1无衬线；
}
标签{
浮动：左；
宽度：25%；
右边距：0.5em；
垫面：0.2米；
文本对齐：右对齐；
字体大小：粗体；
}

是的，您可以使用

字段集

，格式为正确的标记。（关于问题编辑，您不需要）

这里还有其他选项：

您可以使用任何内容，而不仅仅是

字段集

（例如

div

）。如果要将所有字段（和标签）包装在一起，请使用一个

字段集

。如果需要包装每一对，请使用

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>

名字
昵称
姓
喜爱的颜色
最受欢迎的电视节目
喜爱的食物
有几种正确的方法。您可以将它们包装在
div
，或
span
，或表格行的单元格中。也可以使用其他方法，但不太自然。元素用于一组控件和相关标签。具有单个控件的组形式正确，但毫无意义。无论是
div
n或
span
除了分别构成块级或内联元素外，还具有赋予它的任何含义。但由于您可能希望每个控件从新行开始，
div
使事情变得更简单，因为默认情况下它具有这样的呈现方式。
table
元素构成元素网格，因此是一个自然元素所有选项，因为控件和关联标签的集合在逻辑上形成一个网格

在任何情况下，请注意，示例中使用的
label
元素都是毫无意义的，并且没有提供任何功能优势。它们应该具有
for
属性，通过其
id
属性将每个元素与其控件相关联。
因此仅用于单选按钮？而且，我认为表不会是best标签用于样式设置。不，您可以对任何输入元素使用标签。我已经用一个示例编辑了我的帖子，说明如何将字段集样式设置为美观，但我需要每对（标签和输入）我知道我可以使用DIV，但我不确定这是否是最好的标记。是的，我会为网格本身创建一个父DIV容器，然后将每个标签/输入组合放入一个DIV中，并将其浮动到左侧。DIV一旦碰到父d，就会自动溢出到下一行iv的一方。我需要每个标签/输入对包装在一个标记中。我已经更新了我的问题，以使其更清晰。因此，为了确认最好使用DIV而不是字段集。代码的格式伤了我的眼睛，我必须纠正它。现在它是可读的，人们可以清楚地看到你的标签是无用的，它们需要“for”属性和输入标签可以指向的“id”属性，然后如果我需要以不同的方式设置标签的样式，我会将它们包装成跨距吗？例如，我不知道您到底需要什么，它应该是什么样子。但是，如果需要使用，您可以将标签文本包装成跨距（如果需要颜色等，您可以直接设置标签的样式，如果需要设置标签文本的大小，您可以设置标签的宽度、输入和浮动输入。例如）
<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>

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