What New and Helpful Things Have HTML5 Forms Brought Us?

Forms have never been that exciting if anything they have been tedious and difficult. But, with HTML5 in play for a while now we have been given amazing new input types and form attributes. Here is a quick post that will go over thirteen new input types, as well as fourteen new form, attributes that you should be very well familiarized with in a simple definition based format.

What New and Helpful Things Have HTML5 Forms Brought Us?

New Input Types

With HTML5, we were introduced to thirteen new input types. I will briefly go over each and every one of those with you below so that you have a good idea what they all do.

Color

This input type is very simple to comprehend: it provides a colour picker for the user which generates a hex value. The colour picker will be native to the operating system or the browser in use, as most inputs are.

Date

The date input will allow you to select a date from a dropdown – think of what you see when you are trying to book a flight online. As you will see in the later examples, you can get very specific when it comes to defining dates and times.

Date-time

If you want a user to simultaneously pick a date and time for something, such as preferred flight departure the ‘date-time’ is the input type for you.

Datetime-local

This input type is exactly the same ‘datetime’ but it provides you with a particular time within a local time zone.

Email

This input type will specifically look for an email address when someone enters it without you having to create a regular expression in JS or PHP to validate it. On smartphones it will bring up the email specific keyboard.

Month

This input field will allow you to pick out a month of the year; this is very handy for credit card information like in a checkout form.

Number

The number input will only take in, you guessed it, a number. You can provide a range for the users if you use min and max attributes like in the example above as well as increments within the range for the user to choose form.

Range

With a range input expect a slider where the user gets to pinpoint somewhere in the middle of it. It is a more precise number selector.

Search

Do not assume that this field will act like a site or internet search. What this input type does is allow the user to use it like a search field on a desktop a ‘x’ will appear to clear the typed value. You still need to hook it up to do the searching.

Tel

This input type comes in very handy on smartphones as it pulls up the numerical phone keyboard so that you can enter your phone number with ease. It does not however, enforce syntax unlike email or url.

Time

This input type will allow the users to select a specific time only, such as hours and minutes.

Url

This input will look for syntax of a url address and on a smartphone open the url keyboard.

Week

Now, just like all the other time specifying inputs the week input allows the user to select a specific week as a whole.

New Form Attributes

Now that the new input types are defined let’s see which new attributes can be used in harmony with them or the previously existing inputs. There is a total of fourteen new attributes, so let’s take a look at all of them right now.

Autocomplete

This attribute helps users fill in an input based on previous entries; it can either save time or cause trouble so tread lightly with this one.

Autofocus

Adding this to an input will put focus on that field on page load so that the user can just start typing away.

Form

Specifies a file that the form will be submitted to.

Formenctype

This attribute can only be attached to a submitting button where it defines how the data will be encrypted via the POST method.

Formnovalidate

Indicates that the form should not be validated when submitted, can be set on any input type.

Formmethod

Specifies which HTTP method to use to submit a form, such as POST or GET.

Formtarget

If you would like to use a new window for the form submission/results you need to define the target window.

List & Multiple

List allows a user to associate a literal list of option to a particular field, like suggestions. At the same time, multiple allows for more than one value to be entered.

Novalidate

Indicates that the form should not be validated when submitted, and is set only at the form element.

Pattern

Pattern basically means you can define a regular expression with the HTML mark up of the input and not in JS.

Placeholder

Placeholder usually is a light gray text that is found in an input – mostly for some type of hint – until the input is in focus. It is not the same as ‘value’.

Required

As you can imagine, when you add a ‘required’ attribute to an input the page will not let you proceed until the required inputs are filled in. No JS needed.

Conclusion

I do hope that going over each one of these various new input types and new form attributes has been helpful in explaining to you what new and great tools we developers have in our arsenals. It is crazy and magnificent what we can now accomplish with little extra code. I also hope that you will embrace and use what you have discovered in this post as well!