Example Form Markup

<form id="myForm" action="#" method="post">

    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1">

    <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">

    <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>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox">

    <input type="submit" value="Submit">



  1. User Avatar

    I usually wrap input into label to make it simplier.
    It does not work in IE6, but nobody cares (my clients too).

    • User Avatar
      Permalink to comment#

      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.

  2. User Avatar
    Permalink to comment#

    This is what I usually use:

    <div class="input-wrap text required">
        <label for="textinput">Text Input:*</label>
        <input type="text" name="textinput" id="textinput" value="Value" />
    <div class="input-wrap checkbox">
        <div class="option-wrap">
         <label for="checkbox1">Option 1:</label>
        <input type="text" name="checkbox1" id="checkbox1" value="checkbox1" />
        <div class="option-wrap">
         <label for="checkbox2">Option 2:</label>
        <input type="text" name="checkbox2" id="checkbox2" value="checkbox2" />

    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.

  3. User Avatar
    Antoine Descamps
    Permalink to comment#

    Why not wrap each radio/label couple in a newer div to make them more tied?

  4. User Avatar
    Permalink to comment#

    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?

  5. User Avatar
    Permalink to comment#

    Divs in a form? Whyyy

    • User Avatar
      Permalink to comment#

      Perhaps Chris is doing this just to separate the different form elements for example purposes..

  6. User Avatar
    Permalink to comment#

    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!

    • User Avatar
      Permalink to comment#

      Wonderful! Exactly what I was looking for…very cool. Thank you.

  7. User Avatar
    Karl Groves
    Permalink to comment#

    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.

  8. User Avatar
    Permalink to comment#

    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)


  9. User Avatar
    Paul Dodkins
    Permalink to comment#

    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

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.