Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
It all seems to be working fine. I’m just not happy with it. Of course, I had to look into my previous codes a bunch of times. But I guess, as I spend more time writing code I’ll get better. What I’m not happy about is the aesthetics. Like when I was being directed it was very easy to just code, but this time I had to create the entire CSS by myself.
I’d like the honest opinion of you guys on my code (if something is faulty/redundant/missing etc.) and the stylesheet (or aesthetics) too. I’m thinking maybe I’ll do a short UI course once I’m done with front-end. I’d love any advice to work upon :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width= device width, initial-scale=1.0"/>
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
  <body>
    <h1 id=title><strong>Survey Form</strong></h1>
    <p id=description><em>Thank you for taking the time to answer our questions.</em></p>
    <div>
    <form id="survey-form">
      <label for="name">Full Name: <input id="name" name="full-name" type="text" placeholder="Enter your name" required/></label>
      <label for="email">Email: <input id="email" name="email" type="email" placeholder="Enter your email" required/></label>     
      <label id="email-label">Alternate Email (optional): <input id="email-label" name="alt-email" type="email" placeholder= "Enter alternate email" /></label>
      <hr></hr>
      <label>Age: <input id="number" type="number" min="13" max="100" placeholder="Age" required/></label>
      <label id="name-label">State: <input id="name-label" name="state" type="text" placeholder="e.g. Washington" required/></label>
      <label id="number-label">Work Expreience: <input id="number-label" name="work-exp" type="number" min="0" placeholder= "(in years)"/></label></label>
      <label>Gender: 
        <select id="dropdown" name="gender" required>
          <option>(select one)</option>
          <option>Male</option>
          <option>Female</option>
          <option>Others</option>
          <option>Prefer not to say<option>
        </select>
      </label>
      <hr></hr>
      <legend>Previous work background:</legend>
        <label><input type="radio" name="work-bg" value="yes" class="inline"> Tech</label>
        <label><input type="radio" name="work-bg" value="no" class="inline" checked> Non-Tech</label>
      <legend>Coding Experience:
        <label><input type="checkbox" value="0" class="inline" checked> No experience</label>
        <label><input type="checkbox" value="1a" class="inline">Attended bootcamps/courses</label>
        <label><input type="checkbox" value="1b" class="inline">Self-taught</label>
        <label><input type="checkbox" value="2" class="inline">Did freelancing</label>
        <label><input type="checkbox" value="3" class="inline">Worked as a/an intern/fresher</label>
      </legend>
      <hr></hr>
      <label>Why do you want to be a full-stack developer?<textarea placeholder="I want to be a fullstack developer because ..." rows="4"></textarea></label>
      <button id="submit" type="submit">Submit</button>
      </div>
    </form>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #385170;
  Font-family: Georgia;
}

div {
  background-color: #142d4c;
  width: 80%;
  max-width: 500px;
  margin: auto;
  padding: 7px 15px 1px 15px;
  color: #ececec;
}

h1, p {
  text-align: center;
  margin: 1rem auto;
  color: #9fd3c7
}

label {
  display: block;
  margin: 0.4rem 0;
}

input, textarea, select {
  min-height: 1.7em;
  width: 100%;
  margin: 10px 0 0 0;
  background-color: #ececec;
  border: 1px solid #ececec;
}

hr {
  border: 1.5px double #9fd3c7;
  margin-top: 0.9rem
}

hr:last-of-type {
  margin-top: 5px
}

.inline {
  width: unset;
  margin: 0 0.4rem;
  vertical-align: middle
}

button {
  margin: 1rem auto;
  font-family: Georgia;
  background-color: #385170;
  border-color: #ececec;
  color: #ececec;
  width: 40%;
  height: 2rem;
  font-size: 16px;
  display: block
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Look good, its nice and responsive and looks like everything is spaced equally. No unused or empty space which is nice. Something you can add is a hover for your submit button add a color when the button is hovered over and change the cursor on the hover so the button actually looks clickable

1 Like
3

Make sure to close the head tag before opening the body tag.
The legend tags for “Previous work background” and “Coding Experience” should be placed inside fieldset tags for better semantic structure.
Consider adding the for attribute to each label element and corresponding id attributes to the associated input elements. This will improve accessibility by allowing users to click on the label to focus on the associated input.
It looks good…

1 Like
4

Thank you for the tips!!

1 Like
5

Haha yeah, rookie mistake with the head tag.
Also, I didn’t add any fieldset element, though I feel like I should have. It felt wrong not to have it.
Got it! I thought it’s the same if I nest it in-between the label tags. But I’ll remember for the next projects to have ids and use them in the label tag.
Thanks, I looked up the color palettes on the internet, haha.

1 Like
6

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