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

Question

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>

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.

Thanks :)

Answer 1

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.