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

Question

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>

I'm going to be flamed here but if you want the labels left of the inputs I would suggest using a table. It's the only way to have the labels stay all of an equal non static length. — Bazzz, May 07 '13 at 10:03
this is only a suggestion...I preferred to use div and do the style on it... — Olrac, May 07 '13 at 10:09

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

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?

edited May 23 '17 at 12:03

Community

1
1

answered May 07 '13 at 10:03

Kishan Patel

1,358
10
24

its not about doing with minimal, its about knowing whats the recomended/optimum/good way to doing it ;), +1 for the link – VSP May 07 '13 at 11:38
I recommand to you to use .. what you did already. with the use for html element you can make very clear css and One more thing is possible than try to give external with use of css file. That is good practice. – Kishan Patel May 07 '13 at 12:59

haejeong87 · Answer 2 · 2013-05-07T10:25:39.927

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

Good explanation and idea about form reusing +1 – VSP May 07 '13 at 11:31 — VSP, May 07 '13 at 11:31

score 0 · Answer 3 · answered May 07 '13 at 09:59

0

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/

answered May 07 '13 at 09:59

Vloxxity

980
1
9
30

I thought about that option too but it seemed to me that was taking for granted what the browser will do instead of specifiyng how you want it to be displayed – VSP May 07 '13 at 11:33

score 0 · Answer 4 · answered May 07 '13 at 09:59

0

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

answered May 07 '13 at 09:59

Nitesh

15,425
4
48
60

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

4 Answers4