Working with HTML Form Radio Buttons
This guide gives a step by step set of instructions for how to integrate radio buttons into an HTML form. This will allow users to select boolean value types.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

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:

small

So, this is how you can create radio buttons in HTML.