Jump to main content or area navigation.

Contact Us

EPA Design, V4

Forms, Template 4

Other Links

Note: These styles apply to Template 4 pages. Here's a page showing how form elements look in Template 3.

Use this style of form to create nice simple forms with CSS. Using this method is not required, but may come in handy.

This form doesn't send, it's just an example. Note, as well, that the default form changed from Template 3.2.1.

Contact EPA Web Design
  • How old are you?

How-To

  1. The styles are dependent upon several elements and one class:
    • <label>
    • <input>
    • An unordered list with list items surrounding each label and input
    • class="form"
  2. The label element improves accessibility. Try clicking on the words next to the boxes—note that the boxes get selected and are ready for your input.

Code

<form class="form" method="post" action="#">
  <fieldset>
    <legend>Contact EPA Web Design</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input class="text" type="text" id="name" name="Name" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input class="text" type="text" id="email" name="Email" />
      </li>
      <li>
        <label for="state">State:</label>
        <select name="state" id="state" />
          <option value="00">Select ...</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
        </select>
      </li>
      <li>
        <label class="check" for="mailing-list">Would you like to join our mailing list?</label>
        <input class="check" type="checkbox" checked="checked" id="mailing-list" value="y" />
      </li>
      <li>How old are you?
        <input class="check" type="radio" id="g25_30" name="25_30" />
        <label for="g25_30" class="check">25&ndash;30</label>
        <input class="check" type="radio" id="g31_35" name="31_35" />
        <label for="g31_35" class="check">31&ndash;35</label>
        <input class="check" type="radio" id="g36_40" name="36_40" />
        <label for="g36_40" class="check">36&ndash;40</label>
      </li>
      <li>
        <label for="userword">Help us stop spam by typing in the word <b>human</b>.</label>
        <input class="text" type="text" name="UserWord" id="userword" />
      </li>
      <li>
        <label for="message">Message:</label>
        <textarea id="message" name="Message" cols="50" rows="5"></textarea>
      </li>
      <li>
        <input id="submit" type="submit" value="Send comments" />
      </li>
      <li>
        <input type="hidden" name="tssms" value="xxxxxx" />
        <input type="hidden" name="mailtofile" value="xxxxxx" />
        <input type="hidden" name="Subject" value="xxxxxx" />
        <input type="hidden" name="Next" value="link/comments_thanks.htm" />
        <input type="hidden" name="SingleLine" value="Yes" />
        <input type="hidden" name="NoDisplay" value="Yes" />
      </li>
    </ul>
  </fieldset>
</form>

For help with these pages, contact the Web Template Workgroup.

Jump to main content.