|
<h1 id="title">Invader Zim Survey</h1> |
|
<div id="form-outer"> |
|
<p id="description"> |
|
The Earth is mine to devastate... and I already promised the moon to GIR. |
|
</p> |
|
<form id="survey-form" method="GET" action="https://crossorigin.me/https://freecodecamp.com"> |
|
<!-- species --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label for="species">What are you?</label> |
|
</div> |
|
<div class="rightTab"> |
|
<select id="dropdown" name="species" class="dropdown"> |
|
<option disable selectedd value> Select an option</option> |
|
<option value="irken">Irken</option> |
|
<option value="human">Human</option> |
|
<option value="alien">Nhar-Gh'ok</option> |
|
<option value="alien">Vortian</option> |
|
<option value="alien">Meekrob</option> |
|
<option value="preferNo">Prefer not to say</option> |
|
<option value="other">Other</option> |
|
</select> |
|
</div> |
|
</div> |
|
<!-- gateway --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label for="userRating">What was your gateway to Invader Zim?</label> |
|
</div> |
|
<div class="rightTab"> |
|
<ul style="list-style: none;"> |
|
<li class="radio"><label>the TV Series<input name="radio-buttons" value="1" type="radio" class="userRatings" ></label></li> |
|
<li class="radio"><label>the Comic book series<input name="radio-buttons" value="2" type="radio" class="userRatings" ></label></li> |
|
<li class="radio"><label>the TV Movie<input name="radio-buttons" value="3" type="radio" class="userRatings" ></label></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<!-- most --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label for="most-like">Favorite? (There can be only one!)</label> |
|
</div> |
|
<div class="rightTab"> |
|
<select id="most-like" name="mostLike" class="dropdown"> |
|
<option disabled selected value>Select an option</option> |
|
<option value="zim">Zim</option> |
|
<option value="gir">Gir</option> |
|
<option value="dib">Dib</option> |
|
<option value="gaz">Gaz</option> |
|
</select> |
|
</div> |
|
</div> |
|
<!-- second --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label for="preferences">Almost favorite? (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="userRatings">Professor Membrane</label></li> |
|
<li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">Mrs. Bitters</li> |
|
<li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">The Almighty Tallest Red and Purple</label></li> |
|
<li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Tak</label></li> |
|
<li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">Minimoose</label></li> |
|
<li class="checkbox"><label><input name="prefer" value="6" type="checkbox" class="userRatings">Keef</label></li> |
|
<li class="checkbox"><label><input name="prefer" value="7" type="checkbox" class="userRatings">Roboparents</label></li> |
|
|
|
</ul> |
|
</div> |
|
</div> |
|
<!-- name --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label id="name-label" for="name">How shall you be called? </label> |
|
</div> |
|
<div class="rightTab"> |
|
<input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your preferred designation." required> |
|
</div> |
|
</div> |
|
<!-- contact --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label id="email-label" for="email">How shall you be contacted?</label> |
|
</div> |
|
<div class="rightTab"> |
|
<input type="email" name="email" id="email" class="input-field" required placeholder="Enter your contact info, if necessary."> |
|
</div> |
|
</div> |
|
<!-- years since decanting --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label id="number-label" for="age">Years since leaving the smeetery?</label> |
|
</div> |
|
<div class="rightTab"> |
|
<input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Enter your Earth, not Irken, years."> |
|
</div> |
|
</div> |
|
|
|
<!-- comments --> |
|
<div class="rowTab"> |
|
<div class="labels"> |
|
<label for="comments">Did we miss anything?</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> |
|
</div> |