How do i add the form tag with the input with the buttons?

HTML-CSS
1

Tell us what’s happening:
how do I do this I am very confuesd Each of your radio button elements should be added within the form tag.

  **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://www.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://www.freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

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

<label>
  <input id="outdoor" type ="radio"
  name="indoor-outdoor">Outdoor</label>




</main>

  **Your browser information:**

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Hi.

You just need to list the code for your two radio buttons (id=“indoor” and id=“outdoor”) inside the form tags.

<form>
 <!-- Insert the code for the two radio buttons here.-->
</form>
3

The task specifically mentions that it wants you to add a pair of radio buttons to your form, each nested in its own label element. But in the code above, you have put your radio buttons outside of your form element. You need to put the radio buttons inside the form element.

One more thing I would like to mention is that, it’s considered best practice to have a for attribute on the label element, with a value that matches the value of the id attribute of the input element.

So, here you can use a for attribute for your Indoor button on its label element and have a value of “indoor” for that attribute which matches the value of the id attribute of the input element. Similarly, you can use a for attribute for your Outdoor button on its label element and have a value of “outdoor” for that attribute which matches the value of the id attribute of the input element.

4

i still dont understand how to putt it in the code

5

Hi, you have already written the correct code. The order is just not correct yet. The labels including the inputs must be enclosed by the form tags.

The structure looks like this.

<form>
  <input>
  <button></button>
  <label><input></label>
  <label><input></label>
</form>
6

how do i nest the form tag innside the code?

7

Hi,

Let’s start over with your codebase :

You’ve put the two couple of <label><input> out of the </form> closing tag, that’s why these input are not in the form.

Try to put them before the </form> closing tag, and you should be good to go.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.