Survey Form - Build a Survey Form

HTML-CSS
1

I am stuck in a survey form because my check boxes and text area(additional comments) are not descendant to survey form. I have given value to check boxes but still there is a error

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  
<main>

  <body>

    <form id="survey-form">
  <div>
        <h1 id="title">survey-form</h1>
        <p id="description"> Dear users! thank you for your participation in this platform.</p>
        <section>
          <h2>Kindly fill the required information </h2>

          <input type"text" id="name" value"name" required placeholder="Jack Angel"><label for="name" id="name-label">Name</label>

          <input id="email" type="email" placeholder="***@gmail.com" name="email" required><label for="email" id="email-label">Email</label>

          <input id="number" min="10" max="30" type="number" placeholder="20" >
          <label for="number" id="number-label">number</label>

        </section>

        <section>

          <h2 id="heading">We are looking forward to your answers </h2>

          <fieldset>
            <legend>What's the skill that interest you the most? </legend>

            <label for="frontend developer"><input type="radio" id="frontend developer" value="interest" name="interest" type="checkbox" checked>frontend developer </label>

            <label for="backend developer"><input type="radio" id="backend developer" value="backend developer" name="interest">backend developer</label>

            <label for="fullstack developer"><input type="radio" id="fullstack developer" value="fullstack developer" name="interest">fullstack developer </label>
          </fieldset>
          <fieldset>
            <legend>how was the quality of our teaching about coding? </legend>
            <label for="good"><input type="radio" id="good" value="good" name="good-bad-best-worst-normal">good</label>

            <label for="bad"><input type="radio" name="good-bad-best-worst-normal" id="bad" value="bad">bad </label>

            <label for="best"><input type="radio" name="good-bad-best-worst-normal" id="best" value="best" >best </label>

            <label for="worst"><input type="radio" name="good-bad-best-worst-normal" id="worst" value="worst">worst </label>

            <label for="normal"><input type="radio" name="good-bad-best-worst-normal" id="normal" value="quality" type="checbox" checked>normal </label>
          </fieldset>
          <fieldset>
            <legend>What are the following programming languages you're good at? </legend>
            <label for="html-css"><input type="radio" id="html-css" value="html-css" name="languages">Html-css </label>
            <label for="javascript"><input type="radio" id="javascript" value="javascript" name="languages">Javascript </label>
            <label for="python"><input type="radio" id="python" value="python"  name="languages">Python </label>
            <label for="other"><input type="radio" id="other" value="languages" type="checkbox" checked  name="languages">other</label>
          </fieldset>

        </section>

        <section>
           <label>Additional comments</label><input type="text" id="Additional comments">

        </section>

        <section>
          <select id="dropdown">
  <option>usefull</option>
  <option>useless</option>
  </section>

<section>
<input id="submit" type="submit">
</section>

<style>
  body{
    background-color:cyan;
    margin:40px;
  }
  </style>
 
</div>
</form>

      </body>
 
    </main>
  </html>

/* 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/109.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Hello @riazfiza74 !

The checkbox should not be in the same input element as the radio. They each require their own input element.
Otherwise, the program does not have any idea which one should be rendered .

Another suggestion, carefully, watch the spelling. I noticed checbox instead of checkbox.

Try fixing these for starters and see what happens.

Keep up the good progress. :sun_with_face:

3

Hello! thank you so much for helping me. Can you also tell about descendant issue.

1 Like
4

You are welcome @riazfiza74 !

You are part of a great community who help each other.

I think once the checkbox are all in their own input, that should resolve the descendant issue for you.

Basically, to be a descendant, the elements need to come between the opening and closing tags of the parent element. It does not matter if there are other elements included within the parent element.
But, it is necessary to make sure the necessary child(ren) appear within it.

Example:

<form>
<input type="radio">
<input type="radio">
<p>Good Karma</p>
</form>

In the above example the radio buttons are children of the form.

I hope this helps you understand a bit better.

Keep up the good progress @riazfiza74 !

1 Like
5

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