--- id: 5c6c06847491271903d37cfd title: Use the value attribute with Radio Buttons and Checkboxes challengeType: 0 forumTopicId: 301099 dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes --- # --description-- When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type `radio` and `checkbox` report their values from the `value` attribute. For example: ```html ``` Here, you have two `radio` inputs. When the user submits the form with the `indoor` option selected, the form data will include the line: `indoor-outdoor=indoor`. This is from the `name` and `value` attributes of the "indoor" input. If you omit the `value` attribute, the submitted form data uses the default value, which is `on`. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be `indoor-outdoor=on`, which is not useful. So the `value` attribute needs to be set to something to identify the option. # --instructions-- Give each of the `radio` and `checkbox` inputs the `value` attribute. Use the input label text, in lowercase, as the value for the attribute. # --hints-- One of your radio buttons should have the `value` attribute of `indoor`. ```js assert( $('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']") .length > 0 ); ``` One of your radio buttons should have the `value` attribute of `outdoor`. ```js assert( $('label:contains("Outdoor") > input[type="radio"]').filter( "[value='outdoor']" ).length > 0 ); ``` One of your checkboxes should have the `value` attribute of `loving`. ```js assert( $('label:contains("Loving") > input[type="checkbox"]').filter( "[value='loving']" ).length > 0 ); ``` One of your checkboxes should have the `value` attribute of `lazy`. ```js assert( $('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']") .length > 0 ); ``` One of your checkboxes should have the `value` attribute of `energetic`. ```js assert( $('label:contains("Energetic") > input[type="checkbox"]').filter( "[value='energetic']" ).length > 0 ); ``` # --seed-- ## --seed-contents-- ```html

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats


``` # --solutions-- ```html

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats


```