Jean13/Dating Website Form.markdown

## Dating Website Form.markdown

      
    Raw
  

              Dating Website Form.markdown
            
          
    Dating Website Form

A dating website form done for The Hong Kong University of Science and Technology.
A Pen by Jean on CodePen.
License.

  
## index.html
<html>

<head>
  <title>Dating Form</title>
  <style>
    fieldset {background: lightyellow; border: 10px solid yellow; margin-bottom: 10px; width: 720px}
            label {width: 180px; display: inline-block; text-align: right; vertical-align: top}
            .leftLabel, .rightLabel {display: inline-block; padding: 2px; vertical-align: top; width: 5%; text-align: center}
            #address {width: 360px; height: 50px}
            .leftLabel {background-color: red; color: white}
            .rightLabel {background-color: purple; color: white}

            label:hover {font-size: 40px}
            input[type=text]:hover {font-size: 40px}
            input[type=radio]:hover {font-size: 40px}
            input[type=number]:hover {font-size: 40px}
            input[type=date]:hover {font-size: 40px}
            input[type=email]:hover {font-size: 40px}
            input[type=tel]:hover {font-size: 40px}
  </style>
</head>

<body>
  <h1>Please Enter Your Details For Our Dating Website!</h1>
  <form method="post" enctype="multipart/form-data" action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php">
    <fieldset>
      <legend>Your Face</legend>
      <label for="file">Your Image: </label>
      <input type="file" id="file" name="fileToUpload" required>
      <br>
      <label for="img">Image Preview: </label>
      <img id="preview">
    </fieldset>
    <br>
    <fieldset>
      <legend>Your General Details</legend>
      <label for="name">Name: </label>
      <input type="text" id="name" name="fullName" placeholder="Your full name" required>
      <br>
      <label for="gender">Gender: </label>
      <input type="radio" id="male" name="gender" value="male">Male
      <input type="radio" id="female" name="gender" value="female">Female
      <br>
      <label for="age">Age: </label>
      <input type="number" id="age" name="age" min="0" max="105" required>
      <br>
      <label for="dob">Date of Birth: </label>
      <input type="date" id="dob" name="dateofbirth">
      <br>
      <label for="color">Favorite Color: </label>
      <input type="color" id="color" name="favcolor">
      <br>
      <label for="country">Which Country: </label>
      <select id="country" name="country">
        <option value="select">-- Select A Country --</option>
        <option value="usa">United States of America</option>
        <option value="uk">United Kingdom</option>
        <option value="cn">China</option>
        <option value="jp">Japan</option>
        <option value="spain">Spain</option>
      </select>
    </fieldset>
    <br>
    <fieldset>
      <legend>Your Indicators</legend>
      <label for="height">Height: </label>
      <span class="leftLabel">Short</span>
      <input type="range" min="0" max="100" step="5" value="50" id="height" name="height"> <span class="rightLabel">Tall</span>
      <br>
      <label for="salary">Salary: </label>
      <span class="leftLabel">Poor</span>
      <input type="range" min="0" max="100" step="5" value="50" id="salary" name="salary"> <span class="rightLabel">Rich</span>
    </fieldset>
    <br>
    <fieldset>
      <legend>Your Contact Information</legend>
      <label for="email">Email: </label>
      <input type="email" id="email" name="email" placeholder="youremail@stuff.com" required>
      <br>
      <label for="phone">Mobile: </label>
      <input type="tel" id="phone" name="phone" placeholder="xxx-xxx-xxxx">
      <br>
      <label for="address">Address: </label>
      <textarea rows="3" cols="60" id="address" name="address"></textarea>
      <br>
      <label for="contactmethod">Method To Contact You: </label>
      <input type="checkbox" id="email" name="contactmethod" value="email">E-mail
      <input type="checkbox" id="skype" name="contactmethod" value="skype">Skype
      <input type="checkbox" id="chat" name="contactmethod" value="in app chat">In-app Chat
    </fieldset>
    <br>
    <input type="submit" value="Submit">
  </form>
  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js"></script>
