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.
Color
[html]<input id="color" name="color" type="color">[/html]
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
[html]<input id="date" name="date" type="date">[/html]
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
[html]<input id="departure-day-time" name="departure-day-time" type="date-time">[/html]
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
[html]<input id="arrival-time" name="arrival-time" type="datetime-local">[/html]
This input type is exactly the same ‘datetime’ but it provides you with a particular time within a local time zone.
[html]<input type="email" name="email" id="email">[/html]
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
[html]<input id="expiry" name="expiry" type="month">[/html]
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
[html]<input type="number" min="48" max="84" step="0.5" value="48" name="height-inches">[/html]
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
[html]<input type="range" min="1" max="100" value="0" id="happiness">[/html]
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
[html]<input type="text" name="search" id="search">[/html]
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
[html]<input type="tel" name="tel" id="tel">[/html]
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
[html]<input name="start-time" id="start-time" type="time">[/html]
This input type will allow the users to select a specific time only, such as hours and minutes.
Url
[html]<input type="url" name="url" id="url">[/html]
This input will look for syntax of a url address and on a smartphone open the url keyboard.
Week
[html]<input id="conference" name=" conference " type="week">[/html]
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
[html]<input type="text" name="fullname" id="fullname" autocomplete="on">[/html]
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
[html]<input type="text" name="username" id="username" autofocus>[/html]
Adding this to an input will put focus on that field on page load so that the user can just start typing away.
Form
[html]<input type="button" name="filter" form="filter">[/html]
Form is associated with being the overall form owner where the element does not have to be within an associated form to be part of it.
Formaction
[html]<input type="submit" value="Send" formaction="email.php">[html]
Specifies a file that the form will be submitted to.
<h3>Formenctype</h3>
[html]<input type="submit" value="Send" formenctype="application/x-www-form-urlencoded">[/html]
This attribute can only be attached to a submitting button where it defines how the data will be encrypted via the POST method.
Formnovalidate
[html]<form action="login.php">
<label for="name">Full name:</label>
<input type="text" name="name" value="John Doe">
<input type="submit" formnovalidate value="Send">
</form>[html]
Indicates that the form should not be validated when submitted, can be set on any input type.
<h3>Formmethod</h3>
[html]<input type="submit" value="Send" formmethod="POST">[/html]
Specifies which HTTP method to use to submit a form, such as POST or GET.
Formtarget
[html]<input type="submit" value="Send" formtarget="_self">[/html]
If you would like to use a new window for the form submission/results you need to define the target window.
List & Multiple
[html]<label>My favourite color is:
<datalist id=" colors">
<select name=" colors">
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Green</option>
<!– … –>
</select>
If other, please specify:
</datalist>
<input type="text" name="color" list="colors" multiple>
</label>[/html]
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
[html]<form action="login.php" novalidate>
<label for="name">Full name:</label>
<input type="text" name="name" value="John Doe">
<input type="submit" value="Send">
</form>[/html]
Indicates that the form should not be validated when submitted, and is set only at the form element.
Pattern
[html]<input pattern="[0-9]{5}" name="zip" type="text" title="Zipcode">[/html]
Pattern basically means you can define a regular expression with the HTML mark up of the input and not in JS.
Placeholder
[html]<input type=" password " name="password" id=" password " placeholder="Enter your password here">[/html]
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
[html]<input type="text" name="username" id="username" required>[/html]
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!
