Survey Form - Build a Survey Form

Tell us what’s happening:

Describe your issue in detail here.
How can i organise with CSS the elements in the checkbox and in the radio buttons?? Thanks a lot :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CaseVacanzeRoma</title>
</head>
<body>
<section class='organizza'>
<h1 id='title'>Sondaggio Case Vacanze Roma</h1>
<p id='description'>Valutazione soddisfazione dei clienti 😃</p>

<form id='survey-form'>

  <div class='datiPersonali'>

  <label id='name-label' for='name'>Nome: 
  <input type='text' name='nome' placeholder='nome'  required id='name'></label>

  <label id='email-label' for='email'> Email:    <input type='email' name='email' placeholder='inserire email' required id='email'></label>

  <label id='number-label' for='number'>Valutazione:

  <input type='number' placeholder='valutazione' id='number' name='number' min='1' max='10' required></label>

  </div>

 

  <p>Cosa ti ha colpito maggiormente 🤯:</p>
  <label></label>

<select name="voti" id="dropdown">
  <option value="">--Scegli un opzione--</option>
  <option value="check-in">Check-in</option>
  <option value="pulizia">Pulizia</option>
  <option value="accuratezza">Accuratezza</option>
  <option value="comunicazione">Comunicazione</option>
  <option value="posizione">Posizione</option>
  <option value="qualità-prezzo">Qualità-Prezzo</option>
</select>



<div class='gruppo-sondaggio'>

<p>Valutazione del tuo soggiorno 🚀</p>
<label for='dropdown'>Scegli una valutazione:</label>

<select name="voti" id="dropdown">
  <option value="">--Scegli un opzione--</option>
  <option value="ottima">Ottima</option>
  <option value="buona">Buona</option>
  <option value="sufficiente">Sufficiente</option>
  <option value="insufficiente">Insufficiente</option>
  <option value="pessima">Pessima</option>

</select>

</div>

<div class='gruppo-sondaggio'>


<p>Consiglieresti questo appartamento?</p>

<label for='user-recommend'>
<input name='user-recommend' id='user-recommend' value="decisamente si" type="radio" class="input-radio" checked>Decisamente si</label>

<label for='user-recommend'>
<input name="user-recommend" value="decisamente no" type="radio" class="input-radio">Decisamente no</label>

<label for='user-recommend'>
<input name="user-recommend" value="forse" type="radio" class="input-radio">Forse</label>

</div>

<div class='gruppo-sondaggio'>

<p>Cosa miglioreresti nell'appartamento?</p>

<label>
  <input name="prefer" value="servixi" type="checkbox" class="input-checkbox"> Servizi
  </label>

<label>
  <input name="prefer" value="accoglienza" type="checkbox" class="input-checkbox"> Accoglienza
  </label>

  <label>
    <input name="prefer" value="elettrodomestici" type="checkbox" class="input-checkbox"> Elettrodomestici
    </label>

    <label>
      <input name="prefer" value="biancheria" type="checkbox" class="input-checkbox"> Biancheria
      </label>

      <label>
        <input name="prefer" value="mobili" type="checkbox" class="input-checkbox"> Mobili
        </label>
        </div>

<div class='gruppo-sondaggio'>

     <p>Raccontaci la tua esperienza ✈️:</p>
        <textarea id='recensione' class'recensione-casa' rows='3' placeholder='la tua esperienza...' name='recensione'>
          </textarea>
          </div>

<div class='gruppo-sondaggio'>

          <button type='submit' class='submit-button' id='submit' name='submit'>Submit 🙌🏻</button>
</div>

</form>
</section>
</body>
</html>
/* file: styles.css */
body {
   background-color: grey;
   color: white;
   margin: 10px;
}


h1 {
  text-align: center;
  font-family: Georgia;
  color: rgb(83, 35, 83);
  text-decoration:  underline;
}

label {
  display: block;
}

#description {
  text-align: center;
  font-family: Georgia;
  font-size: 25px;
  padding: 10px;  
}

form {
  margin: 10px;
  padding: 20px 0;
}

#submit {
  margin: 20px 50px;
}

#survey-form {
  text-align: center;
}

p {
  text-decoration: underline
}

#number-label {
  padding-right: 68px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

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