system.css/forms.html at main · dutchcelt/system.css · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en" style="--system-enhanced: var(--ON)">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>system.css</title>
		<meta name="description" content="A classless CSS base stylesheet to write modern websites using only HTML." />
		<meta name="keywords" content="system, css, framework,classless css" />
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<header>
			<h3>system.css</h3>
			<nav>
				<a href="index.html">Home</a>
				<a href="example.html">Example</a>
				<a href="forms.html" aria-current="page">Forms</a>
				<a href="style-api.html">Style API</a>
				<a href="openprops.html">Themed</a>
			</nav>
		</header>
		<main>
			<h1>A form with basic layout and input validation</h1>

			<form id="form" action="/">
				<fieldset title="Full Name">
					<div>
						<label for="firstname">First name</label>
						<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
					</div>
					<div>
						<label for="lastname">Last name</label>
						<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
					</div>
				</fieldset>
				<fieldset>
					<legend>Gender (optional)</legend>
					<fieldset>
						<input type="radio" name="gender" id="gender_male" value="Male" />
						<label for="gender_male">Male</label>
						<input type="radio" name="gender" id="gender_female" value="Female" />
						<label for="gender_female">Female</label>
						<input type="radio" name="gender" id="gender_other" value="other-none-na" />
						<label for="gender_other">Non-binary</label>
						<input type="radio" name="gender" id="gender_unknown" value="unknown" />
						<label for="gender_unknown">None of your business</label>
					</fieldset>
				</fieldset>
				<fieldset title="Contact information">
					<div>
						<label for="email">E-mail</label>
						<input type="email" id="email" required />
					</div>
					<div>
						<label for="tel">Phone number</label>
						<input type="tel" id="tel" required />
					</div>
					<div>
						<label for="select">Country</label>
						<select id="select" required="required">
							<option>China</option>
							<option>India</option>
							<option>United States</option>
							<option>Indonesia</option>
							<option>Brazil</option>
						</select>
					</div>
				</fieldset>
				<fieldset>
					<div>
						<label for="password">password</label>
						<input
							type="password"
							id="password"
							pattern=".{8,24}"
							required="required"
							autocomplete="current-password"
							title="This must be a valid password. Minimum of 8 characters with a max of 24."
						/>
					</div>
				</fieldset>
				<fieldset>
					<div>
						<label for="file">Upload (optional)</label>
						<input id="file" type="file" />
					</div>
					<div>
						<label for="textarea">Comments (optional)</label>
						<textarea id="textarea"></textarea>
					</div>
				</fieldset>
				<fieldset>
					<div>
						<input type="checkbox" name="terms" id="terms" required />
						<label for="terms">
							I agree to the
							<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
						>
					</div>
				</fieldset>
				<div>
					<button disabled="disabled">Disabled</button>
					<button type="button">Cancel</button>
					<button type="submit">Submit</button>
				</div>
				<p>
					<small
						><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
					>
				</p>
			</form>
		</main>
		<footer>
			<p>
				View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
				<svg
					aria-hidden="true"
					height="16"
					viewBox="0 0 16 16"
					version="1.1"
					width="16"
					fill="var(--system-canvas-text)"
				>
					<path
						d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
					></path>
				</svg>
			</p>
		</footer>
	</body>
</html>