为什么有人要在< div>内包装表单元素?标签? [英] Why would someone want to wrap form elements inside of <div> tags?

问题描述

例如.这是简单的形式(我经常使用):

For example. here is simple form (that I often use):

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

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

But I read some books, and see some of my friends often do:

<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标记内只有一个组件).我不知道他们这样做的好处.

The difference is: they often wrap all components inside a div tag, and then assign its a class name (although inside div tag has only one component). I don't know which advantages when they do this.

谢谢:)

推荐答案

WHATWG: 4.10.1.1 Writing a form's user interface

任何表单都以form元素开头，在其中放置控件.大多数控件由input元素表示，该元素默认情况下提供文本控件.为了给控件加标签，使用了label元素.标签文本和控件本身位于label元素内. 表单的每个部分都被视为段落，通常使用 p 元素将其与其他部分分开.综上所述，这是人们可能会询问客户名称的方法:

Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a text control. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer's name:

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

WAI:表单>分组控件

WAI: Forms > Grouping Controls

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

Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify... In this example, the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group...

<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>元素用作标识组的标题.

It also recommends to use <fieldset> and <legend> elements. <fieldset> element provides a container for related form controls, and the <legend> element acts as a heading to identify the group.

除了这些以外，样式和操作是许多开发人员的主要原因.

Other than those, Styling and Manipulating are the main reasons for lots of developers.

这篇关于为什么有人要在< div>内包装表单元素?标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！