This repository has been archived by the owner on Jul 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
182 lines (148 loc) · 8.25 KB
/
index.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Normform</title>
<meta name="description" content="A pure CSS form plugin to make your forms beautiful again">
<link rel="icon" href="favicon.png" type="image/png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="normform/normform.min.css">
</head>
<body>
<header>
<h1><span class="blue">Normform</span> <span class="white">2.0</span></h1>
<h3>
Simplify your forms
<span>Pure CSS form plugin (6KB) | <a href="https://raw.githubusercontent.com/bradleytaunt/normform/master/normform/normform.min.css">Download</a> | <a href="https://github.com/bradleytaunt/normform">Docs</a></span>
</h3>
</header>
<div class="main-container">
<div class="text-container">
<h3 class="heading">Headache-free setup</h3>
<p>Implementing Normform into your site or web app is incredibly easy:</p>
<ol>
<li><a href="https://raw.githubusercontent.com/bradleytaunt/normform/master/normform/normform.min.css">Download the minified CSS</a> off Github</li>
<li>Include <code>normform.min.css</code> in your project</li>
<li>Add the <code>normform</code> class to your form element</li>
<li>Profit!</li>
</ol>
</div>
<div class="demo-container">
<form action="#" method="post" class="normform">
<fieldset>
<legend>Default Input Examples</legend>
<label for="text-input-0">Text Input:</label>
<input type="text" id="text-input-0" value="" placeholder="Text input content...">
<label for="email-input-0">Email Input:</label>
<input type="email" id="email-input-0" value="" placeholder="[email protected]">
<label for="select-choice-0">Dropdown Select Choice:</label>
<div class="select-dropdown">
<select name="select-choice-0" id="select-choice-0">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<input type="checkbox" name="checkbox-0" id="checkbox-0">
<label for="checkbox-0">Yes, I think Normform is cool!</label>
</fieldset>
<div class="inline-buttons">
<input type="reset" value="Reset">
<input type="submit" value="Sign up">
</div>
</form>
</div>
<div class="text-container">
<h3 class="heading">Custom defaults</h3>
<p>All form elements have been completely customized without sacrificing performance or accessibility. This includes:</p>
<ul>
<li>fieldsets</li>
<li>legends</li>
<li>radios</li>
<li>checkboxes</li>
<li>select dropdowns</li>
<li>specialized inputs</li>
<li>textareas</li>
<li>input buttons</li>
</ul>
<p>Check out the <a href="https://github.com/bradleytaunt/normform">official documentation</a> to see how to properly setup these elements.</p>
</div>
<div class="demo-container">
<form action="#" method="post" class="normform">
<fieldset>
<legend>Select Option Examples</legend>
<label for="select-choice-1">Dropdown Select Choice:</label>
<div class="select-dropdown">
<select name="select-choice-1" id="select-choice-1">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Radio Button Examples</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">Choice 3</label>
</fieldset>
<fieldset>
<legend>Checkbox Examples</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" checked>
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4">
<label for="checkbox-4">Checkbox 4</label>
</fieldset>
<div class="inline-buttons">
<input type="reset" value="Cancel">
<input type="submit" value="Sign up">
</div>
</form>
</div>
<div class="text-container">
<h3 class="heading">Baked-in error styling</h3>
<p>Error handling and required form elements are supported right out of the box.</p>
<p>Want to give a detailed description to accompany the error itself? Check out the <a href="https://github.com/bradleytaunt/normform">official documentation</a> about easily adding a requirements descriptor.</p>
</div>
<div class="demo-container">
<form action="#" method="post" class="normform">
<fieldset>
<legend>Required Input Examples</legend>
<label for="text-input-1">Text Input:</label>
<input type="text" id="text-input-1" value="" required placeholder="Text input content...">
<div>
<label for="email-input-1">Email Input:</label>
<input type="email" id="email-input-1" value="" required placeholder="[email protected]">
<div class="requirements">Must be a valid email address</div>
</div>
<div>
<label for="password-input">Password Input:</label>
<input type="password" id="password-input" required value="" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Secure password">
<div class="requirements">Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.</div>
</div>
<div>
<label for="number-input">Number Input:</label>
<input type="number" id="number-input" value="" placeholder="12345678..." required>
<div class="requirements">Only number values can be used.</div>
</div>
<label for="textarea">Textarea:</label>
<textarea rows="8" name="textarea" id="textarea" required></textarea>
</fieldset>
<input type="submit" value="Sign up">
</form>
</div>
</div>
<footer>
<p>This is a <a href="http://bradleytaunt.com">Bradley Taunt</a> joint. You can find me on <a href="https://dribbble.com/hustlepizza">Dribbble</a>, <a href="https://github.com/bradleytaunt">Github</a> & <a href="https://twitter.com/bradtaunt">Twitter</a></p>
</footer>
</body>
</html>