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.
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.
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.
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.
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.
This input type is exactly the same ‘datetime’ but it provides you with a particular time within a local time zone.
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.
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.
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.
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.
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.
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.
This input type will allow the users to select a specific time only, such as hours and minutes.
This input will look for syntax of a url address and on a smartphone open the url keyboard.
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.
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.
Adding this to an input will put focus on that field on page load so that the user can just start typing away.
Specifies a file that the form will be submitted to.
This attribute can only be attached to a submitting button where it defines how the data will be encrypted via the POST method.
Indicates that the form should not be validated when submitted, can be set on any input type.
Specifies which HTTP method to use to submit a form, such as POST or GET.
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.
Indicates that the form should not be validated when submitted, and is set only at the form element.
Pattern basically means you can define a regular expression with the HTML mark up of the input and not in JS.
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’.
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.
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!