css3ForProgrammers/form.html at master · scottdavis99/css3ForProgrammers · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--
  Source: http://www.alistapart.com/articles/forward-thinking-form-validation/
-->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />

	<title>Validate those forms with CSS3 Basic UI module pseudo-classes and HTML5 Form attributes</title>

</head>
<body>

	<form id="signup">
		<h1>Sign up now!</h1>

		<h2>Fields marked (*) are required</h2>

		<fieldset>
			<legend>Your details</legend>

			<ol>
				<li>
					<label for="msg">Name *</label>
					<input type="text" id="msg" name="msg" placeholder="Full name" required />
				</li>
				<li>
					<label for="email">Email *</label>
					<input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required />
					<p class="validation01">
						<span class="invalid">Please enter a valid email address e.g. ryan@example.com</span>
						<span class="valid">Thank you for entering a valid email</span>
					</p>
				</li>
				<li>
					<label for="tel">Phone *</label>
					<input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="Please enter a ten digit phone number" required />
					<p class="validation01">
						<span class="invalid">No spaces or brackets e.g. 0390001234</span>
						<span class="valid">That's what we wanted!</span>
					</p>
				</li>
			</ol>
		</fieldset>

		<fieldset>
			<legend>Delivery address</legend>
			<ol>
				<li>
					<label for="address">Address *</label>
					<input id="address" name="address" type="text" required />
				</li>
				<li>
					<label for="suburb">Suburb *</label>
					<input id="suburb" name="suburb" type="text" required />
				</li>
				<li>
					<label for="postcode">Post code *</label>
					<input id="postcode" name="postcode" type="number" min="1001" max="8000" maxlength="4" required />
					<p class="validation01">
						<span class="invalid">Your postcode is out of range between 1001 - 8000</span>
						<span class="valid">Thank you your postcode is in the correct range</span>
					</p>
				</li>
				<li>
					<label for="state">State</label>
					<select name="state" id="state">
						<option>ACT</option>
						<option>NSW</option>
						<option>NT</option>
						<option>QLD</option>
						<option>SA</option>
						<option>TAS</option>
						<option selected>VIC</option>
						<option>WA</option>
					</select>
				</li>
			</ol>
		</fieldset>

		<fieldset>
			<legend>Membership information</legend>
			<ol>
				<li>
					<label for="username">Username *</label>
					<input id="username" name="username" type="text" pattern="\w{4,}" placeholder="Atleast 4 alphanumeric characters" required />
				</li>
				<li>
					<label for="password">Password *</label>
					<input id="password" name="password" type="password" title="Minimum 8 characters, one number, one uppercase and one lowercase letter" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*" required />
					<p class="validation01">
						<span class="invalid">Minimum 8 characters, one number, one uppercase letter and one lowercase letter</span>
						<span class="valid">Your password meets our requirements, thank you.</span>
					</p>
				</li>
				<li>
					<label for="url">Website *</label>
					<input type="url" name="url" id="url" required />
				</li>
			</ol>
		</fieldset>

		<input type="submit" value="Sign up" />

	</form>

</body>
</html>