Hi,
would someone please help me figure out why is my code not working and doing what I want it to do. I want that when a person clicks on the word “Definitely” or “Maybe” or “Not Sure” that the button the left get selected without having to actually click the button itself. I want the appearance that I have, and I don’t want a legend element. Please help me.
Thank you.
Tell us what’s happening:
Describe your issue in detail here.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Form</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main>
<h1 id="title">~~freeCodeCamp Survey Form~~</h1>
<p id="description">
Thank you for taking the time to help us improve the platform</p>
</main>
<form method="post" action="https://survey-form.freecodecamp.rocks" id="survey-form">
<p><label id="name-label" for="name"> Name <input id="name" type="text" required placeholder="Enter your name"/></label></p>
<p><label id="email-label" for="email"> Email <input id="email" name="email" type="email" placeholder="Enter your email address" required/></label></p>
<p><label id="number-label" for="number"> Age (optional) <input id="number" name="number" type="number" max="120" min="13" placeholder="Age"/></label></p>
<fieldset>
<p><label for="dropdown"> Which option best describe your current role?<select id="dropdown" name="dropdown">
<option value="">Select an option</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Full Time Learner</option>
<option value="4">Prefer not to Say</option>
<option value="5">Other</option>
</select>
</label></p>
<label> Would you recommend freCodeCamp to a friend?</label>
<p><input type="radio" id="definitely" name="definitely-maybe-notsure" value="definitely" checked/> Definitely</p>
<p><input type="radio" id="maybe" name="definitely-maybe-notsure" value="maybe"/> Maybe</p>
<p><input type="radio" id="notsure" name="definitely-maybe-notsure" value="notsure"/> Not Sure</p></fieldset>
<label>What is your favorite feature of freeCodeCamp?
<select>
<option value="">Select an Option</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4">Open Source</option>
</select>
<fieldset>
<label>What would you like to see improve? (check all that apply)
</label></p>
<p><input value="1" type="checkbox"/> Front-end Projects</p>
<p><input value="2" type="checkbox"> Back-end Projects</p>
<p><input value="3" type="checkbox"> Data Visualition</p>
<p><input value="4" type="checkbox"> Challenges</p>
<p><input value="5" type="checkbox"> Open Source Community</p>
<p><input value="6" type="checkbox"> Gitter Help Rooms</p>
<p><input value="7" type="checkbox"> Videos</p>
<p><input value="8" type="checkbox"> City Meetups</p>
<p><input value="9" type="checkbox"> Wiki</p>
<p><input value="10" type="checkbox"> Forums</p>
<p><input value="11" type="checkbox"> Additional Courses</p></fieldset>
<fieldset> <label for="comments">Any Comments or Suggestions?
<textarea id="comments" name="comments" rows="8" cols="60" rowsplaceholder="Enter Your Comment Here...." />
</textarea> </fieldset>
<button id="submit" type="submit">Submit</button>
</form>
</body>
</html>
You want to use a <label> tag to surround the text, then you want to add a for="" attribute to the label that matches the id attribute of the radio button.
Hi
thank you for the advice. It worked in one part, and I figured the rest out. do you mind advising me on CSS? I put the “max-width”, and the “min-width” in the body selector, but still when I open the preview page, it’s still to wide. What do you suggest?
If it’s still too wide, then you’re going to have to adjust your max-width.
Another option would be to just set the width to be responsive to the page. So if you set your width to 70vw, then it will always be 70% of the viewport’s width (you might still want min and max widths set though).
Hi
thank you for responding. I didn’t even know what “vw” stood for, even though I have been instructed to use it several times in several modules. Now, I totally understand it. I will definitely incorporate it in the “body” selector.
Thank you very much.
This is what everything looks like right now:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Form</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main>
<h1 id="title">~~freeCodeCamp Survey Form~~</h1>
<p id="description">
Thank you for taking the time to help us improve the platform</p>
</main>
<form method="post" action="https://survey-form.freecodecamp.rocks" id="survey-form">
<p><label id="name-label" for="name"> Name <input id="name" type="text" required placeholder="Enter your name"/></label></p>
<p><label id="email-label" for="email"> Email <input id="email" name="email" type="email" placeholder="Enter your email address" required/></label></p>
<p><label id="number-label" for="number"> Age <span>(optional) </span><input id="number" name="number" type="number" max="120" min="13" placeholder="Age"/></label></p>
<fieldset>
<p><label for="dropdown"> Which option best describe your current role?<select id="dropdown" name="dropdown">
<option value="">Select an option</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Full Time Learner</option>
<option value="4">Prefer not to Say</option>
<option value="5">Other</option>
</select>
</label></p>
<label> Would you recommend freCodeCamp to a friend?</label>
<p><label for="definitely"><input type="radio" id="definitely" name="definitely-maybe-notsure" value="definitely" class="inline" checked/> Definitely</label></p>
<p><label for="maybe">
<input type="radio" id="maybe" name="definitely-maybe-notsure" value="maybe" class="inline"/> Maybe</label></p>
<p><label for="notsure">
<input type="radio" id="notsure" name="definitely-maybe-notsure" value="notsure" class="inline"/> Not Sure</label></p></fieldset>
<label>What is your favorite feature of freeCodeCamp?
<select>
<option value="">Select an Option</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4">Open Source</option>
</select>
<fieldset>
<label>What would you like to see improve? <span>(check all that apply)
</span></label></p>
<p> <label for="1"><input value="1" id="1" name="1" type="checkbox"/> Front-end Projects</label></p>
<p><label for="2"><input value="2" id="2" name ="2" type="checkbox"> Back-end Projects</label></p>
<p><label for="3"><input value="3" id="3" name="3" type="checkbox"> Data Visualition</label></p>
<p><label for="4"><input value="4" id="4" name="4" type="checkbox"> Challenges</label></p>
<p><label for="5"><input value="5" id="5" name="5" type="checkbox"> Open Source Community</label></p>
<p><label for="6"><input value="6" id="6" name="6" type="checkbox"> Gitter Help Rooms</label></p>
<p><label for="7"><input value="7" id="7" name="7" type="checkbox"> Videos</label></p>
<p><label for="8"><input value="8" id="8" name="8" type="checkbox"> City Meetups</label></p>
<p><label for="9"><input value="9" id="9" name="9" type="checkbox"> Wiki</label></p>
<p><label for="10"><input value="10" id="10" name="10" type="checkbox"> Forums</label></p>
<p><label for="11"><input value="11" id="11" name="11" type="checkbox"> Additional Courses</label></p></fieldset>
<fieldset>
<label for="comments">Any Comments or Suggestions?
<textarea id="comments" name="comments" rows="9" cols="70" rowsplaceholder="Enter Your Comment Here...." />
</textarea> </fieldset>
<button id="submit" type="submit">Submit</button>
</form>
</body>
</html>
