forms/index.html at master · marksmccann/forms · 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
<!-- Basic Document -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Untitled Document</title>
</head>
<body>
<form>
    <fieldset>
        <legend>Text Input</legend>
        <label for="text-input-plain">Text Input</label>
        <input id="text-input-plain" type="text" /><br>
        <label for="text-input">Text Input</label>
        <input id="text-input" type="text" class="text-input" />
    </fieldset>
    <fieldset>
        <legend>Text Area</legend>
        <label for="text-area-plain">Text Area</label>
        <textarea id="text-area-plain" type="text"></textarea><br>
        <label for="text-area">Text Area</label>
        <textarea id="text-area" type="text" class="text-area"></textarea>
    </fieldset>
    <fieldset>
        <legend>Accessible Placeholder</legend>
        <div class="placeholder">
            <input type="text" id="placeholder" class="placeholder-input" />
            <label for="placeholder" class="placeholder-label">Text Input</label>
        </div>
    </fieldset>
    <fieldset>
        <legend>Radio Inputs Default</legend>
        <input id="radio-input-default-1" type="radio" name="radio-input-default">
        <label for="radio-input-default-1">Radio Label 1</label>
        <input id="radio-input-default-2" type="radio" name="radio-input-default">
        <label for="radio-input-default-2">Radio Label 2</label>
    </fieldset>
    <fieldset>
        <legend>Radio Inputs</legend>
        <input id="radio-input-1" class="radio-input" type="radio" name="radio-input">
        <label for="radio-input-1" class="radio-label">Radio Label 1</label>
        <input id="radio-input-2" class="radio-input" type="radio" name="radio-input">
        <label for="radio-input-2" class="radio-label">Radio Label 2</label>
    </fieldset>
    <fieldset>
        <legend>Radio Buttons</legend>
        <input id="radio-button-1" class="radio-button" type="radio" name="radio-button">
        <label for="radio-button-1" class="radio-label">Radio Label 1</label>
        <input id="radio-button-2" class="radio-button" type="radio" name="radio-button">
        <label for="radio-button-2" class="radio-label">Radio Label 2</label>
    </fieldset>
    <fieldset>
        <legend>Checkbox Inputs Default</legend>
        <input id="checkbox-input-default-1" type="checkbox" name="checkbox-input-default">
        <label for="checkbox-input-default-1">Checkbox Label 1</label>
        <input id="checkbox-input-default-2" type="checkbox" name="checkbox-input-default">
        <label for="checkbox-input-default-2">Checkbox Label 2</label>
    </fieldset>
    <fieldset>
        <legend>Checkbox Inputs</legend>
        <input id="checkbox-input-1" class="checkbox-input" type="checkbox" name="checkbox-input">
        <label for="checkbox-input-1" class="checkbox-label">Checkbox Label 1</label>
        <input id="checkbox-input-2" class="checkbox-input" type="checkbox" name="checkbox-input">
        <label for="checkbox-input-2" class="checkbox-label">Checkbox Label 2</label>
    </fieldset>
    <fieldset>
        <legend>Checkbox Buttons</legend>
        <input id="checkbox-button-1" class="checkbox-button" type="checkbox" name="checkbox-button">
        <label for="checkbox-button-1" class="checkbox-label">Checkbox Label 1</label>
        <input id="checkbox-button-2" class="checkbox-button" type="checkbox" name="checkbox-button">
        <label for="checkbox-button-2" class="checkbox-label">Checkbox Label 2</label>
    </fieldset>
    <fieldset>
        <legend>Dropdown Selects Default</legend>
        <label for="select-default">Dropdown</label>
        <select id="select-default">
            <optgroup label="Group 1">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
            </optgroup>
            <optgroup label="Group 2">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
            </optgroup>
        </select>
    </fieldset>
    <fieldset>
        <legend>Dropdown Selects</legend>
        <label for="select">Dropdown</label>
        <select id="select" class="select">
            <optgroup label="Group 1">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
            </optgroup>
            <optgroup label="Group 2">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
            </optgroup>
        </select>
    </fieldset>
    <fieldset>
        <legend>Button Default</legend>
        <button type="button">Button</button>
    </fieldset>
    <fieldset>
        <legend>Button</legend>
        <button class="button" type="button">Button</button>
    </fieldset>
</form>
</body>
</html>