gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(learn): add for and id attributes to label and input (#39019)

Browse Source 
* add value and id attributes

* revert prettier format changes

* fix whitespace changes

* Revert "fix whitespace changes"

This reverts commit 9da78e58ce474b0f4a7cf076574e23961a6d3734.

* fix typo

* fix: conflict I forgot to resolve

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Ashlee Crusco
2020-09-02 10:19:47 -04:00
committed by GitHub
parent ce777e43d2
commit 3836ce08e3
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.english.md
View File

@ -13,11 +13,11 @@ When a form gets submitted, the data is sent to the server and includes entries
For example: For example:
```html ```html
<label for="indoor"> <label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label> </label>
<label for="outdoor"> <label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label> </label>
``` ```
@ -60,9 +60,9 @@ tests:
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <main>
<p>Click here to view more <a href="#">cat photos</a>.</p> <p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p> <p>Things cats love:</p>
<ul> <ul>
<li>cat nip</li> <li>cat nip</li>
@ -76,11 +76,11 @@ tests:
<li>other cats</li> <li>other cats</li>
</ol> </ol>
<form action="https://freecatphotoapp.com/submit-cat-photo"> <form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label> <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality"> Loving</label> <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label> <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br> <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required> <input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
@ -100,9 +100,9 @@ tests:
<h2>CatPhotoApp</h2> <h2>CatPhotoApp</h2>
<main> <main>
<p>Click here to view more <a href="#">cat photos</a>.</p> <p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p> <p>Things cats love:</p>
<ul> <ul>
<li>cat nip</li> <li>cat nip</li>
@ -116,11 +116,11 @@ tests:
<li>other cats</li> <li>other cats</li>
</ol> </ol>
<form action="https://freecatphotoapp.com/submit-cat-photo"> <form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" value="indoor"> Indoor</label> <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br> <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" value="loving"> Loving</label> <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
<label><input type="checkbox" name="personality" value="lazy"> Lazy</label> <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label><input type="checkbox" name="personality" value="energetic"> Energetic</label><br> <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required> <input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>