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-1" id="radio-choice-1" tabindex="2" value="choice-1">

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice-2" 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. Ant

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

    • Okto
      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. Wes
    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. Antoine Descamps
    Permalink to comment#

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

  4. Thierry Koblentz
    Permalink to comment#


    The value of @for is meant to be paired with @id, not @name

    • Chris Coyier
      Permalink to comment#

      Indeed. I found a few places in there this wasn’t the case so I updated/fixed it.

  5. hamburger
    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?

  6. Andrew
    Permalink to comment#

    Divs in a form? Whyyy

    • Cal
      Permalink to comment#

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

  7. Croydon
    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!

    • Cathy
      Permalink to comment#

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

  8. 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.

  9. AndrewWatson
    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)


  10. 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

  11. Ryan Tvenge
    Permalink to comment#

    Thanks for this post!

    I know it’s pretty old, but I did see a possible issue with the radio example.

    I think the radio example needs to have the same name attribute, otherwise you can select both radio buttons.

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.