Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

How to create responsive HTML5 forms

Discover how to create stylish, responsive HTML5 forms without the need for Javascript

JavaScript has helped turn the web from a static experience into a rich interactive tool that provides handy feedback with almost tactile qualities. As a universally adopted standard, it’s a great way to ensure your visitors benefit from the best possible experience, whether you’re creating animated slideshows or complex web apps.

When it comes to forms, JavaScript is most commonly used to provide feedback to the user while they enter data, or to create user-friendly controls that ensure valid data is input. This is all well and good, but there tends to be a lot of code required just to provide some basic validation or input masking.

HTML5 seeks to address this problem by introducing new form input types that allow us to pass the basic validation, and input widgets over to the browser without relying on external scripts. In this tutorial we’re going to use these new inputs to create a responsive design that provides user cues and feedback, along with simple validation, to reduce the need for JavaScript.

tools | tech | trends: JavaScript, HTML5, text editor
expert: Sam Hampton-Smith
download tutorial files

Basic HTML

As ever, we need to start by creating a basic HTML page. We’re using a fully HTML5-compliant document here, and we’ve put in place <header>, <article> and <footer> sections inside our body tag ready for content. Set up a link to an external stylesheet in the head section, and put an <h1> heading inside the header section ready for styling.

Basic CSS

Create your stylesheet document and assign some basic styles for the page. We’ve used a repeating textured background, a little ribbon graphic that repeats for the header and footer sections, and we’ve also installed a Google Web Font to make our heading look a bit fancier. We used Kuler ( to create the colour palette for our page design.

The form

Create a form inside the <article> element. This needs to consist of the opening and closing form tags, as well as a series of form fields and labels. We’ve created five different input fields for data, plus a checkbox and a submit button. Each element has a corresponding <label> associated with it. Add some CSS styles to suit your design.

Form fields

Our input fields are all set to type=”text”, with the exception of the checkbox and submit button. Up until HTML5, if you wanted users to submit text you only had the choice of text or textarea as input types, but we’re going to use a new type for the email field – type=”email”. Put that in place and notice that nothing appears to change upon loading your page.

The required marker

We can let the web browser know that a field is required by adding the required attribute to the <input> tag. Put this in place for any fields that are necessary for your application (we’ve added a required marker to the name and email fields). Now that we’ve got the required marker, we can use some new CSS pseudo classes to apply dynamic styling to these elements.

New CSS pseudo classes

New to CSS with the advent of HTML5 is the ability to target invalid and valid form fields. These pseudo classes are active depending upon the state of a form field – if it meets the required stipulations, fields will be ‘valid’, if not – ‘invalid’. Add some code to your stylesheet to apply different backgrounds to input:valid and input:invalid

Input validation

You’ll notice that if you apply the required marker to the text elements for the First Name and Last Name fields, they become valid as soon as you enter some text. The Email address field only becomes valid once you’ve entered a properly formatted email address. However, this is your web browser applying validation for you – automatically!

Placeholder text

It’s good from a usability point of view to give the person completing the form some cues to help them see what kind of information you’re looking for. The placeholder attribute allows you to show this easily, and placeholder text is automatically styled to show that it’s a hint rather than actual data. Add placeholder=”your hint” attributes to each of your fields.

Other field types

We’re not limited to type=”email” for form fields. Let’s make the date field work for us using the new HTML5 type=”date” field. Again this renders like a normal text field, but depending upon the browser you use you’ll see a browser control for selecting different dates. In Safari we get an up/down arrow that allows us to scroll through dates.

Your number’s up

Similarly we can set the team members field to type=”number”. This restricts entry to a digit only, and the browser will add user controls to help page between numbers automatically. Each of these field types is making it easier for us to control the data that’s entered into the form, and remember that each one is being automatically validated for us.

Set a range

On the number field we want to prevent silly answers such as -1. To set a range of acceptable values we can use the min and max attributes on our <input> field. Add min=”0” and max=”10” to your tag and reload the page to see the effect this has; we can no longer enter a value of 11 or -1 into the field.

More styling

Add further cues to the form to help the user, such as input:focus to highlight the currently selected field. You can also use the input[type=date] syntax to selectively style the individual input types. This is useful for removing styles as well as adding them. Use this syntax to target the submit button with input[type=submit] { … }

CSS animations

Add a final flourish by creating a CSS animation for the scale of the submit button when the user moves their mouse over the top of the button. This helps make the button feel more active to the user, and adds a little panache to our final design to boot. Test in your browser, and don’t forget to use vendor prefixes to target each browser as required.

Next steps

As HTML5 isn’t yet universally supported, you’ll still need to target those pesky older browsers and provide fallback validation using JavaScript. Luckily, older browsers will ignore type=”date”, type=”email” and so on, rendering these fields as regular text input fields. Use the Modernizr script ( to identify and target non-compliant browsers.