29. HTML – New Form Elements – HTML5 Form Elements

29. HTML – New Form Elements – HTML5 Form Elements


Hello everyone and welcome back. In today’s video we will explore different form elements including the new ones added an extremely exciting. These are all the fun elements the highlighted ones are the newly introduced and extreme looks like we have used a lot of these elements already in this video we will learn about the data list elements. So let’s talk about this data list element so it is like a combination of dropdown and autocomplete text box. It shows solutions from a predefined list of options. Let’s try an example to understand it better. All right. So let’s create our own element here from inside this we need the input element now to create a data list. We need to pass the list. So let’s create a Nicholas. So to create a data list we can use the rebellious element simply to list let’s give it an idea let’s say technology. So let’s create a list of some tools and technologies like astigmatism and stuff. Now two other options we can use another form element called option. So let’s use that it doesn’t need to closing tag so let’s move this although it doesn’t need a value. So let’s say it’s GMO. First let’s are just three to three. All right so let’s say it’s generals who uses javascript. Now we need to pass the idea of this data list to an input element. So here that goes though it is to disclose technologies and let’s give a name to input element. So let’s say technology let’s save it let’s run my life so and now as you can see we’ve got this little input box. When I click on the dropdown so it shows me a list of all the options. But if I type something to Gibbs Give me solutions accordingly. So it is like a combination of dropdown and order complete text box. Let’s add some more options here. Let’s say Java C++ get Riad read out say Armadillo by 10 hp see Django. Oh let’s just keep these money for now so coming about here and now when I click on the dropdown I can see a list of all these options that I’ve defined. So if I just click on it it gets added. Let’s say I want to search so I can just do my turn. Or if I want to search Java I can just write and it gives me options based on the search string the dog and that’s also the device. If there’s something that you do not understand feel free to drop a comment and we will discuss it. See you in the next video by Andy.