Learn HTML In Arabic 2021 - #29 - Form Part 6 - Radio And Checkbox

Bismillah ar-Rahman ar-Raheem wa salatu wa salamu ala ashraf al-mursaleen Sayyidina Muhammad Today, inshallah, we will deal with two of the great inputs, which are the radio and the checkbox

Let me tell you that in any website you register in, there are times that a website asks you for information about you and tells you that it wants information about the operating system you are working with. And it gives you Windows, Linux, Mac, and tells you to choose from them. So you choose one of the three. In other websites, when you come to subscribe, it tells you that it wants to see your hobbies and gives you, for example, 20 or 30 hobbies and teaches you about one of them.

The first one is the radio, it chooses one of a set of things The checkbox is the list of options, it chooses more than one thing at the same time To tell them that these are the things I'm working on

The first example I told you about is if someone told you which country you live in and gave you 5 countries, it would be logical that you don't live in 2 countries at the same time. So you choose one of the 5. But someone might come and tell you what languages ​​you know, so it is very important that you know 5 or 6 languages, so you will definitely choose more than them.

Here is the checkbox and in the first example, the radio. Let's do it together. Here is the line and we start to make our checkbox because this is a very, very, very nice thing.

Let's see what the checkbox is doing First, we want to create the first example for the radio and see if someone wants to know if you are working on a operating system called what I mean, we have three operating systems right now We have Windows, Linux and Mac Each of them will be in a div There is the checkbox or the part you choose from it and the label they know for you

Let's see how it looks like This is InputTypeRadio And its name will be OS This is the name of the operating system And its value will be the operating system name What is its name? Windows

Great, if you go and make this radio alone like this, you will find a better option, there is nothing from it, let's zoom in like this, it is not clear what this is, of course, you have to put a label next to it to let us know what this is, let's do it once, what is it between them so that they are not attached to each other, great, where is the label that tells me who is this brother, the first thing you will notice is that the label of the input type radio and the checkbox is after the previous series, why after the series?

I will show you what will happen if we did it before the field This is our label that we are doing in all fields

Our choice is called Windows, great, look what happened Have you ever seen the Windows or the label here and the choice after it? No, you always find the choice before it, so the label must be under it like this This is the first one we have, guys, we have another one from Windows, of course, as we agreed, we have another one, this is the second and this is the third You have here Windows and here you have Linux and its value will also be

Next, you have Mac, which is before Macintosh. Here, too, you have Mac. The three will be in front of you, and you will choose from them what you want. This, or this, or this. Let's go together and choose some data quickly from which we will write it, and choose one of them, which is Mac, and tell it

save here we need a big password save here you see guys the OS equals MAC operating system so this is one of the options we chose and everything is fine and we don't have any problem at all

This is a great and simple thing, and I don't see any complications, thank God. There is a new attribute that we will learn, and it is very cool. What is it called? Checked. What does checked do? It makes you, as soon as you open the page, there is one of these options, which is checked. What do you think, guys? Until the lesson is over, let's just go to

Simply, we don't need to worry about all these things to keep them for ourselves and we can be comfortable with the radio and the checkbox. What do you think guys? I agree. Let's see together. Let's go down a little bit and see who among them is the one who checks. Of course, Windows is the most common thing people use, so we will write here

check it, like this, ok? let's see what happens when I refresh it it checked on Windows automatically, so you can say it checked but that doesn't mean we can choose anything else, no problem I say save, I choose Mac, I choose Linux, no problem great, all is good, like before ok, someone can take care of something

You will say that you didn't notice anything Let's see an important point here If you go to any of the checkboxes that have the radio You will find that the person is clicking on the word not here When he clicks on the word nothing happens Because this label is not connected to this field at all They must be linked together to be able to click on this word You go and check here as if you clicked here exactly It's very good

here it will bring us back to the label with its input not only this label but this one and this one and all these labels ok, let's do it together, just one

and leave the number we need to try the same experiment so we have the number and these three how do we connect the label with its input? by using something called ID ID is the identifier this attribute is made like the class when we enter CSS we will learn it in detail but we understood in HTML what attribute means, nice

here you have the windows label if you made an id equal to it and write the name you like, don't let anyone tell you that name you like any name you like, hopefully the letter w

and write win here, that's it. How do you know that this label is related to this id? By the attribute called for. Look at the name in English. Label for win. Look at it, go to it in English, away from HTML, programming, design, description, and all that. Label for win. Label for id win. That's it, it's related to this. If you click on it now, on Windows, let's leave it here for now. Look at what happens when I click on Windows.

I can connect this label to the input by ID but I don't want to confuse you if you write ID here and you say for ID you will find that if you click on this window it will open for you this is an advanced experiment you don't want to enter it now let's go to Linux ID equals

and then you can choose the language you want to use

the same thing exactly, that's great, now we will do the experiment here, we will see what it will do, label for num, and we will do in the input id

Let's see what's in the number. You can write anything. When you click on the number, it will let you write. See? Because this label is connected here. When you click here, it will let you write. It's like you focused on the field. Great. Let's go back to the deep space. And let's go back to the

the checkbox, nice, now we understand the idea I want to tell you that the checkbox doesn't need an explanation the same thing we did, exactly exactly exactly I will take a copy from it and I will show you the difference between them very very simple very very simple the first thing I need to tell you

that the ID cannot be repeated on the page. This ID is called "Identifier" It's like your card number. You can't have two in Egypt with the same card number. The ID must be changed. So I'll write this as "Win1 Win1" and this as "Lin1" and this as "Lin1" just to change the names. Like this. And the rule is to change its type from "Radio" to "Checkbox". That's it. And may God bless you.

and the checked one, there is no problem at all, keep it as it is let's see the difference of the fields in the shape first, do you see the shape? the correct sign means that there is multiple check, I can check this and this together this is a radio, one of them must be chosen, do you see guys? but this is very normal, either you choose the three or you don't choose at all, there is no problem at all do you see? there is no difference between them at all, so anything

I only changed the ID and the type of the input to the checkbox So I can choose more than one So one of us choose one or more option And one the only option When you get an idea in your project, you see if this idea needs someone to choose more than one Or he must choose one and accordingly you put the appropriate input

Our Inputs with the practical experiments and applications that you will take in the future are available in the channel. The applications will make you understand these things better. Here you understood the basics and the idea, but with the practical applications you will do a very good job. I hope you liked the lesson. See you in a new lesson.