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 theinput
element, which by default provides a text control. To label a control, thelabel
element is used; the label text and the control itself go inside thelabel
element. Each part of a form is considered a paragraph, and is typically separated from other parts usingp
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 hasrole=group
to indicate that the contained elements are members of a group and thearia-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.