Click here to view more cat photos.
+ +Things cats love:
+-
+
- cat nip +
- laser pointers +
- lasagna +
Top 3 things cats hate:
+-
+
- flea treatment +
- thunder +
- other cats +
diff --git a/curriculum/challenges/_meta/basic-html-and-html5/meta.json b/curriculum/challenges/_meta/basic-html-and-html5/meta.json index 8e1653d849..cdf1ac7466 100644 --- a/curriculum/challenges/_meta/basic-html-and-html5/meta.json +++ b/curriculum/challenges/_meta/basic-html-and-html5/meta.json @@ -100,6 +100,10 @@ "bad87fee1348bd9aedf08835", "Create a Set of Checkboxes" ], + [ + "5c6c06847491271903d37cfd", + "Use the value attribute with Radio Buttons and Checkboxes" + ], [ "bad87fee1348bd9aedd08835", "Check Radio Buttons and Checkboxes by Default" diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md index ce80ca8425..c2212c143d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.english.md @@ -56,11 +56,11 @@ tests:
radio
and checkbox
report their values from the value
attribute.
+
+For example:
++<label for="indoor">+ +Here, you have two
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
+<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label> +
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.
+radio
and checkbox
inputs the value
attribute. Use the input label text, in lowercase, as the value for the attribute.
+value
attribute of indoor
.
+ testString: assert($('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']").length > 0);
+ - text: One of your radio buttons should have the value
attribute of outdoor
.
+ testString: assert($('label:contains("Outdoor") > input[type="radio"]').filter("[value='outdoor']").length > 0);
+ - text: One of your checkboxes should have the value
attribute of loving
.
+ testString: assert($('label:contains("Loving") > input[type="checkbox"]').filter("[value='loving']").length > 0);
+ - text: One of your checkboxes should have the value
attribute of lazy
.
+ testString: assert($('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']").length > 0);
+ - text: One of your checkboxes should have the value
attribute of energetic
.
+ testString: assert($('label:contains("Energetic") > input[type="checkbox"]').filter("[value='energetic']").length > 0);
+```
+
+Click here to view more cat photos.
+ +Things cats love:
+Top 3 things cats hate:
+Click here to view more cat photos.
+ +Things cats love:
+Top 3 things cats hate:
+