Radio Buttons and Checkboxes

When the user should choose one of a few options, we use radio buttons: inputs with type="radio". Radio buttons work as a group: of all the radio buttons with the same name, only one can be chosen. When the user chooses another one, the previous choice disappears. Each radio button has a value attribute, which is sent when that button is chosen, for example size=large.

A checkbox, an input with type="checkbox", works on its own: the user can tick or untick each checkbox independently of the others. It's used for yes/no questions, such as agreeing to the terms. A ticked checkbox is sent, for example, as cheese=on; an unticked one isn't sent at all.

Radio buttons and checkboxes need labels too. We usually write the label after the input, so that the text is to the right of the button. Clicking the label also chooses the button, which makes the small button easier to hit.

This is how part of a pizza order could look:

<div>
	<input type="radio" name="size" value="small" id="size-small">
	<label for="size-small">Small</label>
	<input type="radio" name="size" value="large" id="size-large">
	<label for="size-large">Large</label>
</div>
<div>
	<input type="checkbox" name="cheese" id="input-cheese">
	<label for="input-cheese">Extra cheese</label>
</div>

This code is displayed like this (try clicking it):

Small Large

Extra cheese

Instructions

In the first empty div, create a radio button with the attribute name with the value level, the attribute value with the value beginner and the attribute id with the value level-beginner. After it, create a label with the content Beginner that belongs to this radio button.

Below it, in the same div, create a second radio button with the same name level, the value advanced and the id level-advanced, and after it a label with the content Advanced. Then run the code and try choosing one option and then the other.

In the second empty div, create a checkbox with the attribute name with the value news and the attribute id with the value input-news. After it, create a label with the content Send me news.

Start programming for free

6/11