CODEWITHSUNDEEP
htmlcss
Rafael Adel
Rafael Adel

Reputation: 7759

How to correctly style a form?

I'm really not that good at CSS, and I want to know how to correctly style a form in a manner that it puts each single text input and label in a line. like this : 

<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>

and it would be shown in the webpage like : 

(label)(input)
(label)(input)
(label)(input)
(label)(input)

Upvotes: 1

Views: 201

Answers (6)

Sarah Vessels
Sarah Vessels

Reputation: 31630

I recommend this tutorial by A List Apart about Prettier Accessible Forms. You can also use a definition list with some custom styling, e.g.,

<dl><dt><label></label></dt>
  <dd><input></dd></dl>

And something like:

dl dt {
    float: left;
    width: 8em;
}

Edit: to sum up the A List Apart article, they suggest you put form fields in an ordered list ol. Labels are displayed as inline-block so they appear horizontally next to their associated fields.

Upvotes: 2

Vicky
Vicky

Reputation: 3310

I find enclosing label and input or select tags in a div or list. And the label and select tags should be of type inline-block

<div>
    <label>Name: </label><input type="text" />
</div>

<div>
    <label>Place: </label><input type="text" />
</div>

CSS:

label {
    display: inline-block;
}
input {
    display: inline-block;
    padding: 2px;
}
div {
    display: block;
    margin: 2px 0;
}

This would work out well.

Upvotes: 0

TheZ
TheZ

Reputation: 3732

Put your inputs inside the label element and then you can simply display: block them or float them, I prefer display but it would be easy enough to change.

<label>Hello <input type="radio" name="what" value="Hello" /></label>

http://jsfiddle.net/Bpxfp/

Upvotes: 1

maksbd19
maksbd19

Reputation: 3830

http://jsfiddle.net/ud7YE/1/

you can control the space between the label and input by varying the width of the wrapper. Just set the height of the label and the top margin of the input same in value but negative

Upvotes: 0

Alex
Alex

Reputation: 35409

<label>foo</label>
<input type="text"/>
<label>foo</label>
<input type="text"/>​

<style>
input, label { float:left  }
label { clear:left; }
</style>

​

http://jsfiddle.net/RpRS5/

Upvotes: 4

Marcin
Marcin

Reputation: 49816

Put them in a list, or in a structure like a list (that is to say, wrap each "row" in a div).

Upvotes: 1

Related Questions