Skip to content

Commit 20b6957

Browse files
bonigarciabonigarcia
committed
Include sample web form
1 parent 1aa7c59 commit 20b6957

2 files changed

Lines changed: 166 additions & 0 deletions

File tree

‎common/src/web/submitted-form.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="h-100">
3+
4+
<head>
5+
<title>Web form - target page</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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
13+
</head>
14+
15+
<body class="d-flex flex-column h-100">
16+
<main class="flex-shrink-2">
17+
<div class="container">
18+
<div class="row">
19+
<div class="col-12">
20+
<h1 class="display-6">Form submitted</h1>
21+
</div>
22+
</div>
23+
<div class="row">
24+
<div class="col-12 py-2">
25+
<p class="lead" id="message">Received!</p>
26+
</div>
27+
</div>
28+
</div>
29+
</main>
30+
</body>
31+
32+
</html>

‎common/src/web/web-form.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
13+
<script src="//unpkg.com/[email protected]/dist/js/bootstrap-datepicker.min.js"></script>
14+
<link href="//unpkg.com/[email protected]/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>

0 commit comments

Comments
 (0)