Creating the markup

In the previous section we discussed the constraints you want to apply to your form’s fields. These constraints can be set using some of the new HTML5 attributes and types. For example, to have an email field that is well formatted and mandatory, you can have the following input in a form:

<input type="email" name="email" id="email" required />

In modern browsers, as soon as the user submits the form, this input will trigger the tests you want. Unfortunately, old browsers like Internet Explorer 9 and below don’t recognize the email type and the required attribute. When something isn’t recognized, the default behavior of the browsers is to ignore it. In this case it’s like you defined type="text" and the required attribute wasn’t specified. Therefore, you’re on your own with these browsers.

If you want to use these new HTML5 attributes and types and then fall back on your own controls for older browsers, you can employ the technique you learned in section 4.1:

if (!('required' in document.createElement('input'))) {
   // Set our own controls
}

In this demo, to keep things as simple as possible, you’ll pretend that you’ve forgotten HTML5. You’ll always use your own controls and avoid using HTML5 attributes. With these considerations in mind, take a look at the code of your form, as shown in the following listing.

Listing 11.1. The markup of the contact form

<form id="contact-form" name="contact-form" class="box" method="post"
      action="contact.php">
   <div class="form-field">
      <label for="name">Full name:</label>
      <input name="name" id="name" />
      <span class="error"></span>
   </div>
   <div class="form-field">
      <label for="email">Email:</label>
      <input name="email" id="email" />
      <span class="error"></span>
   </div>
   <div class="form-field">
      <label for="subject">Subject:</label>
      <input name="subject" id="subject" />
      <span class="error"></span>
   </div>
   <div class="form-field">
      <label for="message">Message:</label>
      <textarea name="message" id="message"></textarea>

      <span class="error"></span>
   </div>
   <input type="submit" value="Submit"/>
   <input type="reset" value="Reset"/>
</form>

As you can see from the listing, each field is composed of three elements: a label, an input (textarea for the message), and a span. The label element is used to specify the name of the field and has the for attribute set to improve the accessibility of the form. The <input>s and the <textarea> allow users to write the information required. Finally, span is used to show the feedback illustrated in figure 11.1. In addition to these elements, you have the Submit and the Reset buttons at the bottom of the form.

The contact form isn’t the only component of the page. You also need a dialog box to show the messages. The markup of the latter is pretty simple because it needs only a title, a paragraph, and a button to close the dialog. These three elements are wrapped into a container so you can treat them as a unique component.

The HTML code of the dialog is shown here:

<div class="dialog-box">
   <h2 class="title"></h2>
   <p class="message"></p>
   <button>OK</button>
</div>

With this snippet we’ve completed the overview of the HTML code of index.html. If you run the demo in its current state, it’s neither interactive nor useful because it doesn’t do anything at all.

Let’s fix this by adding the backend code. Don’t worry if you don’t understand PHP; we’ll highlight only the key points.