Now we have some new form elements and there are

This preview shows page 15 - 18 out of 45 pages.

Now we have some new form elements and there are three big ones. I’m not going to go through them in details because it could get a little advanced. And I don't see where I can fit them into the project. But first we have a data list tag or the data list form element, and it specifies a list of predefined options for an input element. Now, this is different than a select tag or select list. And a drop- down or a pop-up any indeed select one. This is different. This is an actual regular text field and as you type it’s used as an autocomplete. So if you have
a certain value in the list, and they start typing, then they pop-up like saying, I don’t know - say it was a location input and you typed B. If we had Boston in the list of options then Boston would pop up and they could select it without having to type the rest. So, pretty cool, it uses the input elements list attribute to bind it together with the data list. It’s kind of hard to explain, but I’m going to show you in the next section, in the programming part of this section how this works. Actually, I can show you right here. This is an example. So we have an input list. We use the list element attributes of browsers, and then we have a data list with the ID of browsers. And then we have our options. So if in this text, someone types you know the type it fir, then Firefox will pop-up. So it's just it's an autocomplete. You know it’s used for simplicity and just to make things easier for the user. Next, we have the keygen form element which is pretty advanced. It’s a way to authenticate users. You know client side way to authenticate users. You probably want to use something else as well maybe some PHP or some server- side programming. But it specifies the key pair generator field in a form. When the form is submitted, two keys are generated - one is private, and one is public. And then the private key is stored locally and the public key is sent to the server. So it does have some server activity. I haven’t used this yet. It looks pretty neat, but it kind of looks a little advanced. Here we have an example. We have a form going to a demo.php file using a GET method. So you have a user, we have a text field, we have the name, and we have encryption with a keygen tag and the name security. And then the submit button. So I'm not going to get too deep into that. The next thing we have is the output tag which performs the calculation, and it would show the result in an output element, and here we have an example of that. You know it's a little complex. We have the oninput, add with it some little JavaScript, and you provide the range. I'm not going to have an example for this in this section, but we might revisit this in chapter 4 or 5.
So that's the gist of it - all the really cool input types. And now we're going to get into our project. I’m going to go to the Blue Developer Directory Project and transfer our current form into an HTML5 form.

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture