<!--
Raymond T. Martin
7/16/2018
This is an edited version of Free Coding Camps Survey Form Project. Using their example as a guideline i've adjusted theirs and came up with this.
-->

<h1 id=title>Survey Form</h1>
<div id="form-outer">
  <p id="description">
    What would be your ideal watch?
  </p>
    <div class="rowTab">
      <div class="labels">
        <label id="name-label" for="name">* Name: </label>
      </div>
      <div class="rightTab">
        <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label id="email-label" for="email">* Email: </label>
      </div>
      <div class="rightTab">
        <input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email">
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label id="number-label" for="age">* Age: </label>
      </div>
      <div class="rightTab">
        <input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age">
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="currentPos">Preferred Watch Strap?</label>
      </div>
      <div class="rightTab">
        <select id="dropdown" name="currentPos" class="dropdown">
      <option disabled value>Select an option</option>
      <option value="classicLeather">Classic Leather</option>
      <option value="contractStitching">Contrast Stitching</option>
      <option value="doubleRidge">Double Ridge Strap</option>
      <option value="rally">Rally</option>
      <option value="nato">NATO</option>
      <option value="zulu">Zulu</option>
      <option value="link">Link/Bracelet Strap</option>
      <option value="aviator">Aviator (Pilot)</option>
              <option value="bund">Bund</option>
          <option value="tropicRubber">Tropic/Rubber</option>
    </select>
    </select>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="watchesOwned">How many watches do you own?</label>
      </div>
      <div class="rightTab">
        <ul style="list-style: none;">
          <li class="radio"><label>4+<input name="radio-buttons" value="1"  type="radio" class="watchesOwned" ></label></li>
          <li class="radio"><label>1-3<input name="radio-buttons" value="2"  type="radio" class="watchesOwned" ></label></li>
          <li class="radio"><label>0<input name="radio-buttons" value="3"  type="radio" class="watchesOwned" ></label></li>
        </ul>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="most-like">What's your favorite watch brand? </label>
      </div>
      <div class="rightTab">
        <select id="most-like" name="mostLike" class="dropdown">
      <option disabled selected value>Select an option</option>
      <option value="rolex">Rolex</option>
      <option value="omega">Omega</option>
      <option value="vincero">Vincero</option>
      <option value="casio">Casio</option>
      <option value="timex">Timex</option>
      <option value="seiko">Seiko</option>
    </select>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="preferences">Brands you've previously heard about<br>(Check all that apply): </label>
      </div>
      <div class="rightTab">
        <ul id="preferences" style="list-style: none;">
          <li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="heardOf">Rolex</label></li>
          <li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">Omega</li>
          <li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="heardOf">Vincero</label></li>
          <li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="heardOf">Casio</label></li>
          <li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="heardOf">Timex</label></li>
          <li class="checkbox"><label><input name="heardOf" value="6" type="checkbox" class="userRatings">Seiko</label></li>
        </ul>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="comments">Any Comments or Suggestions?</label>
      </div>
      <div class="rightTab">
        <textarea id="comments" class="input-field" style="height:50px;resize:vertical;" name="comment" placeholder="Enter your comment here :)"></textarea>
      </div>
    </div>
    <button id="submit" type="submit">Submit</button>
  </form>
</div>