Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.8 More Form Elements

In this lesson we explore some more complex/edge-case form elements. We also discuss the importance of form elements for users accessing the site from mobile devices.

3.8 More Form Elements

Welcome back. In the last lesson, I showed you how to help your users pick from a pre-determined set of options, either using check boxes, radio buttons or drop down lists. In this lesson, we'll take a look at some more fringe options that you can use as input types to build up your forms even more. Let's get started. Let's pretend we were building a user log in panel. So, I'm gonna create a label and we're gonna create this for a password input. So we're going to ask for the user's password. And then we're going to do an input but this time the type is going to be password as well. And we'll also tie it back to the label. So we'll set the id of password. We'll save it and come back. And now notice as we go to enter text in this password field, it won't actually show on the webpage. It'll all be dotted out. That's the password input type. But we don't really need a password input type so let's go ahead and hop back to Sublime and clear that out and let's take a look at the reset input type. So I'll go ahead and create an input with type set equal to reset and we'll save it and toggle over and refresh. Now instead of a password box, we have a reset button that allows me to clear the form without actually having to refresh the page. Now let's take a look at how we can add a date picker on the page. It's actually pretty simple. We'll go ahead and just arrow up right in between these breaks and add an input type. And this time we'll just set it equal to date. We'll save that. Toggle back and refresh. And now we have this really cool date picker that's put there automatically by most modern web browsers. Lastly, I'd like to talk about two very important input types that I'm not going to be able to demonstrate for you as I only work on a mobile phone browser. But they are important and are being used quite a bit these days. They're are the email type, and the phone type. Let's take a look at those now. By simply switching this email field right here from the type of text to a type of email, we get some added benefits. The first one is that if our users are accessing our site from a mobile phone, chances are their keyboard will add an additional .com button or .net button to make filling out that email address a lot easier. In some web browsers, it'll also make sure your user is giving you a valid email address before it lets the form be submitted. A very similar feature happens with the phone tag. So, if I do it label and set it for phone and ask for the user's phone number here, then create an input and set that to type of tel, T-E-L. And of course, tie that back to the label by giving it an id of phone. Save this and refresh. We get a phone field, but it looks a little bit squished. So, I'm going to go ahead and hop back here. I'm gonna add a break right before that field, and right after that field, it needs another break. Save that, refresh. Looks a lot better. But the key thing here is that on the desktop, it looks just like any other input type of text. But on a mobile device, it'll actually make the user experience a lot better, by only bringing up the user's phone pad and not an entire keyboard. In this lesson, we looked over some of the lesser known input types for forms, but they're becoming more and more ubiquitous every single day, so it's important for you to learn them. In the next lesson, we'll take a look at proper page structure and the HTML validater. And then we'll start hopping into some HTML5 elements and some new things that, that brings to the table. Thanks for watching.

Back to the top