-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
186 lines (181 loc) · 6.66 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
183
184
185
186
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<section>
<h1>Form</h1>
<form>
<fieldset id="forms__input">
<legend>Input fields</legend>
<p>
<label for="input__text">Text Input</label>
<input id="input__text" type="text" placeholder="Text Input">
</p>
<p>
<label for="input__password">Password</label>
<input id="input__password" type="password" placeholder="Type your Password">
</p>
<p>
<label for="input__webaddress">Web Address</label>
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">
</p>
<p>
<label for="input__emailaddress">Email Address</label>
<input id="input__emailaddress" type="email" placeholder="name@email.com">
</p>
<p>
<label for="input__phone">Phone Number</label>
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
</p>
<p>
<label for="input__search">Search</label>
<input id="input__search" type="search" placeholder="Enter Search Term">
</p>
<p>
<label for="input__text2">Number Input</label>
<input id="input__text2" type="number" placeholder="Enter a Number">
</p>
<p>
<label for="input__text3" class="error">Error</label>
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">
</p>
<p>
<label for="input__text4" class="valid">Valid</label>
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__select">
<legend>Select menus</legend>
<p>
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox">
<legend>Checkboxes</legend>
<ul class="list list--bare">
<li>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</li>
<li>
<input type="checkbox" id="test2" checked />
<label for="test2">Red</label>
</li>
<li>
<input type="checkbox" id="test3" disabled />
<label for="test3">Red</label>
</li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__radio">
<legend>Radio buttons</legend>
<ul class="list list--bare">
<li>
<input type="radio" id="radiotest1" name="radio-group">
<label for="radiotest1">Apple</label>
</li>
<li>
<input type="radio" id="radiotest2" name="radio-group" disabled>
<label for="radiotest2">Disabled</label>
</li>
<li>
<input type="radio" id="radiotest3" name="radio-group" checked>
<label for="radiotest3">Apple</label>
</li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__textareas">
<legend>Textareas</legend>
<p>
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__html5">
<legend>HTML5 inputs</legend>
<p>
<label for="ic">Color input</label>
<input type="color" id="ic" value="#000000">
</p>
<p>
<label for="in">Number input</label>
<input type="number" id="in" min="0" max="10" value="5">
</p>
<p>
<label for="ir">Range input</label>
<input type="range" id="ir" value="10">
</p>
<p>
<label for="idd">Date input</label>
<input type="date" id="idd" value="1970-01-01">
</p>
<p>
<label for="idm">Month input</label>
<input type="month" id="idm" value="1970-01">
</p>
<p>
<label for="idw">Week input</label>
<input type="week" id="idw" value="1970-W01">
</p>
<p>
<label for="idt">Datetime input</label>
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
</p>
<p>
<label for="idtl">Datetime-local input</label>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__action">
<legend>Action buttons</legend>
<p>
<input type="submit" value="<input type=submit>">
<input type="button" value="<input type=button>">
<input type="reset" value="<input type=reset>">
<input type="submit" value="<input disabled>" disabled>
</p>
<p>
<button type="submit"><button type=submit></button>
<button type="button"><button type=button></button>
<button type="reset"><button type=reset></button>
<button type="button" disabled><button disabled></button>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
</form>
</section>
<section>
<h1>Button</h1>
<button>
Label
</button>
<button disabled>
Button disabled
</button>
<button type="reset">
Reset
</button>
<button type="submit">
Submit
</button>
</section>
</body>
</html>