2018-09-30 23:01:58 +01:00
---
id: bad87fee1348bd9aedf08834
title: Create a Set of Radio Buttons
challengeType: 0
2019-07-31 11:32:23 -07:00
forumTopicId: 16822
2021-01-13 03:31:00 +01:00
dashedName: create-a-set-of-radio-buttons
2018-09-30 23:01:58 +01:00
---
2020-11-27 19:02:05 +01:00
# --description--
2019-10-27 15:45:37 -01:00
You can use < dfn > radio buttons< / dfn > for questions where you want the user to only give you one answer out of multiple options.
2020-11-27 19:02:05 +01:00
Radio buttons are a type of `input` .
Each of your radio buttons can be nested within its own `label` element. By wrapping an `input` element inside of a `label` element it will automatically associate the radio button input with the label element surrounding it.
All related radio buttons should have the same `name` attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
2018-09-30 23:01:58 +01:00
Here's an example of a radio button:
2019-05-14 01:11:58 -07:00
```html
< label >
< input type = "radio" name = "indoor-outdoor" > Indoor
< / label >
```
2021-04-05 11:41:31 +05:00
It is considered best practice to set a `for` attribute on the `label` element, with a value that matches the value of the `id` attribute of the `input` element. This allows assistive technologies to create a linked relationship between the label and the related `input` element. For example:
```html
< input id = "indoor" type = "radio" name = "indoor-outdoor" >
< label for = "indoor" > Indoor< / label >
```
We can also nest the `input` element within the `label` tags:
2019-05-14 01:11:58 -07:00
```html
< label for = "indoor" >
< input id = "indoor" type = "radio" name = "indoor-outdoor" > Indoor
< / label >
```
2020-11-27 19:02:05 +01:00
# --instructions--
Add a pair of radio buttons to your form, each nested in its own `label` element. One should have the option of `indoor` and the other should have the option of `outdoor` . Both should share the `name` attribute of `indoor-outdoor` to create a radio group.
# --hints--
2021-02-01 11:56:07 -08:00
Your page should have two `radio` button elements.
2020-11-27 19:02:05 +01:00
```js
assert($('input[type="radio"]').length > 1);
```
Your radio buttons should be given the `name` attribute of `indoor-outdoor` .
```js
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
```
Each of your two radio button elements should be nested in its own `label` element.
```js
assert($('label > input[type="radio"]:only-child').length > 1);
```
Each of your `label` elements should have a closing tag.
```js
assert(
code.match(/< \/label > /g) &&
code.match(/< label / g ) & &
code.match(/< \/label > /g).length === code.match(/< label / g ). length
);
```
One of your radio buttons should have the label `indoor` .
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert(
$('label')
.text()
.match(/indoor/gi)
);
2018-09-30 23:01:58 +01:00
```
2020-11-27 19:02:05 +01:00
One of your radio buttons should have the label `outdoor` .
```js
assert(
$('label')
.text()
.match(/outdoor/gi)
);
```
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
Each of your radio button elements should be added within the `form` tag.
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert($('label').parent().get(0).tagName.match('FORM'));
```
# --seed--
## --seed-contents--
2018-09-30 23:01:58 +01:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2018-10-08 01:01:53 +01:00
2021-09-21 23:46:55 +09:00
< a href = "#" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
2021-04-26 19:04:53 +02:00
< form action = "https://www.freecatphotoapp.com/submit-cat-photo" >
2018-09-30 23:01:58 +01:00
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
```
2020-11-27 19:02:05 +01:00
# --solutions--
2018-09-30 23:01:58 +01:00
2019-04-22 02:07:05 -04:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2021-09-21 23:46:55 +09:00
< a href = "#" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2019-04-22 02:07:05 -04:00
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
2021-04-26 19:04:53 +02:00
< form action = "https://www.freecatphotoapp.com/submit-cat-photo" >
2019-04-22 02:07:05 -04:00
< label for = "indoor" > < input id = "indoor" type = "radio" name = "indoor-outdoor" > Indoor< / label >
< label for = "outdoor" > < input id = "outdoor" type = "radio" name = "indoor-outdoor" > Outdoor< / label > < br >
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
2018-09-30 23:01:58 +01:00
```