keyboard (fieldset, magic number)

dabblet.css

/**
 * keyboard (fieldset, magic number)
 * http://forum.selfhtml.org/self/2015/may/03/indexwert-von-array-element-ermitteln/1639259#m1639259
 */

.keyboard
{
	border: none;
}

.keyboard label
{
	display: inline-block;
	border: 1px solid black;
	width: 2em;
	height: 6em;
	margin-right: -0.33em;
	background: ivory;
}

.keyboard label.ebony
{
	position: absolute;
	width: 1.2em;
	height: 4em;
	margin-left: -0.6em;
	background: black;
}

.keyboard input
{
	visibility: hidden;
}

dabblet.html

<form action="">
	<fieldset class="keyboard" lang="de">
		<legend>Tastatur</legend>
		<label class="ivory" aria-label="C"><input type="radio" name="note" value="12"/></label>
		<label class="ebony" aria-label="Cis/Des"><input type="radio" name="note" value="13"/></label>
		<label class="ivory" aria-label="D"><input type="radio" name="note" value="14"/></label>
		<label class="ebony" aria-label="Dis/Es"><input type="radio" name="note" value="15"/></label>
		<label class="ivory" aria-label="E"><input type="radio" name="note" value="16"/></label>
		<label class="ivory" aria-label="F"><input type="radio" name="note" value="17"/></label>
		<label class="ebony" aria-label="Fis/Ges"><input type="radio" name="note" value="18"/></label>
		<label class="ivory" aria-label="G"><input type="radio" name="note" value="19"/></label>
		<label class="ebony" aria-label="Gis/As"><input type="radio" name="note" value="20"/></label>
		<label class="ivory" aria-label="A"><input type="radio" name="note" value="21"/></label>
		<label class="ebony" aria-label="Ais/B"><input type="radio" name="note" value="22"/></label>
		<label class="ivory" aria-label="H"><input type="radio" name="note" value="23"/></label>
		<label class="ivory" aria-label="c"><input type="radio" name="note" value="24"/></label>
		<label class="ebony" aria-label="cis/des"><input type="radio" name="note" value="25"/></label>
		<label class="ivory" aria-label="d"><input type="radio" name="note" value="26"/></label>
		<label class="ebony" aria-label="dis/es"><input type="radio" name="note" value="27"/></label>
		<label class="ivory" aria-label="e"><input type="radio" name="note" value="28"/></label>
	</fieldset>
	<button>OK</button>
</form>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}