Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I pass every test except for the every radio button group should have at least 2 radio buttons. What’s wrong with this part of the code with radio buttons.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Survey Form</title>
	<link rel="stylesheet" href="styles.css">
	</head>


	<body>
		<!-- title of the page -->
		<h1 id="title">Survey Form</h1> 

		<!-- description -->

		<p id="description">Thank you for taking the time to help us improve the platform</p>




		<form id="survey-form"  action="submit" method="post">

		<fieldset>
		<label id="name-label">Name: <input id="name" name="name" type="text" placeholder="Enter your Name" required /></label>
		<label id="email-label">Email: <input id="email" name="email" type="email"  placeholder="Enter your email" required /></label>
		<label id="number-label">Number: <input id="number" type="number" name="number" placeholder="Enter your number" min="0000000000" max="9999999999" /></label>
		</fieldset>

		<!-- options drop down -->

		<fieldset>
		<label for="dropdown">How did you hear about this survey:
		<select id="dropdown" name="dropdown">
		<option value="option1">LinkedIn</option>
		<option value="option2">freeCodeCamp</option>
		</select>
		</label>

		<!-- radio buttons -->
		
		<fieldset>
		<legend>Do you like Coding<legend>
		<label for="yes-label"><input id="yes-label" type="radio" name="yes-label" value="yesValue" /> Yes</label>
		<label for="no-label"><input id="no-label" type="radio" name="no-label" value="noValue" /> No</label>
		</fieldset>

		<fieldset>
		<legend>Would you recommend CodeCamp to a friend<legend>
		<label for="absolutely-label"><input id="absolutely-label" type="radio" name="absolutely-label" value="absolutelyValue" /> Absolutely</label>
		<label for="notsure-label"><input id="notsure-label" type="radio" name="notsure-label" value="notsureValue" />  Not Sure</label>
		</fieldset>

          <!-- check boxes -->

		<fieldset>
		<legend>What kind of career do see yourself in coding<legend>
		<label for="software"><input id="software" type="checkbox" name="checkboxGroup" value="softwareValue" /> Software Engineer</label>
		<label for="java"><input id="java" type="checkbox" name="checkboxGroup" value="javaValue" />Java Developer</label>
		</fieldset>

		<!-- text area -->

		<label for="suggestions">Any suggestions ?
			<textarea id="suggestions" name="suggestions" rows="5" cols="40"></textarea>
		</label>

		<!-- submit input-->
		<input id="submit" type="submit" value="submit" />
		</form>
	</body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Monaco;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}


input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}

input[type="file"] {
  padding: 1px 2px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

1 Like
2

I guess the interpreter is confused by the closing tag of the “legend” tag. you should have a look at it…is it correctly closed?

2 Likes
3

Welcome to the forum @Jay718

At the moment a user can select both radio buttons in a radio button group, at the same time.

Radio buttons need to be uniquely selectable.
If you select the first button, then select the second button, the first button should deselect, and the second button becomes selected.

Happy coding

2 Likes
4

Thank you I forgot to close it

1 Like
5

How can I fix this code that can select and deselect options ?

6

Since this is for a project, I don’t think it’s a good idea to give the direct answer.

Maybe, look at previous challenges which had forms with radio input buttons.

7

I am not sure exactly what the issue is. But you can use the example provided for the project as a guide if you open your log while on the page to inspect the elements. For me it is ‘option + command + i’ for keyboard shortcut. Good luck!

8

You need to add same value with the name attribute for your group of input radio.
@Jay718

9

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