Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
26th September 2012

Responsive HTML5 forms

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

Responsive HTML5 forms

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

Responsive HTML5 forms
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
Responsive HTML5 forms

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 (kuler.adobe.com) to create the colour palette for our page design.

The form
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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
Responsive HTML5 forms

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 (modernizr.com) to identify and target non-compliant browsers.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://craigwebbart.com @cwebba1

      Your link to the demo for this seems to be broken. It brings me to a “Tutorial Files Archive” page with no indication of where to go from there. Using the search to find “Responsive HTML5 forms” yields nothing. This tutorial looks very interesting but without access to the demo file it is useless.

      You may need to re-think your UX and incorporate the code into the tutorial itself.

      However, the “Tutorial Files Archive” page does lead to the possibility of finding lots of useful information, albeit randomly. Thank you therefore for your efforts. Please email a direct link to the demo files for “Responsive HTML5 forms” to me if you have a chance. I am still interested in learning this. Best, -@cwebba1

    • rockt
    • http://themeshive.com Avinash

      Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsivetools. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

    • http://chime.me chime

      This is not responsive at all.

    • Pingback: HTML5 Form Tutorials

    • http://cybertechdesign.blogspot.in/ gobind

      new css and jquery tricks cybertechdesign.blogspot.in

    • Avijit Kumar

      how to search which issue number is this??

      seriously it is very confusing..u should give tutorial number or issue number right here !!!

    • Nic

      Such a pretty SHITTY website , absolutly endless loading,….and bad architectural information….very sad for a web magazine…