Example Form Markup

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

Comments

  1. User Avatar
    Ant

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

    • User Avatar
      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. User Avatar
    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>
    <div class="input-wrap checkbox">
        <label>Checkboxes:</label>
        <div class="option-wrap">
         <label for="checkbox1">Option 1:</label>
        <input type="text" name="checkbox1" id="checkbox1" value="checkbox1" />
        </div>
        <div class="option-wrap">
         <label for="checkbox2">Option 2:</label>
        <input type="text" name="checkbox2" id="checkbox2" value="checkbox2" />
        </div>
    </div>
    

    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
    Thierry Koblentz
    Permalink to comment#

    Chris,

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

  5. User Avatar
    hamburger
    Permalink to comment#

    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?

  6. User Avatar
    Andrew
    Permalink to comment#

    Divs in a form? Whyyy

    • User Avatar
      Cal
      Permalink to comment#

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

  7. User Avatar
    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!

    • User Avatar
      Cathy
      Permalink to comment#

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

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

  9. User Avatar
    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)

    Cheers!
    Andrew

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

  11. User Avatar
    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.

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

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

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag