正确的标签和字段包装方式

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

。

<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标记中包装每个标签和输入，这样它们更容易排列到网格中。

。

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

fieldset是正确的标签吗?我不确定你是否应该将其用于单个标签和输入对或它们的组(例如，所有的名称输入将在fieldset标签中，所有的收藏夹将在另一个fieldset标签中)。

我知道我可以使用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>

如果需要更多的样式，你可以使用额外的css样式

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

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

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

是的，你可以使用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 s上创建一个网格(例如，如果您想在一行中有两对)，等等。

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

Fieldset只允许对类似的输入进行分组。

你可以使用一个HTML表格来设计你的标签和输入，让它们看起来更漂亮。

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

相关内容

最新更新

热门标签：