Learn HTML In Arabic 2021 - #30 - Form Part 7 - Select And Textarea

First element is the Select

Select has options that allow you to select one of these options or two or three as you like What is the benefit of select? Let me say that you are recording and you have a lot of options that are like the country Note with me an important point that everything must understand its own needs Because if you don't understand its own needs, you won't understand it in a large extent Now I have a choice to give you an option or one of three options that you can choose from Which is the operating system Windows, Linux and Mac

So I used them here, if you want one of three, you can use the radio If you want one, you can choose the three, I really worked on three I used the checkbox, great If you asked to choose your country And I wrote for you, for example, 400 countries, for example Or I gave you options, there are 400 options Is it logical to write 400 options on the personal page and it remains until the end of the street to choose from them?

No, it's not logical. What is logical? To have a select. Select is its function. Let's see together, our select is an element for the name, like all these elements. I'll call it, for example, books. These are the books I'm going to buy. I want to use ID for the previous label, no problem at all. This is the label, for, and I'll call it book here, and the ID will be called book. This is the label, I'll write choose book.

Great! Now I'll choose a book, and in the Select, let's see the Select before doing anything. This is the Select, guys. Empty. There are no options at all. Very nice. Let's make it an Option, put HR here, and make it an Option so the person can choose from it.

In the "Select" tab, you can use a tag called "Option" This option asks you for a value and here a text The text is the name of the book Let's say the name of the book is "Book 1" I'll write "Book 1" and I have "Book 2" and "Book 3" I'll show you the idea of this story Who is this value?

Remember when we were writing anything in the fields and we press submit or save to send the data The value you write in the field is copied, right? Right This value is what is copied when you choose from it So this book 1 will be its value for example 123 or any name you want, no problem So when the person chooses something from here and presses save, this value comes to him Let's see together I chose book 3 and I will say save Look, book equals 3, which you chose So I

I send the value in this option, not the text. You have to differentiate between this and that. The text can be written in any text, but this is the value that is sent. This is the most important thing. Great. Ok. I have a lot of books now.

I have many books that are divided into two parts. There are books of science fiction, romance, and police. Can we divide the options in the Select? Yes, we can divide them easily. By what?

Opt Group or Option Group. It's name is Option Group. Let's make our tag. This is the Opt Group. Like this. You put in your options group. That's it. That's it.

Add some more books, add option group and add more books, and that's it Add book 4, add book 5, add book 6, and add value 4, value 5, value 6, and may God bless you, and that's it

I have a question, can I call this option group? Of course you can call it that, look at this, the option group is empty, you don't know what these three are, I want you to divide them, so tell me what these three categories are, what is their category? You will write a label like this, and inside the label, you write romantic, for example, books. And here you write the label, for example,

It's not called police but never mind Here as you can see, romantic box, it's wrongly written in the letter S And here as you can see, police box This is an option group, you can't choose, you choose from these or these Here it's just an organization of the options inside your select Ok, great, this is nice and there's no problem at all Let's try another experiment together

Can a person choose more than one book? Yes, you can. If you allow him to do so by writing here, multiple. Multiple means that a person can choose more than one book. How do you choose them, Tarabos? You have to press Ctrl and then press this. So you chose two books, and these are two books. The multiple allows you to choose more than one book from the input.

Ok, very nice and great and like a full Do we have something to make the person, once he opens the select box, he can choose something from these things? Yes We have something here called selected Do you see what's in selected? Look at it together Book 4, why did you bring me this book 4? Because this is what you made it select, that's it

Why do we choose this option? When you work in a website and you choose your preferences from 20 choices, it's normal that I don't select the first one. It will select the first one. That's why you have this attribute to make the person select the first one.

Next, we have a very cool thing called Text Area. What does it mean? It's an area for writing text. Text Area is the only variable in Input because it has

as you can see, the text area is closed here the name is normal, we will call it subject any of the things we have, no problem the id, because if you have a label before you can write it in it, no problem at all and I will leave it empty and I will tell you what calls and rows do let's see together the text area, this is our text area

A big space where you can write words and resize it And do whatever you want with ease How does this shape come in size? First, you need to be able to write a placeholder here And use the attributes we used, like max lengths and all of that

So there is no problem because you don't feel it's weird. Here, test, text, type whatever you want, there is no problem. If we come to these calls and we leave it 10 instead of 30, what happened? Look guys, the columns that it wants to extend from the right, it decreased. If you say 40 calls, you will find that the columns increased. See, the rows are not the size above 5.

the rows will decrease to half, you see? 20 will increase a lot is this the right way to customize the text area? No. Let me give you a look at the future so you don't get upset with me In the future, when you learn CSS you can tell it the height you want, in this way and the width you want, in this way you won't depend on the attributes in HTML you will depend on CSS to customize

text area and also to coordinate other elements without any problem I hope you liked this simple and easy lesson I will see you in a new lesson and peace be upon you