How to Create a Radio Button in HTML (Complete+Image)

Tutorial on how to make radio buttons in HTML easily

Radio button is one of the components in HTML programming. This component is most often used for filling out online forms, such as surveys, selection of majors, religion, gender, and so on.

An important rule that exists in the radio button component is that the user can only choose one option from several other options. So, if you want to make more than one selection selectable, radio buttons are not the answer.

How to Create a Radio Button in HTML

Creating radio buttons in HTML is very easy. If you are used to creating forms in HTML, then creating a radio button will definitely be very easy for you. Immediately, here are some ways that you can use to create radio buttons in HTML.

1. The First Way

The first way to make a radio button is the most basic method or the method most commonly used by many people. On the radio button the user is only allowed to choose one, in contrast to the checkbox that can be selected more than one.

Because the radio button is an option in the form, the first step in creating a radio button is to use the tag

. The following is an example of using a radio button script in HTML.

Jenis Kelamin
Pria
Perempuan

Tag writing

as usual followed by the actions and methods used. Then, you enter the tag followed by other attributes, namely:

• type=’radio’ is used to type the radio button. If you don’t enter this, the radio button won’t appear. You should not just enter the type, because each has its own function.
• name is used to define that the radio button options are in the same group. If you make the name different, the radio button selection will automatically be in a different group.
• value is used to assign a value to each selected input.
• The words Male and Female are the characters displayed in the browser which are the description of the input.

The image below is the display result of the script above. Good luck!

2. Second Method (Attribute Checked)

In addition to the first method that uses basic attributes to create radio buttons, in this second method you can add a new attribute, namely the checked attribute. This checked attribute is used to assign a default value to the input that is automatically selected when the form is displayed.

So, when you open the form, the radio button will automatically display one option that has been checked. However, don’t worry you can still choose another option if that’s not your choice. The following is an example of using this second script.

Jenis Kelamin
Pria
Perempuan

You can see the difference from the first method. In this second method, the attribute in the Male option is increased, namely checked=’checked’. Well, so if you want to make the form display automatically selected when accessed, then you just add the checked attribute like the example above.

The image below is the result of the script above. Good luck!

3. Third Method (Attribute Disabled)

This third way is a way to disable the function of the input. This attribute will usually be combined with javascript. Here’s how to use the script using the disabled attribute.

Jenis Kelamin
Pria
Perempuan

Well, to disable your choice, just add the disabled attribute like the example above. The script above is just an example, you can add javascript to make it more perfect. The following is the result of the script above.

So this article discusses how to create radio buttons in HTML. Please choose which method you need, just adjust it to your needs. Hopefully this article can be helpful and useful for you. Thank you

The rain lover and coffee connoisseur who likes to sit in daydream while dreaming of his dreams that will come true.

Share :