My Survey Form - Build a Survey Form

fungus · August 25, 2023, 9:31pm

I’m a beginner so please be nice : ). Also, any tips would be appreciated!!

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
  <link rel="stylesheet" href="styles.css">
    <title>Sanrio Survey</title>
  </head>
<body>
  <header>
    <h1 id='title'>Sanrio Survey</h1>
    <p id='description'>Who's your favorite?</p>
  </header>
<main>
  <form id='survey-form'>
    <hr>
    <label for='name' id='name-label'>*Name:</label>
  <input id='name' type='text' placeholder='Hello Kitty' required> 
  </hr>
  <hr>
    <label for='email' id='email-label'>*Email:</label>
  <input id='email' type='email' placeholder='hellokitty@sanrio.com' required>
  </hr>
  <hr>
    <label for='number' id='number-label'>Age:</label>
  <input id='number' type='number' min='5' max='120' placeholder='8'>
  </hr>
  <hr>
  <input type='radio' name='sweet-rude'id='sweet' value='0'>
   <label for='sweet'>sweet</label>
  <input type='radio' 
  name='sweet-rude'id='rude' value='1'>
  <label for='rude'>rude</label>
  <hr>
  <select id='dropdown'>
    <option value=''>(favorite)</option>
    <option value='1'>Hello Kitty</option>
    <option value='2'>Kuromi</option>
    <option value='3'>Badtz-Maru</option>
    <option value='4'>Gudetama</option>
    <option value='5'>Tuxedo Sam</option>
    <option value='6'>Mimmy</option>
    <option value='7'>My Melody</option>
    <option value='8'>Kerropi</option>
    <option value='9'>Other</option>
  </select>
  </hr>
  <hr>
</h2 id='favorite color'>Favorite color:</h2>
  <input type='checkbox' id='purple' name='color' value='0'>
   <label for='purple'>purple</label>
  <input type='checkbox' id='black' name='color' value='1'>
   <label for='black'>black</label>
  <input type='checkbox' id='blue' name='color' value='2'>
   <label for='blue'>blue</label>
  <input type='checkbox' id='green' name='color' value='3'>
   <label for='green'>green</label>
  <input type='checkbox' id='red' name='color' value='4'>
   <label for='red'>red</label>
  <input type='checkbox' id='orange' name='color' value='5'>
   <label for='orange'>orange</label>
  <input type='checkbox' id='other' name='color' value='6'>
   <label for='other'>other</label>
  <textarea>additional comments</textarea>
  </hr>
<input id='submit' type='submit'>
  </form>
  </main>
  </body>
</html>

