Let's talk

Call us: +44 (0)1603 878240

HTML basics: Marking Up A Form

11:46 on Mon, 5 Jul 2010 | Development | 0 Comments

As with all front-end development, the most important thing to consider when marking up a form is to have a good, prior understanding of all of the relevant HTML elements you have at your disposal. This not only allows you to semantically describe the form in the best possible manner for accessibility and usability reasons, but also gives you a plethora of hooks upon which to hang your CSS to make the final thing look good.

So to begin with we must first open the form. The ‘action’ attribute determines where the form’s data will be submitted, and the ‘method’ describes in what manner it is to be sent. Typically you will want to use “get” for performing retrievals, such as a basic keyword search, and “post” for anything intrinsically more privy where for instance a database is updated or an email is sent.

<form action=”http://www.further.co.uk/contact-us/” method=”post”>

Next we want to make use of the “fieldset” element, which is used to logically group form inputs together. You should also use a “legend” element in conjunction with the fieldset in order to provide the user with a caption for your grouping. This will significantly help visually impaired users who are relying on a screen reader to describe the form to them.

  <fieldset>
    <legend>Your Contact Details</legend>

Now we can go ahead and add our user input fields; so first let’s take a look at the code and then I’ll go on to explain it.

    <ol>
      <li>
        <label for=”name”>Name</label>
        <input type=”text” id=”name” name=”name” tabindex=”1” />
      </li>
      <li>
        <label for=”email”>Email</label>
        <input type=”text” id=”email” name=”email” tabindex=”2” />
      </li>
    </ol>
  </fieldset>

Firstly, you’ll notice that I have used an ordered list (<ol>) to separate the fields. This is primarily a layout aid to assist styling, as we can use each list item (<li>) as a container and style them uniformly or target individuals with classes and/or id’s. I believe this practice also works well semantically, as it can provide additional information to screen readers (by announcing the number of fields to the user) as well as providing a far better and more intuitive un-styled layout.

Each “input” has a corresponding “label”, identified by the matching ‘for’ and ‘id’ attribute values. It is very important they match for both usability and accessibility reasons, as clicking a label will give focus to or toggle its target input field and the association will be announced by screen readers on cue. Almost as important is the “tabindex” attribute, which explicitly tells the browser in which order to navigate through the input fields upon a user pressing the tab key. Omitting this attribute will lead to the browser second guessing the order based upon the documents structure, which may not always work as you intend.

So far we’ve just covered a very basic one line text input, so let’s take a quick look at some of the other form elements available to us and how to go about marking them up.

  <fieldset>
    <legend>Your Message</legend>
    <ol>
      <li>
        <label for=”subject”>Subject</label>
        <select id=”subject” name=”subject” tabindex=”3”>
          <option>General Enquiry</option>
          <option selected=”selected”>Business Proposal</option>
          <option value=”Support”>Help Request</option>
        </select>
      </li>
      <li>
        <label for=”comments”>Comments</label>
        <textarea id=”comments” name=”comments” rows=”6” cols=”40” »
tabindex=”4”></textarea>
      </li>
    </ol>
  </fieldset>

First up is the “select” box, which provides a means of presenting the user with multiple options whilst (by default) only displaying one, so as to economise space and avoid overwhelming the user. Upon first viewing the selection box the first option will be displayed unless the ‘selected’ attribute has been applied to any of the remaining options instead. On submitting the form, the options label text will be submitted unless a specific ‘value’ attribute has been provided.

Next we have the “textarea”, or multi line text input field. This is fairly self-explanatory, just take note the ‘rows’ and ‘cols’ (columns) attributes which define the size of the field when not overwritten by more specific CSS rules and the fact that it is not a self-closed void element (unlike <input />).

To complete our form we need a submit button for the user to press. This can be done in one of three ways: either with input type=”submit”, input type=”image” or button type=”submit”. The first two use the self-closing void element “input”, the latter is a standard element requiring a matching closing tag. I prefer to use the “button” element over the others purely because you can target it with CSS without needing any extraneous classes.

  <fieldset>
    <button type=”submit” name=”sendContactForm” tabindex=”5”>Send »
</button>
  </fieldset>
</form>

Basic Unstyled Form

View full source code

So that concludes my introduction to writing basic HTML forms. In the next episode I will delve into some of the other intricacies of form input controls such as radio buttons and checkboxes.

Comments & Discussion

(0 Comments)

Post a comment, your email will not be published, nor will it be harvested.