</body>

</html>
	<html>

	<head>
	<title>Dating Form</title>
	<style>
	fieldset {background: lightyellow; border: 10px solid yellow; margin-bottom: 10px; width: 720px}
	label {width: 180px; display: inline-block; text-align: right; vertical-align: top}
	.leftLabel, .rightLabel {display: inline-block; padding: 2px; vertical-align: top; width: 5%; text-align: center}
	#address {width: 360px; height: 50px}
	.leftLabel {background-color: red; color: white}
	.rightLabel {background-color: purple; color: white}

	label:hover {font-size: 40px}
	input[type=text]:hover {font-size: 40px}
	input[type=radio]:hover {font-size: 40px}
	input[type=number]:hover {font-size: 40px}
	input[type=date]:hover {font-size: 40px}
	input[type=email]:hover {font-size: 40px}
	input[type=tel]:hover {font-size: 40px}
	</style>
	</head>

	<body>
	<h1>Please Enter Your Details For Our Dating Website!</h1>
	<form method="post" enctype="multipart/form-data" action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php">
	<fieldset>
	<legend>Your Face</legend>
	<label for="file">Your Image: </label>
	<input type="file" id="file" name="fileToUpload" required>
	<br>
	<label for="img">Image Preview: </label>
	<img id="preview">
	</fieldset>
	<br>
	<fieldset>
	<legend>Your General Details</legend>
	<label for="name">Name: </label>
	<input type="text" id="name" name="fullName" placeholder="Your full name" required>
	<br>
	<label for="gender">Gender: </label>
	<input type="radio" id="male" name="gender" value="male">Male
	<input type="radio" id="female" name="gender" value="female">Female
	<br>
	<label for="age">Age: </label>
	<input type="number" id="age" name="age" min="0" max="105" required>
	<br>
	<label for="dob">Date of Birth: </label>
	<input type="date" id="dob" name="dateofbirth">
	<br>
	<label for="color">Favorite Color: </label>
	<input type="color" id="color" name="favcolor">
	<br>
	<label for="country">Which Country: </label>
	<select id="country" name="country">
	<option value="select">-- Select A Country --</option>
	<option value="usa">United States of America</option>
	<option value="uk">United Kingdom</option>
	<option value="cn">China</option>
	<option value="jp">Japan</option>
	<option value="spain">Spain</option>
	</select>
	</fieldset>
	<br>
	<fieldset>
	<legend>Your Indicators</legend>
	<label for="height">Height: </label>
	<span class="leftLabel">Short</span>
	<input type="range" min="0" max="100" step="5" value="50" id="height" name="height"> <span class="rightLabel">Tall</span>
	<br>
	<label for="salary">Salary: </label>
	<span class="leftLabel">Poor</span>
	<input type="range" min="0" max="100" step="5" value="50" id="salary" name="salary"> <span class="rightLabel">Rich</span>
	</fieldset>
	<br>
	<fieldset>
	<legend>Your Contact Information</legend>
	<label for="email">Email: </label>
	<input type="email" id="email" name="email" placeholder="youremail@stuff.com" required>
	<br>
	<label for="phone">Mobile: </label>
	<input type="tel" id="phone" name="phone" placeholder="xxx-xxx-xxxx">
	<br>
	<label for="address">Address: </label>
	<textarea rows="3" cols="60" id="address" name="address"></textarea>
	<br>
	<label for="contactmethod">Method To Contact You: </label>
	<input type="checkbox" id="email" name="contactmethod" value="email">E-mail
	<input type="checkbox" id="skype" name="contactmethod" value="skype">Skype
	<input type="checkbox" id="chat" name="contactmethod" value="in app chat">In-app Chat
	</fieldset>
	<br>
	<input type="submit" value="Submit">
	</form>
	<script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js"></script>
	</body>

	</html>