@spartan-components/sc-form
Version:
A thin wrapper for html form elements to improve error handling.
100 lines (81 loc) • 2.74 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Spartan Components - Form</title>
</head>
<body>
<sc-form>
<form id="test" action="/test"></form>
<label for="test">Test</label>
<input type="text" id="test" name="test" required form="test" />
</sc-form>
<sc-form>
<form>
<!-- single inputs -->
<div>
<label for="firstName">First name</label>
<input type="text" id="firstName" required />
</div>
<div>
<label for="email">E-mail</label>
<input type="email" id="email" />
</div>
<div>
<label for="termsOfService">Accept our Terms of Service</label>
<input
type="checkbox"
name="termsOfService"
id="termsOfService"
required
/>
</div>
<!-- select inputs -->
<fieldset role="radiogroup">
<legend>Choose one color</legend>
<div>
<input type="radio" name="color" id="red" value="red" required />
<label for="red">Red</label>
</div>
<div>
<input
type="radio"
name="color"
id="green"
value="green"
required
/>
<label for="green">Green</label>
</div>
<div>
<input type="radio" name="color" id="blue" value="blue" required />
<label for="blue">Blue</label>
</div>
</fieldset>
<label for="another-color">Choose another color</label>
<select name="another-color" id="another-color" required>
<option value=""></option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
</select>
<!-- multi select -->
<fieldset data-required data-error="Please choose at least one fruit">
<legend>What fruits do you like?</legend>
<input type="checkbox" name="fruits" id="banana" value="banana" />
<label for="banana">Banana</label>
<input type="checkbox" name="fruits" id="apple" value="apple" />
<label for="apple">Apple</label>
<input type="checkbox" name="fruits" id="pear" value="pear" />
<label for="pear">Pear</label>
</fieldset>
<button type="submit">Submit!</button>
</form>
</sc-form>
<script type="module">
import "../src/sc-form.js";
</script>
</body>
</html>