So HTML over the years has had multiple versions, the original 1.0, and HTML5 is the latest one and it's actually well-established. And so we tend to use HTML5. HTML5 introduced some new input types and if you go to super old browsers, they're not going to support these, and they all sort of fall back to being type="text". And so there's lots of good examples. I'm just going to show you a little bit about them just to kind of get you started. And so these are new input types, type="color". All right, and so if you didn't have a browser, this would just be a text box here. And you could put in, this is a hex number but this is like a little bit of a UI thing that the browser provides. The browser provides that, if it provides it. So it's not something you have written. It's not something CSS does, it's not something Javascript does. You could write your own Javascript color picker but this is a color picker built into the browser. So if you're on a Mac, this will look different than if you're on Windows or on Linux because whatever you said is make a color picker that's native to the system that's on this. And so you click it and if you're on Apple, it'll look just like the color picker that you use in PowerPoint or whatever. And so you pick a color shows a little square, you pick it and then sends this string back which is the hex value, puts that in and sends that in when you post. Similarly a date, and again you've got to remember these things all fall back to text. So date says, make a date picker that makes sense within the context of an operating system. And it sends back a string based on whatever date you picked, that's in kind of like this year, month, day. But it's this you didn't write that code and it's consistent with what the operating system does for dates which is kind of nice. Email is really just like a text-field except that it has a validation. Number, also is a text field that has validation and these little arrows that go up and down and you can give it a range. Now, and the same thing is for url. Url is another field that basically you're saying I'm expecting this to be a url. These three are all validated in the browser. The way this works is, when you press the submit button, before the form is submitted, it checks this, this, and this to see if the format's right. If the format is wrong, it puts up a little message that you don't control and says," I didn't submit your form". So it doesn't actually go to the browser. And the request response cycle, it stops before it sends the data and makes you finish this. And so it will block you from sending the data until you meet the criterion, says that e-mail is in the right format, numbers right format, url is in the right format. But you inside the server still there's ways for people to bypass this stuff. So you got to be careful so that you've no guarantee that just because you ask it to be a number, doesn't mean you can assume it's a number in the server. So the server does to protect itself from bad data which we are going to talk about in a little bit. And then the last thing to talk about is the fact that if there is something that it doesn't recognize. So flying saucer are is flying, is not a type that's in HTML5. Maybe will be in HTML6 but it's not. It's just like, oh okay, whatever. I don't know what that is going to give you a basic text-field. So yes, it's going to come in with the name saucer. And so, that's the sort of the safety net when they put these things in that they are all on a browser that came before HTML5 and there's code that you can drop in that sort of seams these things in with Javascript. But basically, these are just one form of an option that you have to affect your user experience. So up next we're going to talk about data coming into the server and validating that data and how we might handle that data.
