Question

例如。这是简单的形式（我经常使用）：

<form class="login">
      <input class="login_username" type="text" value="username"/>
      <input class="login_password" type="text" value="password"/>
      <input type="submit" value="Login"/>
</form>

但我读了一些书，看到我的一些朋友经常这样做：

<form class="login">
   <div class="login_username">
      <input class="login_input" type="text" value="username"/>
   </div>
   <div class="login_password">
      <input class="login_password" type="text" value="password"/>
   </div>
      <input type="submit" value="Login"/>
</form>

不同之处在于：它们经常将所有组件包装在div标签内，然后为其分配一个类名（尽管div标签内只有一个组件）。我不知道他们这样做有什么好处。

谢谢：）

Answer 1

<强> WHATWG: 4.10.1.1 Writing a form's user interface

任何表单都以form元素开头，其中放置了控件。大多数控件由input元素表示，默认情况下提供文本控件。要标记控件，使用label元素;标签文本和控件本身位于label元素内。 表单的每个部分都被视为段落，并且通常使用 p 元素与其他部分分开。将这些放在一起，以下是人们可能会要求客户的名字：

<form>
  <p><label>Customer name: <input></label></p>
</form>

<强> WAI: Forms > Grouping Controls

对相关表单控件进行分组可使所有用户更容易理解表单，因为相关控件更易于识别...在此示例中，div元素具有role=group以指示包含的元素是成员一个组的aria-labelledby属性引用了将作为该组标签的文本的ID ...

<div role="group" aria-labelledby="shipping_head">
    <div id="shipping_head">Shipping Address:</div>
    <div>
        <label for="shipping_name">
      <span class="visuallyhidden">Shipping </span>Name:
    </label><br>
        <input type="text" name="shipping_name" id="shipping_name">
    </div>
    […]
</div>
<div role="group" aria-labelledby="billing_head">
    <div id="billing_head">Billing Address:</div>
    <div>
        <label for="billing_name">
      <span class="visuallyhidden">Billing </span>Name:
    </label><br>
        <input type="text" name="billing_name" id="billing_name">
    </div>
    […]
</div>

它还建议使用<fieldset>和<legend>元素。 <fieldset>元素为相关表单控件提供容器，<legend>元素充当标识组的标题。

除此之外，样式和操纵是许多开发者的主要原因。

Answer 2

这真的取决于你想做什么。

通常情况下，围绕其他元素包裹的图层越多，如果要使用CSS和Javascript创建一些效果，就会有更大的灵活性。

但这可能只是一个偏好问题。

简而言之，除非你有理由，否则你是否将包装你的关键元素，＆lt;在这种情况下输入＆gt; s，在其他标签中。

Answer 3

它主要用于CSS样式表单，并可能使用Javascript钩子的一些类。

为什么有人想在<div>标签中包装表单元素？</div>

3 个答案: