HTML5 Contact FormIf you’ve been thinking about converting your XHTML web pages to HTML5 web pages, your contact page may be the easiest place to start.

There are many new interesting features in HTML5 forms, such as new input types, new attributes and basic browser validation. Imagine client-side form validation without the need for JavaScript.

The first thing we need to do to create an HTML5 document is use the new doctype. Doctype is a lot simpler in HTML5 than XHTML. It’s also case insensitive.

<!DOCTYPE html>

Here is the basic structure of your web page without the contact form.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Toddler Steps from XHTML to HTML5 – Contact Forms</title>
</head>
<body>
</body>
</html>

Some New HTML5 Elements and Tags to Learn.

  1. <header> The header tag is intended as a container for introductory information about a section or an entire webpage. If you’ve been using <div id=”header”> in your XHTML pages, that would be the tag to replace with <header>.
  2. <nav> Your navigation elements go here. Replace <div id=”navigation”> with <nav>.
  3. <footer> Replace <div id=”footer”> at the bottom of your page with <footer>.

There are many more new elements. But <header>,<nav> and <footer> are the easiest ones to start with.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Toddler Steps from XHTML to HTML5 – Better Forms</title>
</head>
<body>
<div id=”wrapper”>
<header>
<nav></nav>
</header>
<form>Your Contact Form will go here.</form>
<footer></footer>
</div>
</body>
</html>

Here are three easily confused HTML5 structural elements:

<div>, <section> and <article>

We won’t discuss them here.
To learn more about them, read: HTML5 structure—div, section & article.

Let’s move on…

Styling Your New HTML5 Tags

In most modern browsers, all you need to do is apply CSS styles to the new elements <header>, <nav> and <footer> as you normally would. But make sure to add the display:block; rule to the new elements to help old browsers understand them.

Add this to the head section of your web page:

<style type=”text/css”>
footer,header,nav {
display: block;
}
</style>

Read this web design tutorial: Baby Steps from XHTML to HTML5 to learn more basic differences between XHTML and HTML5 web pages.

HTML5 Contact Forms

Input Tag Changes from XHTML to HTML5

Input tags are slightly different in HTML5 than in XHTML.
In XHTML, they are closed using the forward-slash character: <input />.
In HTML5, this tag has been simplified to just <input>.

Input Type Changes from XHTML to HTML5

XHTML to HTML5For many years, contact forms were comprised of just a few kinds of Input Types such as text boxes, radio buttons, text area boxes and submit buttons.

All of these Input Types still work in HTML5. But HTML5 adds some exciting new features. Try out some demo contact forms.

HTML5 Contact Form Demo:

HTML5 Demo Form

New Input Types in HTML5

HTML5 defines over a dozen new input types that you can use in your forms. We will discuss one really useful one: Email. This form field renders the exact same way as any normal text field, but is more specific about what information needs to be entered by the web site visitor. This input field will be automatically validated when submitted by the web browsers that recognize it.

Not all major browsers support all the new input types. However, you can already start using them. If they are not supported, they will behave as regular text fields. HTML5 doesn’t dictate how web browsers should present these new input types or how they should show validation errors. Expect to see some differences between browsers.

NOTE ABOUT MOBILE BROWSERS: On the iPhone/iPad the different input types are associated with different on-screen keyboards, making it easier for people to complete your online forms. They display different keyboards for a text input type and an email input type. Because email addresses always include an at-sign (@) and period, those are more prominent on the email type field keyboard.  Triggering specialized keyboards such as these greatly enhances user experience and speeds up form completion for mobile users.

This image shows an example keyboard for the email input field.

mobile device keyboard

Input Type: email

The email type is used for input fields that should contain an e-mail address.

E-mail: <input type=”email” name=”email” id=”email”>

Input Attributes

In addition to the new Input Types, HTML5 provides some handy new content attributes that can be used on input fields. HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave.

<input> attributes allow developers to achieve things that were previously only possible with JavaScript.

The “Placeholder” Attribute

One new HTML5 attribute is “Placeholder.” The Placeholder Attribute allows you to assign a value to a text field, which when selected, disappears and, if no text has been entered, will reappear again when de-selected.

The placeholder attribute is there to give the user an idea about how the data should be formatted. By default the placeholder text is displayed in light grey. This gives the impression that the text is temporary.

In this example, you see the words “numbers and hyphens allowed.”

<input type=”text” name=”phone” id=”phone” placeholder=”numbers and hyphens allowed”>

HTML5 placeholder attribute

The HTML5 Placeholder attribute only applies to inputs with a type attribute value of text, email, search, tel, or url. It is reasonably well supported in the most recent browser releases. Browsers that don’t support the placeholder attribute will simply ignore it. The HTML5 Placeholder Attribute isn’t currently supported in Internet Explorer, but that should change when IE10 is released.

