HTML5 Forms

HTML5 Forms

Form validation has traditionally been handled through Javascript, but HTML5 now has in-build functions for it too.

Any use of Javascript is always going to be relying on users having it in their browser, and sometimes that is not the case. By using HTML5 for form validation you can be more confident of browser support for this important area of Web Development.

List of New HTML5 Form Elements

See below for a list of the new attributes which we will examine here.

  • placeholder
  • autofocus
  • autocomplete
  • required
  • pattern
  • list
  • multiple
  • novalidate
  • formnovalidate
  • form
  • formaction
  • formenctype
  • formmethod
  • formtarget

We have provided simple code examples below of some of our favourite new attributes.

Placeholder

Placeholder is a new attribute for form inputs where you want to add a cue to a user over what to enter. This was previously done with a small Javascript but thankfully HTML5 offers this feature from it’s spec, with a simple placeholder attribute keeping your code tidy.

								
								
                                
							

Autofocus

Autofocus is another HTML attribute which aims to simplify common Front-End tasks by making them part of the standard HTML5 specification.

								
								
                                
							

HTML5 Form Validation

HTML5 brings in form validation directly from the markup as standard.

Regular expressions are generally used for processing most content entered into a form, but HTML5 can make some elements easy to check without hardly any code at all. This is ideal for those occasions where you are looking to setup some forms quickly and without the need for such precise Regular Expressions on the inputted data.

Email Addresses

Simple validation for emails, directly from HTML5.

								
								
                                
							

Web Addresses

Simple validation for web urls, directly from HTML5.

								
								
                                
							

Number Spinboxes

Different browsers will provide alternative solutions to your use of number spinboxes, also dependent on the type of device you are using, be it desktop, tablet or mobile.

								
								
                                
                                
							

Sliders

Sldiers are easy and quick ways for users to enter numeric entries into web forms, HTML5 offers these up through supporting browsers. You may need to consider your users and how familiar they are with such interactions before using them.

								
								
                                
							

Date Pickers

Date Pickers have been used by web developers and designers for a long time and it was this frequent use that made it such an obvious inclusion into the HTML5 specification. All browsers will take these HTML5 standards and produce their own versions of it, with a good level of consistency across most of the major browsers and devices.

								
								
                                
							

Search Boxes

Some browsers will customised inputs into search boxes, given the correct HTML5 markup. Safari is one of the more responsive browsers for this feature.

								
								
                                

Required Fields

Use required to check directly that all required fields have had something entered. You might then use HTML Pattern to check more specifically at what was entered.

								
								
                                
							

Further Reading on HTML5 Forms

Leave a Reply

Your email address will not be published. Required fields are marked *