128 lines
3.4 KiB
HTML
128 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>User registration</title>
|
|
<meta charset="UTF-8">
|
|
<link href="style.css" rel="stylesheet">
|
|
<script src="script.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>User registration</h1>
|
|
</header>
|
|
<main>
|
|
<form id="userinfo">
|
|
<fieldset>
|
|
<legend>What is your personal information?</legend>
|
|
<div id="name">
|
|
<label for="prename">
|
|
<input type="text" id="prename" name="userinfo" placeholder="Prename" required>
|
|
</label>
|
|
<label for="surname">
|
|
<input type="text" id="surname" name="userinfo" placeholder="Surname" required>
|
|
</label>
|
|
</div>
|
|
<div id="logininfo">
|
|
<label for="email">
|
|
<input type="email" id="email" name="userinfo" placeholder="Email" required>
|
|
</label>
|
|
<label for="password">
|
|
<input type="password" id="password" name="userinfo" minlength="16" maxlength="1024" placeholder="Password" required>
|
|
</label>
|
|
</div>
|
|
<div id="phone_container">
|
|
<label for="phone">
|
|
<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="userinfo" placeholder="Phone" required>
|
|
</label>
|
|
</div>
|
|
<label for="birthdate">
|
|
Birthdate:
|
|
<input type="date" id="birthdate" max="2007-10-23" name="userinfo">
|
|
</label>
|
|
<div>
|
|
Country:
|
|
<select name="countries" id="country-select">
|
|
<option value="">--Please choose a country--</option>
|
|
<option value="norway">Norway</option>
|
|
<option value="germany">Germany</option>
|
|
<option value="denmark">Denmark</option>
|
|
<option value="china">China</option>
|
|
</select>
|
|
</div>
|
|
<br>
|
|
<fieldset id="gender">
|
|
<legend>Gender:</legend>
|
|
<label for="male">
|
|
<input type="radio" id="male" name="gender" required>
|
|
Male
|
|
</label>
|
|
<br>
|
|
<label for="female">
|
|
<input type="radio" id="female" name="gender">
|
|
Female
|
|
</label>
|
|
<br>
|
|
<label for="other">
|
|
<input type="radio" id="other" name="gender">
|
|
Other
|
|
</label>
|
|
</fieldset>
|
|
<fieldset id="interests">
|
|
<legend>Interests:</legend>
|
|
<label for="sports">
|
|
<input type="checkbox" id="sports" name="interests">
|
|
Sports
|
|
</label>
|
|
<br>
|
|
<label for="reading">
|
|
<input type="checkbox" id="reading" name="interests">
|
|
Reading
|
|
</label>
|
|
<br>
|
|
<label for="traveling">
|
|
<input type="checkbox" id="traveling" name="interests">
|
|
Traveling
|
|
</label>
|
|
</fieldset>
|
|
<label for="comments">
|
|
Comments:
|
|
<br>
|
|
<textarea id="comments" name="comments"></textarea>
|
|
</label>
|
|
<br>
|
|
<p>Satisfaction level: <output id="satisfaction_level"></output></p>
|
|
<label for="satisfaction">
|
|
<input type="range" id="satisfaction" name="userinfo" min="1" max="10" step="1" value="5" list="markers">
|
|
<datalist id="markers">
|
|
<option value="1"></option>
|
|
<option value="2"></option>
|
|
<option value="3"></option>
|
|
<option value="4"></option>
|
|
<option value="5"></option>
|
|
<option value="6"></option>
|
|
<option value="7"></option>
|
|
<option value="8"></option>
|
|
<option value="9"></option>
|
|
<option value="10"></option>
|
|
</datalist>
|
|
</label>
|
|
<br>
|
|
<label for="profile_picture_upload">
|
|
Upload profile picture:
|
|
<br>
|
|
<input type="file" id="profile_picture_upload" name="userinfo">
|
|
</label>
|
|
<br>
|
|
<input type="submit" value="Submit user info">
|
|
<br>
|
|
<input type="reset" value="Reset user info">
|
|
|
|
</fieldset>
|
|
</form>
|
|
</main>
|
|
<footer>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
|