[MUSIC] Hi and welcome to our continuing discussion of HTML forms. In our last lesson, we talked about some of the basic elements for forms. And we'll add a few more this time. So this is the final like the one we were looking at the last lesson. The HTML form tag starts on line 14 and now ends on line 39 because I've added some additional input elements. And I think last time we stopped our discussion at the point of the radio buttons. And recall that each input has a type. So our first two are type text. Our third one here, user password, starting on line 19 and going through 20 is type password which causes that text to be obscured when the user is typing it so no one can see their password. We've got radio buttons that are connected together by having the same name. So this set of three radio buttons are connected because they all have the name food. And our new inputs here starting on line 26 and going through 27 are checkboxes. We'll see these here. Just a moment. So, our checkboxes here are all radio buttons. And notice that when we click these, we only can click one in this family of three. But for the checkboxes, their shape is slightly different and when we click them we can click both of them, only one, or none if we prefer. And of course clicking checks or unchecks the box. And you can gave as many checkboxes as you like. When you do this and your form is sent to the server, which as I mentioned in our last lesson we will be doing in this class, you can say to the server what the user has checked. So for instance, the value of the input on line 26 would be HTML, and the value of the input on line 27 would be JavaScript. Now, in this case I'm imagining these checkboxes are for developer to tell us what he or she already knows. So for instance, I know HTML and I know JavaScript. And if you're trying to clock that information, you could do so by finding out which values came through on the form. So our next input, starting on line 29 and going through 30, is similar to text. But in this case, we're only going to be picking numbers. So, if we go back to our form here, we've got the little label message quarterly between one and five and if we mouse over this, you'll notice that again, quarter miles away that disappears when this over. We got a little spinner here that allows us to put in the number and notice that it's not going above five. Or below one and our message is quantity between 1 and 5 and the way we're enforcing that is by on line 30. We are giving this a min of one and a max of five. I've already changed this and say code eight to eight. There we go and save it. We can go back to our page and refresh it, and now, we'll be able to go up to eight, but it will stop at eight. Now notice also, we saw this in our previous lesson, if I take letters, which I'm doing now, I get no input to that field. So this is restricted to numbers, and we can also restrict it to range, the user can select or take. Now, if we don't want to supply the min and max here, we don't have to. We can just leave it open for the user to give whatever number they would like. So, moving on to our next two. We have a date input and this is also new in HTML5. And if we go to our page, we have the birthday label and we have a clue about the format we should be using. And if we click here, depending on the browser, you'll get a calendar. Now different browsers implement how the calendar portion will work. But kind of predictably, if we click here, we'll get the date we expected. Now, alternatively, we can type in the data if we want to or we can try using, The spinner here to just change the individual numbers. And notice that we can do that and then click on the year, and then get 2016. So February 27, 2016, if want to do it that way. Or we can go back to the calendar and choose it that way. So that gives us some idea of how a date could work. Now alternatively you could use a text field and just let the person type in a date. But sometimes people type in dates with a bad format. And that becomes more difficult. So it's usually just a nice feature for them to be able to choose from a calendar. And then our last element this time is color selection. Now, this one is fairly specialized. You probably won't need it very often, but for instance, you might want to allow your users to choose colors for some purpose. Maybe the color of the page they're going to be using or color for some other reason. And if you want to do that you can click this we'll get what we call a color dialogue box and we can choose one of the many colors here, we'll choose maybe this one, and say OK. And notice here it changes to this color, and now when the form was submitted you will get information about the color that was selected so I mentioned last time that we wont actually be submitting our forms and I want now that I made a change here on number 16, for our first input field which was text for first name and I added the word required here. Now what this will do as I made tunnel five is make this field required. So if I go back here even though we aren't going to actually submit to the server. When I click this notice that I'm getting a complaint from the browser saying please fill out this field. So it's a way that we can specify in our HTML which of the fields are required. Now, this isn't the only way to make a field required. We have many other options. But this is probably one of the easiest ways. And you can decide whether it meets your needs when you're working on your HTML forms. So, that's all for this lesson. And in our next lesson, we will continue our discussion of HTML forms and validating them using JavaScript.
