vegard-uni/webtek-assignment-3
0
0
Fork 0
Code Issues Pull Requests Releases Activity

intial

Browse Source
This commit is contained in:
Vegard Bieker Matthey
2025-10-23 20:10:40 +02:00
commit c02ccaf272
5 changed files with 262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
form.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>User registration</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>User registration</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<form id="userinfo">
<fieldset>
<legend>What is your personal information?</legend>
<label for="prename">
Prename:
<input type="text" id="prename" name="userinfo" required>
</label>
<br>
<label for="surname">
Surname:
<input type="text" id="surname" name="userinfo" required>
</label>
<br>
<label for="email">
Email:
<input type="email" id="email" name="userinfo" required>
</label>
<br>
<label for="password">
Password:
<input type="password" id="password" name="userinfo" minlength="16" maxlength="1024" required>
</label>
<br>
<label for="phone">
Phone:
<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="userinfo" required>
</label>
<br>
<label for="birthdate">
Birthdate:
<input type="date" id="birthdate" max="2007-10-23" name="userinfo">
</label>
<br>
<label for="countries">
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>
</label>
<br>
<fieldset>
<legend>Gender:</legend>
<label for="male">
<input type="radio" id="gender" name="gender" required>
Male
</label>
<br>
<label for="female">
<input type="radio" id="gender" name="gender">
Female
</label>
<br>
<label for="other">
<input type="radio" id="gender" name="gender">
Other
</label>
</fieldset>
<fieldset>
<legend>Interests:</legend>
<label for="interests">
<input type="checkbox" id="sports" name="interests">
Sports
</label>
<br>
<label for="interests">
<input type="checkbox" id="reading" name="interests">
Reading
</label>
<br>
<label for="interests">
<input type="checkbox" id="traveling" name="interests">
Traveling
</label>
</fieldset>
<label for="comments">
Comments:
<br>
<textarea id="comments" name="comments"></textarea>
</label>
<br>
<label for="satisfaction">
<p>Satisfaction level: <output id="satisfaction_level"></output>5</p>
<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>
<p>&copy; 2025 Responsive Website</p>
</footer>
</body>
</html>