generated from tod/odin-webpack-template
34 lines
1.3 KiB
HTML
34 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Form</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<form id="form">
|
|
<h1>JS Form validation</h1>
|
|
<input name="email" id="email" type="email" required placeholder="Email (christopher@example.com)">
|
|
|
|
<input name="country" id="country" type="text" list="countries-list" required placeholder="Country (United Kingdom)">
|
|
<datalist id="countries-list"></datalist>
|
|
|
|
<input name="zip" id="zip" type="text" required placeholder="ZIP code (12-345)">
|
|
|
|
<input name="password" id="password" type="password" required placeholder="Password (Pa$Sw0rD)">
|
|
<div id="password-check">
|
|
<div id="length">Minimum length of 8 characters</div>
|
|
<div id="lowercase">At least one lowercase letter</div>
|
|
<div id="uppercase">At least one uppercase letter</div>
|
|
<div id="number">At least one number</div>
|
|
<div id="special">At least one special character</div>
|
|
<div id="match">Passwords match</div>
|
|
</div>
|
|
<input id="password-confirm" type="password" required placeholder="Confirm password">
|
|
|
|
<button id="submit" type="submit">Submit</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html> |