Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I have almost completed the build a survey form, but I am getting errors at the radio button area, and the text area is not a descendant of survey-form.

I wrapped the the option element with the input element but I still receive the input error. Please provide progressive steps?

" * ou should have at least two input elements with a type of radio (radio buttons).

  • Failed:You should have at least two radio buttons that are descendants of #survey-form.

  • Failed:All your radio buttons should have a value attribute and value.

  • Failed:All your radio buttons should have a name attribute and value.

  • Failed:Every radio button group should have at least 2 radio buttons.

  • Passed:You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form.

  • Passed:All your checkboxes inside #survey-form should have a value attribute and value.

  • Failed:You should have at least one textarea element that is a descendant of #survey-form."

<!-- file: index.html -->

Survey Form

Short explanation

Enter your name: Enter your e-mail: Enter your number: ``` 

```css
/* file: styles.css */

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
3 
ou should have at least two input elements with a type of radio (radio buttons).
Failed:You should have at least two radio buttons that are descendants of #survey-form.
Failed:All your radio buttons should have a value attribute and value.
Failed:All your radio buttons should have a name attribute and value.
Failed:Every radio button group should have at least 2 radio buttons.
Passed:You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form.
Passed:All your checkboxes inside #survey-form should have a value attribute and value.
Failed:You should have at least one textarea element that is a descendant of #survey-form.
4 
<!DOCTYPE html>
<html lang="en">
<h1 id="title">Survey Form </h1>
 <meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<p id="description" type="text">Short explanation</p>
<form id="survey-form" required>
<label id="name-label">Enter your name: <input id="name" type="text" name="name-label" required placeholder="John"></input></label>
<label id="email-label">Enter your e-mail: <input id="email" required type="email" name="email-label" placeholder="qwe@freeccamp.com"> </input></label>
<label id="number-label">Enter your number: <input id="number" type="number" name="number-label" min="7" max="7" placeholder="0125478"> </input></label>
<label id="option"><select id="dropdown">
<option <input id="option1" type="radio" name="option" value="1"> ></input></option>
<option <input id="option2" type="radio" name="option" value="2" >></input></option>
</select></label>
<input value="value" type="checkbox" name="checkbox"></input>
<input value="value" type="checkbox" name="checkbox"></input>
<input value="value" type="checkbox" name="checkbox"></input>
<label id="addcomments"><input id="addcomments" type="textarea" name="addcomments"></input></label>
<input id="submit" type="submit" value="Submit"></input>       
</form>
5
  • you don’t have the head element, title element, or body element
  • the html element doesn’t have the closing tag
  • duplicate ids are not allowed - addcomments
  • the ‘input’ element is self-closing, so it doesn’t need the closing </input> tag

The ‘option’ tag can not contain the ‘input’ element. Also, you have two right angle brackets after the last attribute (value=“1”).

1 Like
6

Thank you for the prompt feedback, your advice is helpful. Unfortunately I still recieve errors. Why is my title not showing? I m struggling to have the dropdown have two selectable options? I re did my text area element and now its not behaving correctly and the submit button is receiving errors. Please provide assistance.

<!DOCTYPE html>
<html lang="en">
  <head>
<h1 id="title"><title>Survey Form</title></h1>
 <meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p id="description" type="text">Short explanation</p>
<form id="survey-form" required>
<label id="name-label">Enter your name: <input id="name" type="text" name="name-label" required placeholder="John"></label>
<label id="email-label">Enter your e-mail: <input id="email" required type="email" name="email-label" placeholder="qwe@freeccamp.com"> </label>
<label id="number-label">Enter your number: <input id="number" type="number" name="number-label" min="7" max="7" placeholder="0125478"></label>
<label id="option"><select id="dropdown">
<input id="option1" type="radio" name="option" value="1" ><option value="1">(select one)</option>

<input id="option2" type="radio" name="option" value="2"><option value="2">(select two)</option>
            
</select></label>
<input value="value" type="checkbox" name="checkbox">
<input value="value" type="checkbox" name="checkbox">
<input value="value" type="checkbox" name="checkbox">
<label id="addcomms"><textarea id="addcomments" type="textarea" name="addcomms"></textarea</label>

<input id="submit" type="submit" value="Submit"> 
</body>      
</form>
</html>
7

The title should be found between the ‘title’ tags. That is what you see written on the browser’s page tab. On the other hand, the h1 element serves to add headings within the body element.

The closing ‘textarea’ tag is not closed.

  • You should have a title (heading) with id=“title” in H1 sized text.
  • The ‘select’ element should contain only ‘option’ elements within itself, not the ‘input’ elements.
  • You should have two input elements with the ‘type’ attribute set to the value of “radio”, but both should be off from the ‘select’ element.
1 Like
8

Thank you. I could proceed to next challenge.

1 Like
9

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