associated
Version:
Get associated labels and inputs
145 lines (121 loc) • 3.16 kB
HTML
<html lang="en-US" data-form-o>
<meta charset="utf-8">
<title>associated</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:focus {
outline-color: DeepSkyBlue;
}
html {
font: 1em sans-serif;
background: Salmon;
color: WhiteSmoke;
}
body {
width: 94%;
margin: auto;
}
fieldset {
border: 0;
padding: .5rem;
}
.button {
color: Black;
background: WhiteSmoke;
display: inline-block;
padding: .5rem;
font-weight: bold;
}
:not(:hover):not(:focus) {
text-decoration: none;
}
</style>
<h1>associated</h1>
<a class="button" href="https://github.com/ryanve/associated">Github</a>
<a class="button" href="https://www.npmjs.com/package/associated">npm</a>
<h2>Tests</h2>
<p role="status" data-status></p>
<fieldset>
<input data-control-a id="a">
<label data-label-a for="a">data-label-a</label>
<label data-label-a for="a">data-label-a</label>
</fieldset>
<fieldset>
<label data-label-d for="d">data-label-d</label>
<input data-control-d id="d">
</fieldset>
<fieldset>
<label data-label-f>
data-label-f
<input data-control-f>
</label>
</fieldset>
<fieldset>
<label data-label-e>
data-label-e
<span><input data-control-e></span>
</label>
</fieldset>
<fieldset>
<label data-label-b>
data-label-b
<input data-control-b id="b">
</label>
</fieldset>
<fieldset>
<label data-label-c for="c">data-label-c</label>
<label data-label-c>
data-label-c
<input data-control-c id="c">
</label>
</fieldset>
<fieldset>
<input data-control-g>
</fieldset>
<fieldset>
<label data-label-h>data-label-h</label>
</fieldset>
<fieldset>
<label data-label-i>
data-label-i
<textarea data-control-i></textarea>
</label>
</fieldset>
<fieldset>
<label data-label-j>
data-label-j
<select data-control-j></select>
</label>
</fieldset>
<fieldset>
<label data-label-k>
data-label-k
<button data-control-k></button>
</label>
</fieldset>
<fieldset>
<label data-label-l for="l">data-label-l</label>
<textarea data-control-l id="l"></textarea>
</fieldset>
<form data-form-m>
<label><input data-radio-m type="radio" name="unique">1</label>
<label><input data-radio-m type="radio" name="unique">2</label>
<label><input data-radio-m type="radio" name="unique">3</label>
</form>
<form data-form-n>
<label><input data-radio-n type="radio" name="unique">4</label>
<label><input data-radio-n type="radio" name="unique">5</label>
<label><input data-radio-n type="radio" name="unique">6</label>
</form>
<fieldset>
<label><input data-radio-o type="radio" name="unique">7</label>
<label><input data-radio-o type="radio" name="unique">8</label>
<label><input data-radio-o type="radio" name="unique">9</label>
</fieldset>
<script src="index.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
<script src="test.js"></script>