<form id="myForm" action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice" id="radio-choice-1" tabindex="2" value="choice-1">
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice" id="radio-choice-2" tabindex="3" value="choice-2">
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
Example Form Markup
Chris Coyier
on
(Updated on )
I usually wrap input into label to make it simplier.
It does not work in IE6, but nobody cares (my clients too).
Ant is not simplier, then when you want to style the form, is going to be more complicated, and less accessible, semantic. Just use “for” and you will have more options to style it.
Just an observation.
This is what I usually use:
The main goal with this markup is consistency. With this markup you can style your form in almost any type of configuration (ex. label left, label top, label right).
You can also use the wrapper classes to style inputs and their labels differently depending on types (selects, checkbox, text). Or based on state (error, valid, required).
The downside is that there is quite a bit of extra markup that you may not always use. Personally I think that is worth it for the consistency.
Why not wrap each radio/label couple in a newer div to make them more tied?
Hello,
i have some suggestions:
Whats about to complete the markup with css-styles that it works probably with all devices.
Especially what width is recomended for typical input like name and company?
sombody know some good examples?
Divs in a form? Whyyy
Perhaps Chris is doing this just to separate the different form elements for example purposes..
ideally you’d not be cluttering the form with extra divs.
You can easily layout a form using inherent form elements in the css
form {}
form fieldset { }
form fieldset label {}
form fieldset input {}
form fieldset input[type=radio] {}
form fieldset input[type=checkbox] {}
// for yes / no or gender = M /F type questions //
form fieldset fieldset {}
form fieldset fieldset legend {}
form fieldset fieldset label {}
form fieldset fieldset input[type=radio] {}
Styling forms using JUST the form elements is easy (depending on the complexity of your form – and I’ve done some VERY complex forms this way) AND a lot of fun!
Have a go. Don’t be lazy and revert to divs!
Wonderful! Exactly what I was looking for…very cool. Thank you.
The use of tabindex in this example should be removed. Explicitly setting tabindex to a value > 0 is almost always a bad idea, as this can result in confusion for people who navigate a site using only a keyboard. Source order should be enough, in most cases.
Using a fourth-level header (h4) may not be the best choice for a generic code example, as it dictates the place in the document outline. Not trying to be nit-picky, just throwing it out there in case anyone reads the example and assumes the proper place for an h4 is within a form, used as a title.
(obviously an h4 should be used when appropriate within the document)
Cheers!
Andrew
Great comments,
Did I miss the part where we use “label” and “input” tags and align using CSS3? Most reading material says stay away from “table” to design forms, I am trying to do that but cannot get the same tidy alignment you would get using “table”,
Thoughts and input welcome
Cheers and Thanks
Forms aren’t tabular data, so they shouldn’t be put into tables for layout. If you need some of the layout tricks that tables have, you can use display: table, display: table-cell etc. Hope that helps. :)