The experiment

Contact forms are an important part of most websites, allowing the visitor to contact the author(s) of the site with questions or queries. Every web developer worth his salt knows how to build a contact form using <label> and <input> tags, and with HTML5 it is no different.

However, HTML5 does offer some new <input> types and attributes, and it is of these that I will talk about today. I will also create a sample contact form for you to see.

The process

To begin with, let's take a look at the new <input> types. There's a number of new input types available with HTML5, but for now I will only mention the ones that I'll use for this contact form.

• <input type='email'> — this indicates that the <input> field contains an email, or a list of email addresses. It is a void element and thus has a start tag, but no end tag.
• <input type='tel'> — indicates that the field contains a telephone number. It is a void element and thus has a start tag, but no end tag.

As well as these new inputs, I will also use some of the new <form> attributes: (for a full list check the spec)

• autofocus — this indicates which <input> is to be given focus when the document is loaded
• placeholder — this allows you to specify some default text to populate the <input> field with, usually as a hint as to what information is to be entered
• pattern — specifies a regular expression against which a browser is supposed to use to check the value of the field

If a browser doesn't support these new types, they simply default to <input type='text'>.

As with all forms, start off with the <form> tag. The action for this form will be a simple JavaScript function (called displayMsg();) that will display the form data in a <div> below. Usually the form would be sent to a backend script, e.g. in PHP, that would process the form data and send the data.

A <input type='text'> is then used to collect the name, with the autofocus set, as this is the first field in the form and the focus is to be here. A placeholder text string is also set informing the user to enter their name in the field.

Next, the email is to be collected using the <input type='email'> element. A placeholder is also set in this field, but I also make use of the pattern attribute, in which I have added a simple regular expression for validating e-mail addresses. The browser should use this regular expression to validate the field's content before attempting to submit the form.

To collect the telephone number, the <input type='tel'> is used, and also has a placeholder string defined and also makes use of the pattern attribute, containing a simple telephone regular expression.

The message is then captured via a <textarea> element, with an <input type='submit'> used to submit the form.

The results

The resulting page and it's form is available to view, and the HTML code looks as follows:

<form action="javascript:displayMsg();">

  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name" autofocus>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$">
  
  <label for="telephone">Telephone:</label>  
  <input type="tel" id="telephone" name="telephone" placeholder="Enter your telephone number" pattern="^[0-9]+[\- ]*[0-9]+$">
  
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="10" cols="20"></textarea>
  
  <input type="submit" id="send" value="send">
  
</form>	

As usual, browser support for these various tags and attributes varies widely, with the latest version of Opera leading the way. To test if a particular browser supports each of these input items, open the required browser and follow this link, but a quick overview of support for the elements and attributes that I've used is given below.

The comments

Post your comment here:

*Name:
*Email:
Website:

Are you human? You know it has to be asked!

enter the answer: