summaryrefslogtreecommitdiffstats
path: root/index.html
diff options
context:
space:
mode:
authorBrian Cully <bjc@spork.org>2025-03-08 12:05:29 -0500
committerBrian Cully <bjc@spork.org>2025-03-08 12:05:29 -0500
commitdaeace070ee8687fceb77ee5e9f7bce507669639 (patch)
treef30594b634a51e45d4f7888d5e2a7ab763829b18 /index.html
parent9cab8925d7df982b49fc12ebf47208fed95903b6 (diff)
downloadchords-daeace070ee8687fceb77ee5e9f7bce507669639.tar.gz
chords-daeace070ee8687fceb77ee5e9f7bce507669639.zip
html: rejigger as radio buttons
Diffstat (limited to 'index.html')
-rw-r--r--index.html126
1 files changed, 64 insertions, 62 deletions
diff --git a/index.html b/index.html
index 132bbcd..355c5e6 100644
--- a/index.html
+++ b/index.html
@@ -7,69 +7,71 @@
</head>
<body>
- <table id='fretboard'>
- <thead>
- <tr>
- <td>root</td>
- <td>fret 1</td>
- <td>fret 2</td>
- <td>fret 3</td>
- <td>fret 4</td>
- <td>fret 5</td>
- </tr>
- </thead>
+ <form id='fretboard'>
+ <table>
+ <thead>
+ <tr>
+ <td>root</td>
+ <td>fret 1</td>
+ <td>fret 2</td>
+ <td>fret 3</td>
+ <td>fret 4</td>
+ <td>fret 5</td>
+ </tr>
+ </thead>
- <tbody>
- <tr id='string1'>
- <td>E</td>
- <td><input type='checkbox' name='fret1'></td>
- <td><input type='checkbox' name='fret2'></td>
- <td><input type='checkbox' name='fret3'></td>
- <td><input type='checkbox' name='fret4'></td>
- <td><input type='checkbox' name='fret5'></td>
- </tr>
- <tr id='string2'>
- <td>A</td>
- <td><input type='checkbox' name='fret1'></td>
- <td><input type='checkbox' name='fret2'></td>
- <td><input type='checkbox' name='fret3'></td>
- <td><input type='checkbox' name='fret4'></td>
- <td><input type='checkbox' name='fret5'></td>
- </tr>
- <tr id='string3'>
- <td>D</td>
- <td><input type='checkbox' name='fret1'></td>
- <td><input type='checkbox' name='fret2'></td>
- <td><input type='checkbox' name='fret3'></td>
- <td><input type='checkbox' name='fret4'></td>
- <td><input type='checkbox' name='fret5'></td>
- </tr>
- <tr id='string4'>
- <td>G</td>
- <td><input type='checkbox' name='fret1'></td>
- <td><input type='checkbox' name='fret2'></td>
- <td><input type='checkbox' name='fret3'></td>
- <td><input type='checkbox' name='fret4'></td>
- <td><input type='checkbox' name='fret5'></td>
- </tr>
- <tr id='string5'>
- <td>B</td>
- <td><input type='checkbox' name='fret1'></td>
- <td><input type='checkbox' name='fret2'></td>
- <td><input type='checkbox' name='fret3'></td>
- <td><input type='checkbox' name='fret4'></td>
- <td><input type='checkbox' name='fret5'></td>
- </tr>
- <tr id='string6'>
- <td>E</td>
- <td><input type='checkbox' name='fret1'></td>
- <td><input type='checkbox' name='fret2'></td>
- <td><input type='checkbox' name='fret3'></td>
- <td><input type='checkbox' name='fret4'></td>
- <td><input type='checkbox' name='fret5'></td>
- </tr>
- </tbody>
- </table>
+ <tbody>
+ <tr>
+ <td>E</td>
+ <td><input type='radio' name='string1' value='fret1'></td>
+ <td><input type='radio' name='string1' value='fret2'></td>
+ <td><input type='radio' name='string1' value='fret3'></td>
+ <td><input type='radio' name='string1' value='fret4'></td>
+ <td><input type='radio' name='string1' value='fret5'></td>
+ </tr>
+ <tr>
+ <td>A</td>
+ <td><input type='radio' name='string2' value='fret1'></td>
+ <td><input type='radio' name='string2' value='fret2'></td>
+ <td><input type='radio' name='string2' value='fret3'></td>
+ <td><input type='radio' name='string2' value='fret4'></td>
+ <td><input type='radio' name='string2' value='fret5'></td>
+ </tr>
+ <tr>
+ <td>D</td>
+ <td><input type='radio' name='string3' value='fret1'></td>
+ <td><input type='radio' name='string3' value='fret2'></td>
+ <td><input type='radio' name='string3' value='fret3'></td>
+ <td><input type='radio' name='string3' value='fret4'></td>
+ <td><input type='radio' name='string3' value='fret5'></td>
+ </tr>
+ <tr>
+ <td>G</td>
+ <td><input type='radio' name='string4' value='fret1'></td>
+ <td><input type='radio' name='string4' value='fret2'></td>
+ <td><input type='radio' name='string4' value='fret3'></td>
+ <td><input type='radio' name='string4' value='fret4'></td>
+ <td><input type='radio' name='string4' value='fret5'></td>
+ </tr>
+ <tr>
+ <td>B</td>
+ <td><input type='radio' name='string5' value='fret1'></td>
+ <td><input type='radio' name='string5' value='fret2'></td>
+ <td><input type='radio' name='string5' value='fret3'></td>
+ <td><input type='radio' name='string5' value='fret4'></td>
+ <td><input type='radio' name='string5' value='fret5'></td>
+ </tr>
+ <tr>
+ <td>E</td>
+ <td><input type='radio' name='string6' value='fret1'></td>
+ <td><input type='radio' name='string6' value='fret2'></td>
+ <td><input type='radio' name='string6' value='fret3'></td>
+ <td><input type='radio' name='string6' value='fret4'></td>
+ <td><input type='radio' name='string6' value='fret5'></td>
+ </tr>
+ </tbody>
+ </table>
+ </form>
<script type='module' src='main.mjs'></script>
</body>