Help: text/header cut off and submit button not recognized?

Tell us what’s happening:

  1. From [div class=“checkbox”] down to the break before [label>Option 2</label] – this entire header and first option don’t appear properly (missing) on the browser page/in the preview; can’t figure out why.

  2. Code is somehow not meeting requirements for the following:

Any assistance would be much appreciated.

Your code so far

/* file: index.html */
<!DOCTYPE html>

  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="">
  <link rel="preconnect" href="" crossorigin>


  <div class="survey">
      <form id="survey-form">
      <h1 id="title">SURVEY</h1>
      <h4>This is a subtitle</h4>
      <p id="description">This is a description</p>
          <label id="name-label">Name:</lable>
              <input type="text" id="name" required placeholder="Jane Doe">
              <div class="p-info">
                  <label id="email-label">Email:</label>
                  <input type="email" id="email" required placeholder="">
                  <label id="number-label">Number:</label>
                  <input type="number" id="number" required min="1" max="50" placeholder="7">
              <div class="radio">
                  <h4>These are the radio buttons</h4>
                  <label id="radio"> Option 1</label>
                  <input type="radio" name="radio-option" value="1">
                  <label id="radio"> Option 2</label>
                  <input type="radio" name="radio-option" value="2">
              <div class="dropdown">
                  <h4>This is a dropdown</h4>
                  <label>This is a dropdown</label>
                  <select id="dropdown">
                      <option value="">(select one)</option>
                      <option value="1">Option 1</option>
                      <option>Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Other</option>
              <div class="checkbox">
                <h4>This is a checkbox</h4>
                  <label>Option 1</label>
                  <input type="checkbox" name="check" value="1">
                   <label>Option 2</label>
                  <input type="checkbox" name="check" value="2">
              <div id="textbox">
                  <h4>This is a textbox<h4>
                  <label>Text box:</label>
        <textarea name="bio" rows="3" cols="30" placeholder="Goes here"></textarea>
              <div id="submit">
                   <input type="submit" value="Submit" id="submit" />

/* file: styles.css */
label {
font-weight: normal;
  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

An id should only be used on one element. You have two instances of the same id.

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