The “Required” Attribute

Another simple change you can make to your HTML5 contact form is to mark a text input field as ‘required’. The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. Adding the “required” attribute lets you specify that the user must enter a value before submitting the form.

It can be written like this:

<input type=”email” name=”email” required>

It can also be written this way:

<input type=”email” name=”email” required=”required”>

This informs the (HTML5-aware) web browser that the field is mandatory. Different browsers may display a warning or even prevent the form from being submitted if this field has no value. Be sure to assign a name attribute to your form elements or the required attribute will not take effect.

NOTE: By default visitors can’t see ‘required’ fields until they submit the form.

Styling HTML5 Forms with New CSS3 Pseudo-Classes

Use CSS to Show Form Field Validity As Visitors Start Typing.

With CSS, you can create your own valid/invalid place markers inside or alongside the input box, or simply use background colors and borders as some browsers do by default.

In this example, the exclamation point marker indicates that an required input is invalid. The Firefox browser also adds a red outline to the box. When the validation has passed, the background image will update to a green “check.” This helps the visitor fill in the form correctly.

Valid and Invalid Text Box

CODE SNIPPET: Add this to the head section of your document. Then create your invalid and valid background images and place them in the same folder as your contact page.

<style type=”text/css”>

input:required:invalid {
background-image: url(invalid.png);
background-position: right;
background-repeat: no-repeat;
}input:required:valid {
background-image:url(valid.png);
background-position: right;
background-repeat: no-repeat;
}

</style>

Or you can change the background color of the input box:

<style-type=”text/css’>

input:required:invalid {
background-color: red;
}

input:required:valid {
background-color: white;
}

</style>

New input attributes like “Required” used in combination with “CSS Pseudo-Class Selectors ” make it easier to display feedback to the user. Visitors see the validity state of a form element as they are typing instead of having to wait until they submit the form.

HTML5 Form Submission and the Cartoon Bubble

Right now, different browsers will do different things when a form using HTML5 elements is submitted. When there is an error, most browsers will prevent the HTML5 form from being submitted. They will instead display a “hint” to the user, marking the first field that is required and has no value with a “cartoon bubble” warning. Visual styling and support for these ‘bubble fields’ is quite broad.

Here are “cartoon bubble” warning examples from a Google Chrome web browser and a Firefox web browser.

HTML5 Form Validation Cartoon Bubbles

Use CSS3 to Style your HTML5 Submit Button

Visitors click the submit button to process data after filling out a form. Using CSS properties such as background, border-radius, box-shadow and others, the button can be styled to make it stand out.

<input type=”submit” name=”submit” value=”submit”>

Read Style Web Forms Using CSS.

Example Contact Form Code

<form>
<label for=”name”>Name</label>
<input type=”text” name=”name” id=’name” required>
<label for=”phone”>Phone:</label>
<input type=”text” name=”phone” id=”phone” placeholder=”numbers and hyphens allowed”>
<label for=”email”>Email</label>
<input name=”email” id=”name” type=”email” required>
<label for=”comments”>Comments</label>
<textarea name=”comments” id=”comments” required></textarea>
<input type=”submit” name=”submit” id=”submit” value=”Submit”>
</form>

More Reasons to begin updating your Web Pages to HTML5.

  • HTML5’s official release is expected in 2014.
  • Facebook, YouTube, Google, Twitter and many other major web sites have already switched to HTML5.
  • IE10 will soon be released. IE10 has made a giant leap in HTML5 support over version 9.

Processing HTML5 Forms

Submitting Your HTML5 Contact FormYour HTML5 Contact Form will be stylish and easy for visitors to fill out but it won’t do anything useful without some means of processing it.

PHP is one of the most popular means of processing HTML forms. These web sites will show you how to process your contact form and send form results to your e-mail address.

PHP Contact Form Example

My PHP Form

Summary

You can take some easy “Toddler” steps from XHTML towards HTML5 today. Pick a web page with a simple layout such as a Contact Page and make a few updates in the source code.

  1. First change your web page’s Doctype.
  2. If you add any new HTML5 elements such as <footer>, don’t forget to include the display:block; rule in your CSS.
  3. To help old Internet Explorer web browsers, add the HTML5Shiv script.
  4. Try a new input type such as “email.”
  5. Add the “required” attribute and the“placeholder attribute” too… if you like.
  6. Then use CSS to style your required form elements, making it easier for visitors to fill out your  form.

Be sure to try out your contact form yourself with different web browsers to see the exciting new changes. You’ll soon discover that you don’t need to be an HTML5 Expert to start using HTML5.