Grow your CSS skills. Land your dream job.

Last updated on:

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

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

    • 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. 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. Why not wrap each radio/label couple in a newer div to make them more tied?

  4. Chris,

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

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

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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".