Modulo di sondaggio - Crea un modulo di sondaggio

Italiano HTML-CSS
1

Tell us what’s happening:

non riesco a far si che le label coi checkbox siano allineate, non capisco cosa debba mettere sul ccs, perfavore aiuto

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
  </head>
  <body>

    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for using your time to answer this survey, it is very important for us to improve!!!</p>

<form id="survey-form">
 <fieldset>
    <label id="name-label">Name<input id="name" type="text" value="" placeholder="Enter your Name..." required></label>
    <label id="email-label">Email<input id="email" type="email" value="" placeholder="Enter your Email..."  required></label>
    <label id="number-label">Age<input id="number" type="number" min="14" max="100" value="number" placeholder="Age"></label>
</fieldset>

<fieldset>
  <label for="dropdown">What's your role?
    <select id="dropdown" name="options">
      <option value="0" disabled selected>Select your role</option>
      <option value="1">Student</option>
      <option value="2">Part-time job</option>
      <option value="3">Full-time job</option>
      <option value="4">Prefer not to say</option>
      <option value="5">Other</option>
    </select>
  </label>
</fieldset>

  <fieldset>
   <legend>Would you recommend our WebSite to your fiends?</legend>
    <label for="selection-1"><input id="selection-1" type="radio" value="selection-1" name="selection" class="inline">Yes</label>
    <label for="selection-2"><input id="selection-2" type="radio" value="selction-2" name="selection" class="inline">Maybe</label>
    <label for="selection-3"><input id="selection-3" type="radio" value="selection-3" name="selection" class="inline">No</label>
  </fieldset>

  <fieldset>
   <legend>What's your favorite Browser?</legend>
    <select id="preferences" name="preferences">
      <option value="0" disabled selected>Select your favorite Browser</option>
      <option value="1">Google Chrome</option>
      <option value="2">Mozilla Firefox</option>
      <option value="3">Microsoft Edge</option>
      <option value="4">Apple Safari</option>
      <option value="5">Opera</option>
    </select>
  </fieldset>

  <fieldset>
   <legend>Help us to improve!</legend>
    <input type="checkbox" id="navigation" name="improvement" value="navigation" class="inline"><label for="navigation">Simplify navigation</label>
    <input type="checkbox" id="speed" name="improvement" value="speed" class="inline"><label for="speed">Improve the speed loading screen</label>
    <input type="checkbox" id="design" name="improvement" value="design" class="inline"><label for="design">Enhance design and layout</label>
    <input type="checkbox" id="content" name="improvement" value="content" class="inline"><label for="content">Add more engangin content</label>
    <input type="checkbox" id="mobile" name="improvement" value="mobile" class="inline"><label for="mobile">Optimize for mobile devices</label>
    <input type="checkbox" id="accesibility" name="improvement" value="accesibility" class="inline"><label for="accesibility">Make it more accesible</label>
    <input type="checkbox" id="seo" name="improvement" value="seo" class="inline"><label for="seo">Optimize for search engines(SEO)</label>
  </fieldset>

<legend>Any comment or suggestion?</legend>
<textarea placeholder="add any suggestions or advice..." rows="5" cols"100" ></textarea>
  <input type="submit" id="submit" value="submit">

  </form>
  </body> 
 </html>


body {
  background-color: #8d99ae;
  width: 100%;
  height: 100%;
  color: #2b2d42;
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
  }

form {
  background-color: #edf2f4;
  padding-top:10px;
  padding-right:70px;
  padding-left:70px;
  padding-bottom:10px;
  border-radius: 40px;
  margin: 70px 70px 70px 70px;
}

h1, p {
  text-align: center;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 2px solid #8d99ae
}

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

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea{
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #2b2d42;
  border-color: white;
  min-width: 300px;
}

Your browser information:

Lo user agent è: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Modulo di sondaggio - Crea un modulo di sondaggio

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

fatto, spero si legga bene

4

potresti mettere l’input dentro il label corrispondente e non hai bisogno del CSS per allinearli

1 Like
5

Grazie mille!, davvero, buona serata.