Survey Form - Build a Survey Form

Feedback please. This is what I have completed so far. I would like to get feedback because I know there are a lot of things to improve, also when I hover the mouse over the select element, it changes its size, moving all the form elements bellow the select element, how can I resolve this. thank you


in advance.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
    <title>Calisthenic Form</title>
  </head>
  <body>
    <h1 id="title">Calisthenic Form</h1>
    <p id="description">Let us know your favorite calisthenic's excersices.</p>
    <form action='https://register-demo.freecodecamp.org' id="survey-form">
    <fieldset>
      <label id="name-label">Full Name: <input id="name" name="name" type="text" required placeholder="Enter your name." /></label><br>
     <label id="email-label">Email: <input name="email" id="email" type="email" required placeholder="Provide a valid email." /></label><br>
     <label id="number-label">Age: <input id="number" name="number" type="number" min="15" max="120" placeholder="Years." /></label>
    </fieldset>
    <fieldset>
      <label for="exercise">What's your favorite calisthenic's excersice?
        <select id="dropdown" name="exercise">
          <option value="">(Select one)</option>
          <option value="1">Push-ups.</option>
          <option value="2">Pull-ups.</option>
          <option value="3">Chin-ups.</option>
          <option value="4">Plank.</option>
          <option value="5">Lunges.</option>
          <option value="6">Other.</option>
        </select> 
      </label>  
    </fieldset>
    <fieldset>
      <label>Where do you do calisthenics?<br><input value="1" id="indoor" type="radio" name="place" class="inline" />Indoor</label>
      <label><input value="2" id="outdoor" type="radio" name="place" class="inline" />Outddoor</label>
      <label><input value="3" id="other" type="radio" name="place" class="inline" />Other</label>
    </fieldset>
    <fieldset>
      <legend>What equipment do you use?</legend>
      <label for="rings"><input id="rings" value="rings" name="equipment" type="checkbox" checked class="inline" />Gymnastics Rings.</label>
      <label for="parallettes"><input id="parallettes" value="parallettes" name="equipment" type="checkbox" class="inline" />Parallettes.</label>
      <label for="Others"><input id="Others" value="Others" name="equipment" type="checkbox" class="inline" />Others.</label>
      <label for="body"><input id="body" value="body" name="equipment" type="checkbox" class="inline" />Only my body.</label>
    </fieldset>
    <fieldset>
      <label for="journey">Share your calisthenic journey:
        <textarea id="journey" name="journey" rows="4" cols="40" placeholder="I started when I was 15 years old..."></textarea>
      </label>
    </fieldset>
    <input id="submit" type="submit" value="Submit">
    </form>
          <footer>
        <p>Sebastian BG</p>
      </footer>
  </body>
/* file: styles.css */
body{
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: rgb(245, 255, 250);
  background-attachment: fixed;
  font-size: 18px;
  font-family: cursive;
  background-image: url(https://lh3.googleusercontent.com/pw/AMWts8Cl1MEhxXiim6Rqw28nDZF2hrt5-r-iuOu-Mq4NoGi676XXULXnZKsAGJfPgtc-4jbcI9E9gwsfz7FGMNAjtfptktmB6yBCnb42NtRGhWnO_HwCgn9iTqhnJ4QnRLc3CXX5Qjcsnrszs2aS-VqEh9yw=w759-h500-s-no) 
}

h1, p {
  text-align: center;
  text-shadow: 0 0 20px #000000, 0 3px #000000;
}

fieldset {
  border: none;
}
form {
  background-color: #352f44;
  color: #dbd8e3;
  padding: 10px 10px 15px 10px;
  border-radius: 10px;
  margin: 0 auto;
}
label {
  display: block;
}
input, select {
  border-radius: 10px;
}
input, select, textarea {
  width: 100%;
}
.inline {
  width: unset;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #dbd8e3;
  border-color: 352f44;
  min-width: 300px;
  }
  input[type="submit"]:hover, 
  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="number"]:hover,
  input[type="radio"]:hover,
  input[type="checkbox"]:hover,
  select:hover {
  border: 2px solid #871F78;
  box-shadow: 0 0 10px #871F78 ;
  cursor: pointer;
  }

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like

You have added hover effect on select element that changes its border width.
This is an example that you can try:

input:hover   
    {
  border: 10px solid #871F78;
  box-shadow: 0 0 10px #871F78 ;
  cursor: pointer;
  }

I have exclude the select element from the rule, but all input elements will move when you hover over them because of the exaggerated border width.

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