Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
Hi,

Schermata 2023-12-26 alle 7.33.02 PM
Schermata 2023-12-26 alle 7.33.02 PM1220×1576 178 KB

I’m attaching the screenshot so you can understand what my problem is

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>

<div class='datiPersonali'>

<form id='survey-form'>

  <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' 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: mistyrose;
}


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: 30px;
  text-decoration: underline dashed rgb(83, 35, 83);  
}

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

2

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!

3

Welcome to the forum @edoardomaldone.work !

Try moving the following

to just below the

You may be pleasantly surprised by how one move can fix many problems.

Happy coding!

2 Likes
4

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