/* file: styles.css */
body {
background-image: url(https://i.pinimg.com/736x/b4/57/41/b4574190bf6f12ad5df08cf0c1784911--hello-kitty-backgrounds-phone-backgrounds.jpg);
background-size: 100% 100%;
font-family: serif;
}
h1, p {
  text-align: center;
}
h1 {
  margin-bottom: 0;
}
p {
  margin-top: 0;
  margin-bottom: 2rem;
}
label {
  font-family: serif;
}
form {
  padding: 15px 15px 25px 15px
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Cody_Biggs · August 25, 2023, 9:46pm

Since this complete I have moved it to the feedback section

This looks really good. This is a project you can use to enhance as you go through more of the curriculum

Just some notes, I would move the image down for smaller screen sizes. On my phone its hard to see some of the options because its overlapping with the img

You have one section that has options I think was “rude” or “sweet” but theres no question or description on why they are choosing between those options

Same thing for the favorite drop down. Theres just nothing there that indicates what the favorite is for or why they are choosing one.

Also you can move your text area and button further down on the page so they are not right under the color options. It would be nice to give space between the colors and the text area

Looking good though

fungus · August 26, 2023, 12:04am

thank you!! i’ll update you when im done : )

fungus · August 26, 2023, 1:49am

I’m not sure how to upload my code and website here again w/o making a new post. Do you?

Cody_Biggs · August 26, 2023, 1:51am

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

So you can use the button once to paste your html. Then make sure you start after the second set of bacticks and then use the button again so you can paste in your css

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

fungus · August 26, 2023, 2:45am

I think it’s looking much cleaner now!!

<!DOCTYPE html>
<style>       
    hr{
        height: 3.2px;
        background-color: #FF69B4;
        border: none;
    }
</style>
<html lang='en'>
  <head>
  <link rel="stylesheet" href="styles.css">
    <title>Sanrio Survey</title>
  </head>
<body>
  <header>
    <h1 id='title'>Sanrio Survey</h1>
  </header>
<main>
  <form id='survey-form'>
    <hr>
    <p>
    <label for='name'
    id='name-label'>*Name:</label>
  <input id='name' type='text' placeholder='Hello Kitty' required>
    </p>
  </hr>
  <hr>
    <p>
    <label for='email' id='email-label'>*Email:</label>
  <input id='email' type='email' placeholder='hellokitty@sanrio.com' required>
    <p>
  </hr>
  <hr>
    <p>
    <label for='number' id='number-label'>Age:</label>
  <input id='number' type='number' min='5' max='120' placeholder='8'>
    </p>
  </hr>
  <hr>
  <p>personality type</p>
  <p>
    <div>
  <input type='radio' class='radio' name='sweet-rude'id='sweet' value='0'>
   <label for='sweet'>sweet</label>
  <input class='radio' type='radio' 
  name='sweet-rude'id='rude' value='1'>
  <label for='rude'>rude</label>
    </div>
  </p>
  <hr>
  <p>favorite character</p>
  <p>
  <select id='dropdown'>
    <option value=''>(kuromi)</option>
    <option value='1'>hello kitty</option>
    <option value='2'>kuromi</option>
    <option value='3'>badtz-maru</option>
    <option value='4'>gudetama</option>
    <option value='5'>tuxedo sam</option>
    <option value='6'>mimmy</option>
    <option value='7'>my melody</option>
    <option value='8'>kerropi</option>
    <option value='9'>other</option>
  </select>
  </p>
  </hr>
  <hr>
<p id='favorite color'>favorite color:</p>
    <div>
  <input type='checkbox' id='purple' name='color' value='0'>
   <label for='purple'>purple</label>
  <input type='checkbox' id='black' name='color' value='1'>
   <label for='black'>black</label>
  <input type='checkbox' id='blue' name='color' value='2'>
   <label for='blue'>blue</label>
  <input type='checkbox' id='green' name='color' value='3'>
   <label for='green'>green</label>
  <input type='checkbox' id='red' name='color' value='4'>
   <label for='red'>red</label>
  <input type='checkbox' id='orange' name='color' value='5'>
   <label for='orange'>orange</label>
  <input type='checkbox' id='other' name='color' value='6'>
   <label for='other'>other</label>
    </div>
   <hr>
   <div>
  <textarea> additional comments...</textarea>
  </div>
  </hr>
  </hr>
  <div class='submit' id='submit' style='postion: fixed; top:px; left: 16px width: 145px; height: 21px;'>
    <hr>
<input id='submit' type='submit'>
</hr>
  </form>
  </main>
  </body>
</html>

* {
  font-family: cursive;
}
body {
background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-background-pink-with-sky-clouds-shape_41066-2077.jpg);
background-size: cover;
}
h1 {
  text-align: center;
  margin: 5 0 -2 0;
 background-color: #FF69B4;
}
label {
  font-family: cursive;
}
p {
text-align: center;
}
form {
  padding: 15px 15px 25px 15px
}
select {
  color:#8c8c8c;
}
div {
  text-align: center;
}
textarea {
  color:#8c8c8c;
}

fungus · August 26, 2023, 6:19am

How do I change the top heading’s background color size btw?

POETICBUILDS · August 26, 2023, 6:29am

You’re doing a great job. Keep it up

fungus · August 26, 2023, 7:10pm

Thank you so much!!!

Cody_Biggs · August 26, 2023, 7:25pm

Sorry, havent been home today. I can probably take a look at it in a few hours

m_kgood · September 24, 2023, 1:19am

hey fungus, as a beginner myself i have found a lot of inspiration from what you have done here! i too finished my form and am trying to spruce it up, but for the life of me i cannot figure out how to do a background image, i have studied your code, i even copied and pasted it and it didn’t work for me. i am able to change the color but no enter an image. i have tried adding a title background image to my html… i see you didn’t seem to have to enter anything in your html for it… anyway… i have been stuck for 3 hours… searched the web and this forum. can you give me any tips!?

system · March 24, 2024, 1:19pm

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