1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, initial-scale=1.0">
7 <title>Registration</title>
8</head>
9<body>
10 <main>
11 <article>
12 <header>
13 <h1>Create Account</h1>
14 </header>
15 <form action="/register" method="POST"
16 novalidate aria-label="Registration form">
17 <fieldset>
18 <legend>Personal Information</legend>
19 <div>
20 <label for="fullname">Full Name</label>
21 <input type="text" id="fullname"
22 name="fullname" required
23 autocomplete="name"
24 aria-required="true"
25 minlength="2" maxlength="100">
26 </div>
27 <div>
28 <label for="email">Email</label>
29 <input type="email" id="email"
30 name="email" required
31 autocomplete="email"
32 aria-describedby="email-hint">
33 <small id="email-hint">
34 We will never share your email.
35 </small>
36 </div>
37 </fieldset>
38 <fieldset>
39 <legend>Account Settings</legend>
40 <div>
41 <label for="password">Password</label>
42 <input type="password" id="password"
43 name="password" required
44 minlength="8"
45 autocomplete="new-password">
46 </div>
47 <div role="group"
48 aria-labelledby="role-label">
49 <span id="role-label">Role</span>
50 <label>
51 <input type="radio" name="role"
52 value="user" checked>
53 User
54 </label>
55 <label>
56 <input type="radio" name="role"
57 value="admin">
58 Admin
59 </label>
60 </div>
61 <div>
62 <label for="bio">Bio</label>
63 <textarea id="bio" name="bio"
64 rows="4" maxlength="500"
65 aria-describedby="bio-count">
66 </textarea>
67 <output id="bio-count">0/500</output>
68 </div>
69 </fieldset>
70 <button type="submit">Create Account</button>
71 </form>
72 </article>
73 </main>
74</body>
75</html>