The HTML5 spec actually began with forms and the Opera and Safari browsers were really the driving force behind it. The list of input types has actually grown over time and at the point of creating this video, there are actually 13 of them. We're not gonna go through every single one of these in this video but I will be going over some of the more common ones here. I can also recommend that you search for the HTML5 input types to learn more about them. The official documentation can be found on the w3 website.

Input types exist to help validate forms more easily. The browser will apply rules to the values supplied to different required input types when the user submits the form. Any values that don't meet the rules will be rejected and the form data just won't be sent. To make a field required, simply add required to its attributes. Because there are so many of these input types with loads of different attributes, some browsers don't actually support them all. When this happens, the browser will just render it as text.

A really useful resource for checking this is caniuse.com. This is used widely across the developer community and it tells you whether different browsers support the search for element, attribute and/or value of property. So if we want to see if I can use the input element with a type of color safely in my webpage, I'd go to caniuse.com, type input types = color in the search box and hit Enter. If I can find what I searched for, it'll display a list of browsers. Green boxes mean that the browser understands the item searched for, a red box means it doesn't and an amber box means it's partially supported. The number in the box relates to the version number of the browser that the box applies to. Let's start off with a standard single-line input field, which is just the input element with a text type like this.

A nice attribute you can use for this is the placeholder attribute. This will create a watermarked text in the input box, which is especially used for things like; usernames and password fields. All I have to do is add in the placeholder attribute and make it equal to some text, and I'll use username for this. And as you can see, we've now got some placeholder text that disappears once the user starts typing.

Okay, so what if the username has to be an email or we just want that input field to be an email address? All we have to do is make the input type = email, and this will make that field require a valid email address to work. Different browsers will deal with this field differently. For instance, mobile device browsers will automatically open up a keyboard that includes; an @ and a full-stop, by default. This data will be rejected if the input is required and the value doesn't include the @ sign with some text either side of it. Next up, let's talk about the autofocus attribute which can be used to select which form field has the cursor in it when the form is first loaded.

To do this, we set autofocus as an attribute with no value. Putting it in the input element is the same as typing autofocus = true, but the = true is not needed by the browser so really, why bother typing it? It's also worth noting that the browser will give focus to the first field in the form that has the autofocus attribute. Another input types is for web addresses. This field is as simple as making the type = URL. The text field now requires a standard shcema prefix in the field, like; http:// or, ftp:// for instance. It would make a lot of sense to use a placeholder attribute here too, so that users know what's expected of them. This field can be useful for profile pages where users can add their own websites to the page if they want. This data will be rejected if the field is required and the value doesn't match the rules for a valid URL.

So, what if you want your user to rate something, say, out of 10? There are loads of ways you could do it. It could be a radio button or a dropdown list but the best way is actually the number input type. This type lets you create number input area with a range, so from one to 10. Here's how it works; first the input tag followed by the type, which is number in this case. Now we need to give it a few attributes to make it work. First, the minimum number we want the user to be able to give, let's say; one.

Okay, now the maximum which will be 10. I can also adjust the steps I want the user to be able to increment in. So if I want them to be able to go in .5, this will be .5 but I think I'll just stick with one for now. So if the user tries to enter, say, 6.5, the browser will give an error. Okay, last up all we need to do is add a value which is the base value the field will default to. Let's go with five as that's the midpoint of the range. Now I can close the tag and it's done. Similar to the number input type, we've got the range input type. This does a pretty similar thing but it actually adds a slider.

The syntax here is almost the same as the number input type in that it has a min, max and value attribute. But it has a different type, off course, and that's just range. It also needs a name attribute. It's often a good idea to provide labels at either end of the slider to let the user know the scale they're sliding along. The date input type lets you add a standard day, month or year option into your form which is great if you need capture user's date of birth or for age verification. This is another simple input type and all you need to do to make it work is type = date and it will work. You can set the default by providing a value in years-months-days format and also min and max values to restrict the values that can be input. Another powerful and basic input you can use on your page is search functionality.

Now I'm not gonna talk about how you actually make this work right now but the basic syntax for adding a search bar into your page is actually quite easy. Aside from changing the type to search, from text, the syntax is exactly the same. In fact, functionally it's exactly the same. It is provided as different browsers may be set to display a search input differently to a text input. To actually link the search function to your site or an external search engine, you'll need to have some complex JavaScript that would analyze the content of your page or site and return the results.

If you ever need to let a user choose a color, you can use the color input type. So imagine you're asking users to customize their profile page for instance. The user can set things like the page background color, title colors and text colors using multiple color inputs. The syntax is simple for it and all we need to do is make the type = color. Note the American spelling of color here as well. It's also good practice to include a label tag here for accessibility. I've added the name attribute so that we can use this information on the server and a value to set the default.

The values are all hexadecimal, the first two characters after the # represent a zero to 255 red slider, the second two; green and the third two; the blue. #00000 is white and #FFFFFF is black. There are plenty of websites out there to help you work out which values relates to which color. Again, to accurately change the background color of the page, we would need some JavaScript to help us out. Moving on now to the final input type I want to deal with in this video, and that's the data list input coupled with the list input type.

This is great for creating an input box that has a whole list of editable, predefined options for the user. Let's say, you want the user to be able to select their favorite browser. So first up, I'll open an input tag and give it a list attribute. Here I'll call the list, browsers.

Next I'll create a data list tag with the ID set to browsers. Then I can add options in like this. Once I'm done, I'll just close the data list tag and now, as you can see, there is an input box that users can manually enter their data into or if they prefer to, they can just select a predefined option and edit it or just move on. And that's it for this video. I know that it was definitely a longer one but there are actually even more input types that we haven't covered in this video. So you should definitely take the time to check these out in other official documentation.

Lectures

• Introduction to Forms
• Text and Push Buttons, and Multi-Line Text Inputs
• Checkbox and Radio Buttons
• List Boxes and Drop Down Lists
• Form Validation
• Submitting Forms, Server Scripting Mechanisms, and Security Issues