1 +
<!DOCTYPE html>
2 +
<html lang="en" class="h-100">
3 + 4 +
<head>
5 +
<title>Web form</title>
6 + 7 +
<meta charset="utf-8">
8 +
<meta name="viewport" content="width=device-width, initial-scale=1">
9 + 10 +
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
11 +
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
12 +
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
13 +
<script src="//unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
14 +
<link href="//unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
15 +
</head>
16 + 17 +
<body class="d-flex flex-column h-100">
18 +
<main class="flex-shrink-2">
19 +
<div class="container">
20 +
<div class="row">
21 +
<div class="col-12">
22 +
<h1 class="display-6">Web form</h1>
23 +
</div>
24 +
</div>
25 +
<form method="get" action="submitted-form.html">
26 +
<div class="row">
27 +
<div class="col-md-4 py-2">
28 +
<label class="form-label w-100">Text input
29 +
<input type="text" class="form-control" name="my-text" id="my-text-id" myprop="myvalue">
30 +
</label>
31 + 32 +
<label class="form-label w-100">Password
33 +
<input type="password" class="form-control" name="my-password" autocomplete="off">
34 +
</label>
35 + 36 +
<label class="form-label w-100">Textarea
37 +
<textarea class="form-control" name="my-textarea" rows="3"></textarea>
38 +
</label>
39 + 40 +
<label class="form-label w-100">Disabled input
41 +
<input class="form-control" type="text" name="my-disabled" placeholder="Disabled input" disabled>
42 +
</label>
43 + 44 +
<label class="form-label w-100">Readonly input
45 +
<input class="form-control" type="text" name="my-readonly" value="Readonly input" readonly>
46 +
</label>
47 + 48 +
<div class="form-group tp-align-right mt-3">
49 +
<a href="./index.html">
50 +
Return to index
51 +
</a>
52 +
</div>
53 +
</div>
54 + 55 +
<div class="col-md-4 py-2">
56 +
<label class="form-label w-100">Dropdown (select)
57 +
<select class="form-select" name="my-select">
58 +
<option selected>Open this select menu</option>
59 +
<option value="1">One</option>
60 +
<option value="2">Two</option>
61 +
<option value="3">Three</option>
62 +
</select>
63 +
</label>
64 + 65 +
<label class="form-label w-100">Dropdown (datalist)
66 +
<input class="form-control" list="my-options" name="my-datalist" placeholder="Type to search...">
67 +
<datalist id="my-options">
68 +
<option value="San Francisco">
69 +
<option value="New York">
70 +
<option value="Seattle">
71 +
<option value="Los Angeles">
72 +
<option value="Chicago">
73 +
</datalist>
74 +
</label>
75 + 76 +
<label class="form-label w-100">File input
77 +
<input class="form-control" type="file" name="my-file">
78 +
</label>
79 + 80 +
<div class="form-check">
81 +
<label class="form-check-label w-100">
82 +
<input class="form-check-input" type="checkbox" name="my-check" id="my-check-1" checked>
83 +
Checked checkbox
84 +
</label>
85 + 86 +
<label class="form-check-label w-100">
87 +
<input class="form-check-input" type="checkbox" name="my-check" id="my-check-2">
88 +
Default checkbox
89 +
</label>
90 +
</div>
91 + 92 +
<div class="form-check">
93 +
<label class="form-check-label w-100">
94 +
<input class="form-check-input" type="radio" name="my-radio" id="my-radio-1" checked>
95 +
Checked radio
96 +
</label>
97 +
</div>
98 +
<div class="form-check">
99 +
<label class="form-check-label w-100">
100 +
<input class="form-check-input" type="radio" name="my-radio" id="my-radio-2">
101 +
Default radio
102 +
</label>
103 +
</div>
104 + 105 +
<button type="submit" class="btn btn-outline-primary mt-3">Submit</button>
106 + 107 +
</div>
108 + 109 +
<div class="col-md-4 py-2">
110 +
<label class="form-label w-100">Color picker
111 +
<input type="color" class="form-control form-control-color" name="my-colors" value="#563d7c">
112 +
</label>
113 + 114 +
<label class="form-label w-100">Date picker
115 +
<input type="text" class="form-control" name="my-date">
116 +
</label>
117 + 118 +
<label class="form-label w-100">Example range
119 +
<input type="range" class="form-range" name="my-range" min="0" max="10" step="1" value="5">
120 +
</label>
121 + 122 +
<input type="hidden" name="my-hidden">
123 +
</div>
124 +
</div>
125 +
</form>
126 +
</div>
127 +
</main>
128 +
<script>
129 +
$('[name=my-date]').datepicker({
130 +
});
131 +
</script>
132 +
</body>
133 + 134 +
</html>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4