Why would someone want to wrap form elements inside of <div> tags?

WHATWG: 4.10.1.1 Writing a form's user interface

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: Forms > Grouping Controls

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>

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.


It really depends what you want to do.

Generally, the more layers you wrap around some other elements, the more flexibility you have if you want to create some effect with CSS and Javascript.

But it could just be a matter of preference.

In short, unless you have a reason, it makes little difference whether you will wrap your key elements, the < input >s in this case, in some other tag.

Tags:

Html

Css