CODEWITHSUNDEEP
cssformshtmlcoding-style
VSP
VSP

Reputation: 2393

Form cleanliness, use divs or elements with display:block?

Having the following example http://jsfiddle.net/Pg8UY/, whats more correct? Divs for line breaks or using display:block so the form uses less elements to display the desired style?

<div style="width:300px">
    <div>
        <label>First Name:</label>
    </div>
    <div>
        <input type="text" value="" style="width: 97%" />
    </div>
    <div>
        <label>Second Name:</label>
    </div>
    <div>
        <input type="text" value="" style="width: 97%" />
    </div>

    <div style="margin:10px 0px; text-align:center">Other method:</div>

    <label style="display:block">First Name:</label>
    <input style="display:block; width: 97%" type="text" value="" />
    <label style="display:block">Second Name:</label>
    <input style="display:block; width: 97%" type="text" value="" />
</div>

Upvotes: 0

Views: 127

Answers (4)

haejeong87
haejeong87

Reputation: 957

It depends, but to me second choice seems a lot cleaner than the first one, except for the inline styles. It is easier to read and there is no real reason to separate closely related elements using divs (other than to change the styles).

Let HTML define what to display, and let CSS define how to display them. There is a benefit to it.

For instance, let's assume that you are using the same form in two different places. In one place, all elements are in-line (horizontal), in the other place, the elements are displayed with the line breaks. Using CSS, single template can be used to display the forms in both places:

<div class="vertical_form">
<label>First Name:</label>
<input type="text" value="" style="width: 97%" />
<label>Second Name:</label>
<input type="text" value="" style="width: 97%" />
</div>

<div class="horizontal_form">
<label>First Name:</label>
<input type="text" value="" style="width: 97%" />
<label>Second Name:</label>
<input type="text" value="" style="width: 97%" />
</div>

.vertical_form label, .vertical_form input {
  display: block;
}

.horizontal_form label, .horizontal_form input {
  display: inline;
}

Upvotes: 1

Kishan Patel
Kishan Patel

Reputation: 1408

This style is correct. But If your requirement to do less element in form than you can do like below way.

 <div style="width:300px">
First Name:<br/>
    <input type="text" value="" style="width: 97%" /><br/>
Second Name:<br/>
<input type="text" value="" style="width: 97%" /><br/>
<div style="margin:10px 0px; text-align:center">Other method:</div>
First Name:<br/>
<input style="display:block; width: 97%" type="text" value="" />
Second Name:<br/>
<input style="display:block; width: 97%" type="text" value="" />
</div>

Or you can take reference from below.

Best way to layout in HTML forms?

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

The first method. Div as a block level element, its inherent characteristic.

Upvotes: 0

Vloxxity
Vloxxity

Reputation: 980

This also works fine:

<div style="width:300px">
<label>First Name:</label>
<input type="text" value="" style="width: 97%" />
<label>Second Name:</label>
<input type="text" value="" style="width: 97%" />
</div>

http://jsfiddle.net/Vloxxity/Pg8UY/1/

Upvotes: 0

Related Questions