Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

im getting number 11 wrong with the required prompt asking me to have a “type” of “email” for my #email. Can someone dumb this down a bit more for me?

Your code so far

<!-- file: index.html -->
<DOCTYPEHTML!>
  <html lang="eng">
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <html>
    <body>
      <h1 id="title">Mushroom Kingdom Survey</h1>
      <p id="description">Residency info application for all the citizens who live in this kingdom.</p>
      <fieldset>
      <form id="survey-form">
        First Name: <input id="name-label" required></input type="text">
       Last Name: <input id="name" required></input>
        <p></input> Age: <input id="age"> DOB:<input type="Numbers">
        Gender: <select id="dropdown">
          <option 0> Choose</option>
            <option 1>Male</option>
            <option 2>Female</option>
          </select>
        <p>Phone Number: <input id="phone"></input> Email Address: <input id="email" required></input type="email">
        </fieldset>

        <fieldset>
<p>Select one of the following options that apply to you.</p>
<p>1. Which continent of the kingdom do you live in?</p>
<input type="radio" checked><label>Donut Plains</label></input>
<input type="radio"> <label>Vanilla Dome</label></input>
<input type="radio"><label>Yoshi's Island</label></input>
<p>2.What type of building do you live in?
 <p> <input type="radio"><label>Mushroom Hut</label></input>
     <input type ="radio"><label>Castle</label></input>
     <input type="radio"><label>TreeHouse</label></input>

        </fieldset>
    </body>
</html>

/* file: styles.css */
body{
  margin: 0;
  background-color: beige;
  color: grey;
  font-family: Bubble;
  font-size: 16px;
}
fieldset{
  padding: 2rem;

}

#title {
  family-font: bubble;
text-align: center;
margin: 1em auto
}

#description{
  text-align: center;
}

#name{

}

#email{

}

#number{

}

#dropdown{
  
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

do you think you wrote this input element correctly?

3

ill be honest, with the last project throwing so many different new coding elements with assigning each label with a name,type etc. i got very lost on how to organize and or use most of them. if that makes nay sense.

4

No worries. These things often feel like a lot at once; you’re not alone in that. Whenever we add attributes to an element, you want it to be in the opening tag. In the closing tag, we only put in a / and the name of the element we’re closing. Does that make sense?

5

oh for sure! but im mostly confused when i should use the “type” element as well as “name” or “id”

6

Take a look at this video (or read the transcript) to learn about how to use an HTML boilerplate to set up the basic structure of a new project:

HTML Boilerplate

Note that input elements are void elements and do not require a closing tag.

You can use syntax like this: <input type="radio>

Or self-closing syntax like this (my preference): <input type="radio" />

There are no other void elements in the body of your code, so you will want to make sure that all other elements have a starting tag and a closing tag.

If, at any time, you don’t understand an element or the attributes you can use in an element, you may be able to get clarification by looking it up at W3 Schools.

Good luck!

1 Like
7

Thank You! I will try this and the W3 Schools. I really needed this lol