Please help me understand it

Tell us what’s happening:

Your code so far


<h2>CatPhotoApp</h2>
<main>
<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>

<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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <input id="indoor" type="radio" name="indoor-outdoor">
  <label for="indoor">Indoor</label>
  <input id="outdoor" type="radio" name="indoor-outdoor">
  <label for="outdoor">Outdoor</label>
  
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
 </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36 Edg/85.0.564.44.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

The <input> tags need to be nested inside of the <label> tags. See below:

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>
1 Like

NOTE: I have corrected your code by nesting input inside label because The < label> element is used to associate a text label with a form input field or even the button element and text value for outdoor attribute to radio for a radio button. I have removed the placeholder attribute (that hint is the expected value, which gets displayed before the user enters a value, therefore it is supposed to be used by text as type attribute) and required because for a radio button you must choose only one button just like a normal old radio when you select one the other is unselected. I have also added the following to your outdoor input id attribute(id attribute specifies a unique id for outdoor radio button) and type and name attribute similar to the indoor radio button.

form element creates the form and has an attribute action which send the form used to specify where the formdata is to be sent to the server after submission of the form.

label for attribute used to specify the type of form element a label is bound to < label for ="element_id">

the type attribute of input element can be various types , which defines information field and the type attribute of input and button.

NOTE:Make sure to add a value attribute ( with a string or anything you want to send to server) to send a value to the server when submit button is clicked.