Learn HTML In Arabic 2021 - #32 - Form Part 9 - Data List, Novalidate, Target

In the name of God, the Most Gracious, the Most Merciful, and the blessings and peace be upon the messengers of God, our master Muhammad. Today, we will close the oven together, we talked about it a lot, and thank God we covered the biggest part that you need to use in your life, by the will of God. At the end of the course, there will be a guide from which you can see everything that is related to the oven. There are many things that you will not use in the end, but there is no objection if you look at it.

Let's start with the first attribute in the form which is useful for testing Let's say you have a form with many inputs and it has a lot of validation The person to submit, he fills the data little by little to submit and the form is passed

If he didn't do that, he would have added the password here and here and write this and the password, I don't know who and who to see what he wants. But if we add our cool attribute, it's called no validate. What does it do? I don't need to explain the whole thing. No validate. It doesn't do validate

to the fields of the form. So, the form is in front of you without filling it, you tell it submit, it sends it. Here, you do this in the testing stage to see if the response you're waiting for is there or not, without filling all the data. So, without any validation. Okay.

we have another cool attribute called target, the exact same idea we did in the link lesson when you put a target blank, the link opens a new page here is the same story before anything else, when we submitted the form, all the data you wrote went away because the page was refreshed here the topic is different, what does target blank do? it submits the data, it sends the data but it opens the page where you sent the data in a new place or in a new tab

Let's make the first one target blank and go back to our page and write some things here and tell it submit It opened a new page as you can see and it leaves the page that I have all the data in it because if I make a test of a specific thing, not every bit of data disappears and I can write it again So the target is very important in this story and in this testing stage if you want to try it

Let's not worry about all these elements because we have a nice element, Input, like Select, but there are some more beautiful things. Let's take this with them, like this. And let's start making our element. Our element is DataList. Input, as you can see, but you won't write its type. You will say InputList and give it a name. I will call it, for example,

Programming, which is the programming languages I will make a list of the programming languages that I want to learn and I will show you the difference between them and the normal select The name is exactly the same as the name you want to make, for example, this is the name that when you choose something, it will be sent, just like the other data

To create this list, I will link it to a programing called attribute list This is the list I will create The tag is called data list Inside the data list, there is the same option in the select option But it doesn't have a lock

In the option of select, we were writing the value and here the text of the option you want to use. Here you only need to write the value. I want to have a set of programming languages and these languages for example, I will start to choose from them some languages or I will start to choose from them a specific language. For example, PHP, Python, C#, then C, then C++, and so on. And then maybe the last language so you don't get upset.

For example, this is my list, so I can know how to connect this list or the data list with this input by ID. ID equals the same name you made in this list. This is how you made the data list. Let's look at the data list together.

This is our data list, you open it like this and choose from it what you want Exactly the same as you did in the select, so what's the difference here? I was selecting and selecting and everything is fine Here, no, you can search in this data list If you write the letter C, look, it brought me everything that has the letter C Not the letter C or the letter, but any word that has the letter C If I wrote for example B, it will bring me the Python and PHP At that time, I can choose what I want, like this

Then you can send the data to it in a Python-like way The data list is made like the select, but it has a very nice feature that allows you to search If you have 1000 countries written here, and you need to put the letter "E" It will tell you Egypt, Ethiopia, and all these countries, and it will tell you what you want But in the select, you can do this and go down until you reach your choice

So, we finished the last attributes in the form and learned the data list. I hope you liked the lesson. See you in a new lesson. Goodbye.