From the course: Building Great Forms with HTML and CSS

New input types

From the course: Building Great Forms with HTML and CSS

Start my 1-month free trial

New input types

“

- [Instructor] Traditionally, the type attribute defines which type of input control to display and, depending on which type is included, provides for some validation in supporting browsers. As of HTML5, we have a lot more input types that we can utilize in our forms, and they can greatly enhance the user experience. Let's look at some of these. We'll start off with the tried-and-true form inputs. The first one is text, and this will display a single-line text field. If the type is set to text or if an attribute is not specified, this will be the default setting. We've already looked at some of these text fields in some of our other examples. The next one that we're going to look at is our input type of checkbox. Checkboxes are similar to radio buttons, but it gives you the option of selecting one or more choices. This is in comparison to radio buttons, which only allow you to select one item. So when you select on one, the other one gets turned off. We can also set the input type to image. When we do this, this will allow the developer to create a graphical button. You can use JPEGs, PNGs, SVG, or GIFs. If you set your input type to file, you can actually allow the user to select one or more files from your computer. They could select something as audio, images, video, PDF files, any sort of file that may exist on their computer, and then they can upload it to the database. We also can create inputs that will create a button. This is going to allow us to display a button with no default behavior. Generally, when you use a button in this manner, you'll have the behavior be controlled via JavaScript. We can make an input and set the type to submit. This is going to go ahead and ensure that this button will submit the form. In addition to that, we have a reset button which will reset the form. We have the input type of password, and all password does by default is it's going to obscure what the user types into that field. So it provides the user with a way of submitting hidden name-value pairs to the server. And then, finally, we have the input type of hidden. Hidden is a control that is not displayed to the user. It provides a way of submitting hidden name-value pairs to the server. The next set of inputs that we're going to look at are new to HTML5. The first input is the type of email. This is going to provide a single line of text for entering an email address. It will accept a single valid email address, or you can program it to accept multiple, comma-separated email addresses if the multiple attribute is present. When we use this field, we don't really see any difference from a standard text field. The real difference is going to show up on a mobile device, where an email-friendly keyboard is going to be displayed instead of the regular keyboard. This can greatly enhance the usability for our mobile users. The same is true for the input type of url. It's going to expect a web address to be inputted, and it will change the keyboard on a mobile device to be a URL-friendly keyboard. When we set the type to tel, this is going to allow the user to enter a telephone number into the device. And, once again, if we're on a mobile device, it will display our numeric keypad instead of the regular character-based keypad. The search type is going to allow us to search for something, and what it does is, once you've typed something, it provides an easy way for the user to get rid of that text by adding the little x so that you can eliminate that text from the field. The color type allows the user to be able to pick a color with a color picker. So this could be helpful in certain scenarios. Then we have the input type for number. The number input type is going to allow the user to be able to enter a numeric value, and they could actually type the value, or they can use the little up and down arrows to increase or decrease the value. On a numeric keyboard or devices that have dynamic touch, the keyboard will change as well. The next field that we're going to look at is the date field. The date type is going to allow the user to be able to input a date, and if they click the little downward-pointing arrow, they will actually see a calendar where they can select a specific date. If we go ahead and change the type field to datetime-local, this is going to allow the user to not only select the date, but also enter a time. Time is going to provide the user the ability to enter a specific time on their keyboard. If we change the type to week, we can actually select a whole week within the calendar. So it's going to open up the calendar and allow you to select a week range, and it will put the first day of that particular week. The month field is similar in that it will allow you to select an entire month. You can see, once I choose the month, it will only display the month and the year. And, finally, the range is for imprecise numeric input. It allows you to have slider control. The default range is zero, and the maximum default range is 100, but you can set these restrictions to be any number using the min, max, and step attributes. Many of the above-mentioned attributes will greatly enhance the user experience on mobile devices. By specifying the correct type, the keyboard is going to switch and display all numbers or a keyboard that allows you to input an email or URL without having to switch to a different keyboard. These are small things, but they can greatly enhance the experience for your end users.

Contents