Skip to content

Commit 6df9915

Browse files
bennadelbennadel
committed
Add link button demos.
1 parent d5d84ba commit 6df9915

File tree

4 files changed

+199
-0
lines changed

4 files changed

+199
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Using The Button Form Attribute To Create Standalone Buttons In HTML](https://bennadel.github.io/JavaScript-Demos/demos/link-buttons)
1314
* [Box Breathing Exercise With SpeechSynthesis And Alpine.js](https://bennadel.github.io/JavaScript-Demos/demos/box-breathing-alpine)
1415
* [Using CSS Gap To Control Margins In Website Copy](https://bennadel.github.io/JavaScript-Demos/demos/margins-via-gap-css)
1516
* [Formatting Dates In The Local Timezone With Alpine.js](https://bennadel.github.io/JavaScript-Demos/demos/local-date-formatter-alpine3)

‎demos/link-buttons/index.htm‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>
7+
Using The Button Form Attribute To Create Standalone Buttons In HTML
8+
</title>
9+
<link rel="stylesheet" type="text/css" href="./main.css">
10+
</head>
11+
<body>
12+
13+
<h1>
14+
Using The Button Form Attribute To Create Standalone Buttons In HTML
15+
</h1>
16+
17+
<nav class="nav">
18+
<a href="index.htm?nav=home" class="nav__item">
19+
Home
20+
</a>
21+
<a href="index.htm?nav=about" class="nav__item">
22+
About
23+
</a>
24+
<a href="index.htm?nav=projects" class="nav__item">
25+
Projects
26+
</a>
27+
<!--
28+
But letting the button stand on its own, we can STYLE it in the same way that
29+
we do the sibling link elements. Meaning, we don't have to worry about dealing
30+
with an extra form wrapper, or use janky techniques like "display:contents".
31+
-->
32+
<button type="submit" form="logOutForm" class="nav__item link-button">
33+
Log-Out
34+
</button>
35+
</nav>
36+
37+
<!--
38+
This form has no inherent action, it's basically just a "data bag". It only gets
39+
triggered when the button above is clicked. The button's [FORM] attribute makes
40+
it the submit trigger for this form.
41+
42+
Note: normally, this would be a [POST] action; however, in order to make this demo
43+
work on GitHub Pages, I'm using a [GET].
44+
-->
45+
<form id="logOutForm" method="get" action="index.htm">
46+
<input type="hidden" name="action" value="logout" />
47+
<input type="hidden" name="submitted" value="true" />
48+
<input type="hidden" name="xsrfToken" value="abc123" />
49+
<input type="hidden" name="userID" value="10011" />
50+
</form>
51+
52+
<p>
53+
<a href="./index2.htm">See Demo 2</a>
54+
</p>
55+
56+
</body>
57+
</html>

‎demos/link-buttons/index2.htm‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>
7+
Using The Button Form Attribute To Create Standalone Buttons In HTML
8+
</title>
9+
<link rel="stylesheet" type="text/css" href="./main.css">
10+
</head>
11+
<body>
12+
13+
<h1>
14+
Using The Button Form Attribute To Create Standalone Buttons In HTML
15+
</h1>
16+
17+
<table border="1">
18+
<thead>
19+
<tr>
20+
<th>ID</th>
21+
<th>Name</th>
22+
<th>Action</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
<tr>
27+
<td>1</td>
28+
<td>Kim</td>
29+
<td>
30+
<button type="submit" form="deleteUser" name="userID" value="1" class="link-button">
31+
Delete
32+
</button>
33+
</td>
34+
</tr>
35+
<tr>
36+
<td>2</td>
37+
<td>Jim</td>
38+
<td>
39+
<button type="submit" form="deleteUser" name="userID" value="2" class="link-button">
40+
Delete
41+
</button>
42+
</td>
43+
</tr>
44+
<tr>
45+
<td>3</td>
46+
<td>Lynn</td>
47+
<td>
48+
<button type="submit" form="deleteUser" name="userID" value="3" class="link-button">
49+
Delete
50+
</button>
51+
</td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
56+
<!--
57+
This form has no inherent action (other than the confirm() call), it's basically
58+
just a "data bag". It only gets triggered when one of the buttons above is
59+
clicked. Each button's [FORM] attribute makes it the submit trigger for this form.
60+
And, the [NAME/VALUE] attributes allow each button to submit a unique userID with
61+
the form.
62+
63+
Note: normally, this would be a [POST] action; however, in order to make this demo
64+
work on GitHub Pages, I'm using a [GET].
65+
-->
66+
<form
67+
id="deleteUser"
68+
method="get"
69+
action="index2.htm"
70+
onsubmit="return confirm( 'Are you sure?' );">
71+
72+
<input type="hidden" name="action" value="delete" />
73+
<input type="hidden" name="submitted" value="true" />
74+
<input type="hidden" name="xsrfToken" value="abc123" />
75+
</form>
76+
77+
<p>
78+
<a href="./index.htm">See Demo 1</a>
79+
</p>
80+
81+
</body>
82+
</html>

‎demos/link-buttons/main.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
2+
body {
3+
font-family: monospace ;
4+
font-size: 18px ;
5+
line-height: 1.5 ;
6+
}
7+
8+
.link-button {
9+
background-color: transparent ;
10+
border-width: 0 ;
11+
cursor: pointer ;
12+
font-family: inherit ;
13+
font-size: inherit ;
14+
font-weight: inherit ;
15+
line-height: inherit ;
16+
margin: 0 ;
17+
padding: 0 ;
18+
text-decoration: underline ;
19+
}
20+
21+
.nav {
22+
display: flex ;
23+
gap: 8px ;
24+
}
25+
.nav__item {
26+
border: 1px solid red ;
27+
border-radius: 3px ;
28+
color: red ;
29+
padding: 5px 10px ;
30+
text-decoration: none ;
31+
}
32+
.nav__item:hover {
33+
text-decoration: underline ;
34+
}
35+
36+
.visually-hidden {
37+
opacity: 0 ;
38+
position: fixed ;
39+
top: -100px ;
40+
}
41+
42+
*:focus,
43+
*:focus-visible {
44+
outline: 2px solid blue ;
45+
outline-offset: 2px ;
46+
}
47+
48+
table {
49+
border-collapse: collapse ;
50+
}
51+
52+
table th,
53+
table td {
54+
padding: 5px 10px ;
55+
}
56+
57+
table button {
58+
59+
}

0 commit comments

Comments
 (0)