Survey Project (NEED HELP)

HELLP!! I’m having problems adding the question first before the radio buttons, i think i have the right code but it won’t appear on my preview… (im abt to cry :smiling_face_with_tear:)

Matcha Survey

Matcha Survey

Thank you for doing this survey! I love you Matcha!

<div id="form-styling">
 <form id="survey-form">
   <div class="form-group">
    <label id="name-label" for="name"> Name
      <input 
      id="name" 
      name="name" 
      type="text" 
      placeholder="Enter your name" 
      required/>
    </label>
  </div>
   <div class="form-group">
    <label id="email-label" for="email">Email
      <input 
        id="email" 
        name="email" 
        type="email" 
        placeholder="Enter your email" 
        required />
    </label>
  </div>
  <div class="form-group">
    <label id="number-label" for="number">Age
      <input 
      id="number" 
      name="age" 
      type="number" 
      placeholder="Age" 
      min="13" 
      max="100" 
      required/ ></label>
      </div>
      <div class="form-group">
        <label for="dropdown">What is your favorite Matcha grade?
          <select id="dropdown" name="grade">
            <option value="">(Select an option)</option>
            <option value="1">Ceremonial Grade</option>
            <option value="2">Culinary Grade</option>
          </label>
      </div>
      <div class="form-group">
        
   ***<!--NEED HELP: RADIO BUTTON QUESTON WON'T APPEAR-->***
  </div>
      <div class="form-group">
      <label>How often in a week do you drink Matcha?</label>
        <input
          name="radio"
          value="1-2"
          type="radio"
          class="input-radio"
          checked
        />1-2 times /week</label
      >
      <label>
        <input
          name="radio"
          value="3-5"
          type="radio"
          class="input-radio"
        />3-5 times /week</label
      >
      <label
        ><input
          name="radio"
          value="everyday"
          type="radio"
          class="input-radio"
        />Everyday! Matcha is LIFE!</label
      >
   </div>

</input>
</div>

Blockquote

about:blank

1 Like

Hey Princess,

No need to cry! Getting things to work may need some careful analyzing sometimes but it feels soooo good when it finally does work! Let’s have a look!

I noticed that here

      <div class="form-group">
        <label for="dropdown">What is your favorite Matcha grade?
          <select id="dropdown" name="grade">
            <option value="">(Select an option)</option>
            <option value="1">Ceremonial Grade</option>
            <option value="2">Culinary Grade</option>
          </label>
      </div>

you miss the closing </select> tag. That messes things up right there.

But then I looked a little bit closer … and I saw a another missing tag here…

<div class="form-group">
      <label>How often in a week do you drink Matcha?</label>
        <input
          name="radio"
          value="1-2"
          type="radio"
          class="input-radio"
          checked
        />1-2 times /week</label
      >

(and the way you formatted this does not help you here). Do you spot it?

and unfortunately… also when we look at the form as a whole we see

<div id="form-styling">
 <form id="survey-form">

...

</input>
</div>

That also seems a bit unbalanced.

I hope these clues help you to fix your issues!

It really helps to use an editor and align all the opening and closing tags carefully so you can look at the indents and grab these little bugs when they occur.

May I also point you to how to do radio buttons the accessible way? WebAIM: Creating Accessible Forms - Accessible Form Controls
or
Grouping Controls | Web Accessibility Initiative (WAI) | W3C

I hope this helps!

4 Likes

@syllie This makes more sense now. Thank you so much!! :heart_hands:

2 Likes