- Read Tutorial
- Watch Guide Video
Now that you know how to use checkboxes, we'll look at a related element - radio buttons. The main difference between checkboxes and radio buttons is that you can select as many options as you want in the former, but only one out of the available options in the latter.
We'll start with a label called "delivery". Next, we'll create a radio button with the code <input type ="radio">
The name
attribute should have the same value as that of the label. Also, the name
attribute should have the same value for all radio buttons, as this is what allows you to select only one. If you have different names for different radio buttons, then you can obviously select all the radio buttons, and this beats the very purpose of it.
Let's create a bunch of radio buttons, like this:
<label for="delivery">Shipping Preference:</label><br> <input type="radio" name="delivery" value="in_store"> In Store<br> <input type="radio" name="delivery" value="shipping"> Shipping<br>
The output will be:
So, this is how you can create radio buttons in HTML.