Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Can somebody help me how to create a text when you didnt enter email with @ so it pops up

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="header">
    <h1 id="title">Videogames Survay Form</h1>
    <p id="description">thank you for helping us to improve video games expirience</p>
    <header>
    <form id="survey form">
      <div>
      <label for="name">Name
     <input id="name" type="text" name="name" placeholder="enter your name" class="info" required/>
     </label>
     </div>
     <div>
     <label>Email
       <input id="email" type="email" name="email" placeholder="enter your email" class="info" required/>
       </label>
       </div> 
    </form>
    <div>
      <button type="submit" id="submit" class="submit-button">
            Submit
          </button> 
    </div>  
  </body>  
</html>

/* file: styles.css */
h1{
  text-align:center;
}
p{

  text-align:center;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Your email input already has a type of email so it should display the message if you don’t use the @ sign. However, I don’t think your submit button is formatted correctly to submit the form. If you use an input with the value, type, and id of submit within the closing form tag I think it will display the text properly.

2 Likes
3

Hey Buddy here you did nice trial.

According to your Question, if you want any text which should be email.

Then Kindly assign it type value to email, This how you can create it .

If you face still any issue kindly do provide us your updated Code.

Hope you Understand !!

2 Likes
4

Tell us what’s happening:

Your #name-label should contain text that describes the input.
can someone explain what tbis means and what #somethin menes in general

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="header">
    <h1 id="title">Videogames Survay Form</h1>
    <p id="description">thank you for helping us to improve video games expirience</p>
    <header>
    <form id="survey form">
      <div class="form-group">
      <label id="name-label" for="name">Name</label>
     <input 
     id="name"
     type="text"
     name="name"
     placeholder="enter your name"
     class="info"
     required/>
     </div>
     <div class="form-group">
     <label id="email-label"" for="email">Email</label>
       <input 
      id="email"
      type="email"
      name="email"
      placeholder="enter your email"
      class="info"
      required/>
       </div>
       <! staviti error ako nisi stavio email (korak 6)-->
    <div class="form-group">
      <label id="number-label" for="number">Age<span class="clue">(optional)</span></label>
      <input
      id="number"
      type="number"
      name="age"
      placeholder="Age"
      class="age"
      min="6"
      max="99"/>

    </form>
    <div>
      <button type="submit" id="submit" class="submit-button">
            Submit
          </button> 
    </div>  
  </body>  
</html>

/* file: styles.css */
h1{
  text-align:center;
}
p{

  text-align:center;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

5

When it says #name-label it refers to the css selector that you would use to get the id of name-label.

For example if I have a p element with the id of big, I would use #big to get it in css.

html

<p id="big">text inside p element</p>

css

#big { 
  font-size: 50px;
}
1 Like
6

Hi @bokunmaroje

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

Thanks.