<html>
  <head>
  </head>
   <body>
     
     <h1 id="title" class="text-center"> Literature Survey Form</h1>
     
     <p id="description" class="description text-center">Tell us your favorite Literature Genre</p>
     
     <form id="survey-form">
       
         <label id="name-label" for="name">Name</label><br><input type="text" id="name" name:"name" class="form-control" placeholder="enter your name" required><br>
       
      <label id="email-label" for="email">Email</label><br><input type="email" id="email" name="email" class="form-control" placeholder="enter your mail" required><br>
       <label id="age-label" for="number">Age</label><br><input type="number" id="number" name="age" min="10" max="99" class="form-control" placeholder="enter your age" required>
   
     
        <br><label id="genre-label">Choose your favorite genre</label><br>
    <select id="dropdown" name="genres" class="form-control" required>
      <option>select your favorite gender</option>
      <option value="biography">biography</option> 
      <option value="drama">drama</option>   
      <option value="dystopian">dystopian</option>
      <option value="fantasy">fantasy</option>
      <option value="historical">historical</option>
       <option value="horror">horror</option>
      <option value="humor">humor</option>
      <option value="magical realism">magical realism</option>
      <option value="mithology">mithology</option>
      <option value="poetry">poetry</option>
      <option value="sciencefiction">science fiction</option>
       </select>
       
       <br><label id="role-label">What's your current role?</label><br>
      <div><input type="radio" name="role" value="student" class="input-radio" checked>student<br>
       <input type="radio" name="role" value="teacher" class="input-radio">teacher<br>
       <input type="radio" name="role" value="investigator" class="input-radio">investigator</div>
       
      
    
     <br><label id="reader-label">What kind of reader you are?</label><br><div><input type="checkbox" value="hungryreader" name="type" class="input-checkbox">hungry reader<br>
    <input type="checkbox" value="occasionalreader" name="type" class="input-checkbox">occasional reader<br>
    <input type="checkbox" value="lazyreader" name="type" class="input-checkbox">lazy reader<br>
       <input type="checkbox" value="nullereader" name"type" class="input-checkbox">nulle reader</div><br>
       
       <label id="comment-label">Any comments?<br><span class="clue">(feel free for recommend us others genres)</span></label><br><textarea id="comments" class="input-textarea" name="comment" placeholder="write your additional comments here..."></textarea><br>
       
       <br><button type="submit" id="submit" class="submit-button">Submit</button>
      
       
     </form>
     
  </body>
</html>
body 
{font-family: sans-serif;
margin:0; 
background: #4568dc
;}
  

#title {font-size: 35px; text-align: center; margin-top:4%; color:white}
#description { color:white; font-style: italic; text-align: center; font-size: 25px;}

form {margin: 4% 30% 5% 30%; padding-top: 30px; padding-left: 30px;
font-size:20px; background-color:#B06AB3 ;}

#name-label {font-weight: bold}
#email-label {font-weight: bold}
#age-label {font-weight: bold}

.form-control{ margin-top: 10px; margin-bottom: 30px; width: 80%; padding: 2%; border:none;
}

#genre-label{font-weight: bold;}

#role-label{font-weight: bold;}
div{margin-top: 10px; margin-bottom: 10px; border:none;}
.input-radio{margin-top: 10px; border:none; }

#reader-label{font-weight: bold;}
.input-checkbox{margin-top:10px; border:none;}

#comment-label{font-weight: bold;}
.clue{font-weight: normal; font-size: 17px;}

textarea{ margin-top: 10px; width: 85%; min-height:60px; border:none;}

button{background: #f64f59; min-height: 40px; width: 86%; margin-bottom: 30px; border: none;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.