<h1 id="title">Survey Form</h1>
<div class="white-box">
  <p id="description"> That's what she said...
  A survey on <i>The Office</i> (the US version).</p>
  <form id="survey-form" method="GET" action="">
  <div class="rowTab">
    <div class="labels">
      <label id="name-label" for="name">*Name:</label>
    </div>
   <div class="rightForm">
    <input autofocus type="text" class="input-field" id= "name" name="name" required placeholder="ENTER YOUR NAME">
  </input>
  </div>
</div>

<div class="rowTab">
<div class="labels">
<label id="email-label" for="email">*E-Mail:</label>
</div>
<div class="rightForm">
<input type="email" name="email" id="email" class="input-field" required placeholder="ENTER YOUR E-MAIL"> </input>
</div>
</div>

<div class="rowTab">
<div class="labels">
<label id="number-label" for="age">*Age:</label>
  </div>
<div class="rightForm">
<input class="input-field" type="number" name="age" id="number" min="1" max="150" required placeholder="AGE"></input>
</div>
  </div>
<div class="labels">
<label for="currentPos">Who is your favorite <i>the Office</i> character?</label>
</div>
<div class="rightForm">
  <select id="dropdown" class="dropdown" name="currentPos">
    <option disabled value>Select an option</option>
    <option value="Michael">Michael</option>
    <option value="Jim">Jim</option>
    <option value="Pam">Pam</option>
    <option value="Dwight">Dwight</option>
    <option value="Ryan">Ryan</option>
    <option value="Kelly">Kelly</option>
    <option value="Creed">Creed</option>
    <option value="Angela">Angela</option>
    <option value="Andy">Andy</option>
    <option value="Holly">Holly</option>
    <option value="Kevin">Kevin</option>
    <option value="Erin">Erin</option>
    <option value="Phyllis">Phyllis</option>
    <option value="Oscar">Oscar</option>
    <option value="Toby">Toby</option>
  </select>
</div>

<div class="rowTab">
  <div class="labels">
  <label>Which bear is best?</label>
  </div>
<div class="rightForm">
  <ul style="list-style:none;">
  <li class="radio"><label><input name="radio-buttons" value="1" type="radio"> Brown Bear</label></li>
<li class="radio"><label><input name="radio-buttons" type="radio" value="1"> Black Bear</label></li>
<li class="radio"><label><input name="radio-buttons" type="radio" value="1"> Bear. Beets. Battlestar Galactica.</label></li>
</div>
</ul>
</div>

<div class="rowTab">
  <div class="labels">
<label for="most-like">Which are your favorite <i>The Office</i> pairing(s)?</label>
</div>
  <div class="rightForm">
    <ul style="list-style:none;">
<label for="The Office">
  <li class="checkbox"><input type="checkbox" name="prefer" value="1"> Michael+Holly</input></li>
    <li class="checkbox"><input type="checkbox" name="prefer" value="2"> Jim+Pam</input></li>
<li class="checkbox"><input type="checkbox" name="prefer" value="3"> Kelly+Ryan</input><li>
<li class="checkbox"><input type="checkbox" name="prefer" value="4"> Dwight+Angela</input></li>
</label>
</div>
</ul>
</div>

<div class="rowTab">
  <div class="labels">
<label for="comments">If you have any additional comments or questions, enter it here:</label>
  </div>
  <div class="rightForm">
  <textarea required placeholder="COMMENT HERE" rows="3" cols="30"></textarea>
  </div>
  </div>
  <button id="submit">SUBMIT</button>
</form>
  </div>