Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our form, we have a number of different elements. So let's go ahead and bring this us up in the browser, and I am going to start by bringing it up in Chrome so you can see what all of these are supposed to look like, because it actually implements all of these. And I am also going to bring it up in Firefox, so you can see what it looks like there where a lot of these elements are not implemented. Most of these elements are implemented with the input tag, and the input tag in HTML is overloaded with a lot of different types of form elements.
The default is text, and so if I actually take this out and save this and just say input name ="text1" autofocus, and I reload this in my browser, you see I still have that text element. So what's interesting about that fact is that for one of these elements, like for instance the date element, which is supported in Chrome, but not in Firefox, is that it simply defaults to a regular text element, and I can type whatever I want in there.
So the default is type="text" and if you put in a type that is not supported, the standard says you're supposed to default to text--and that's exactly what every browser I've ever seen does. And so with all of these different types that are--new, date, color, email, number, range, search--it just defaults to text. So most of these are not supported in Firefox, so they just come up as text elements. Each of these has a name, and you can also give it a value.
Now I've done a few things here. Type="date" has a datepicker and so in Google Chrome, I can actually--there is the month, so I can select a different month from the dropdown. It's got this whole datepicker thing; here's different years. And I select one, and there is February 11, 2015. Notice that it's formatting it according to the locale in my system setting for my computer, so it will do that. Actually, on my laptop, I've changed the setting for this so it shows year, month, day because I am a programmer, and I like to be really specific, and this to me is really vague.
If you're in Europe, it will probably be month, day, year as opposed to day, month, year, how we have here. But on Firefox you will notice that it just comes out as a regular text field, because Firefox doesn't support that. So this gives me an opportunity to show you another feature. If I type something in here that is not a date and I submit it, you notice that I get a little error that says, "Please match the requested format: YYYY-MM-DD," and that's because here in the code, I've put in this pattern. Pattern is a new attribute in HTML5 that allows you to use a regular expression to give it a pattern for what sort of input is expected, and then the validation API will actually check it against that pattern.
And I use the title attribute so that I have a little tooltip that says this is the format that's expected there. So now if I type in an actual date, you notice that as soon as that is matching, that the little red outline goes away. If I put in too many then I get the red outline again, and when I enter that I now get the valid. So it makes the validation easier is all that that is. That's just an interface to the validation API. Next up is the color element, and so we have type="color", name="color1", and I gave it a value here for a starting color.
And so when I bring this up in Google Chrome and I reload, you notice that that bluish color, that's the color that I specified here, 369 in hex. And if I change this and I like this little reddish color there and now when I submit the form--press the Big Red Button--you notice that our color is aa1723. That's the color that I selected from the color picker. And of course on whatever platform you're testing this on, your color picker will be different. That's the Mac color picker, so it's just interfacing into the operating system to get whatever color picker is available there.
The email element, this actually works on both of these platforms. If I type something in here that is not an email address, I will get a little error. It's just a validation thing. It says, "Please enter a comma-separated list of email addresses." And you'll notice that I have here the multiple attribute. If I take that out and I save and I reload over here and I type in an invalid email address, it will say, "Please enter an email address." If I try to enter actually a valid email address, because X is a valid domain--it's just isn't one that actually exists on the Internet, but it could exist on my local network.
I could set up a local DNS server and make that work. And so that's a valid email address, and that validates. If I put in here ,y@y, that's not a valid email address. But if I come back here and put back in the multiple attribute, now that's accepted. If I reload here and say x@x, y@y, it now validates. And you notice it even took out the space, and that's making it easier for my remote process to parse that. Next up is the number type. This has a number and I gave it min="1" max="5" value="1".
And that gives me a little number chooser here on Google Chrome. And on Firefox it's just a text field, and it doesn't validate as number, and I can put in Xs here and it validates just fine. That's not implemented in Firefox. And this number chooser, you notice that it implements my minimum and maximum. It won't let me go below one, and it won't let me go above 5. Likewise, the range, this is the range type, and it gives me this range chooser here, and you notice that it's in steps of 10. I have min="0" max="100" step="10" value="20".
That range element is also not implemented in Firefox. The search element is really just like a text field, only it's formatted to look like a search box. So if I type something in here, it's formatted according to whatever the operating system has for a search box widget. It's even got that little X there for deleting what's there. And that's implemented in Chrome, and it's not implemented in Firefox at all. The URL element is just like a textbox, only it validates as a URL.
So if I just put in foo bar baz, it'll say Please enter a URL. So I have to put in a valid URL. I can say this is my website and it will accept that. Or actually any valid URL-- which of course even x:x is a valid URL. And this also is implemented in Firefox. So if I say foo bar baz, this is easy to implement because it's just a validation routine. And again, x:x. And the HTML specification even gives an algorithm for validating this stuff, so it makes it really easy.
And finally, text area, this is an element that's been around since the very beginning, and so of course it's implemented equally everywhere. foo bar baz, and I can just paste a bunch of those in, and it goes on and on and on, and I can press the Big Red Button. I got this big bunch of text there. And that's what the text area is for, and that works just exactly the same in pretty much any browser. They are formatted a little differently here. You notice that in Chrome it's got the same font as the rest of the elements. In Firefox this is an old tradition.
These used to always be formatted as monospace text. And so Firefox still does that for traditional reasons. You are going to want to style all of this stuff in real life. So those are the text elements. There are actually a lot more of them, and not all of them are implemented yet in any of the browsers I've tested, and some of them only work in a limited number of browsers. So I would consider most of these new ones to be experimental, with the exception of text, password, and text area. If you need your forms to work well in a variety of environments, I suggest you test it well or limit yourself to just the text and password and text area elements and perhaps the email element for now.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97212 Viewers
61 Video lessons · 84503 Viewers
71 Video lessons · 68706 Viewers
56 Video lessons · 101188 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.