foundation-sites
Version:
The most advanced responsive front-end framework in the world.
107 lines (98 loc) • 4.99 kB
HTML
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide Checkboxes</h1>
<p>This form has required checkboxes. If you try to submit without picking one, it
should show an error. When you then pick one, the error should clear and let you submit.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input required type="checkbox" name="example1" value="yes" id="example1Yes" />
<label for="example1Yes">Yes</label>
<input required type="checkbox" name="example1" value="no" id="example1No" />
<label for="example1No">No</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
<p>This form has <strong>one</strong> required checkbox. If you try to submit without picking one, it
should show an error. When you then pick one, the error should clear and let you submit.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input type="checkbox" name="example3" value="yes" id="example3Yes" />
<label for="example3Yes">Yes</label>
<input required type="checkbox" name="example3" value="no" id="example3No" />
<label for="example3No">No</label>
<input type="checkbox" name="example3" value="maybe" id="example3Maybe" />
<label for="example3Maybe">Maybe</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
<p>This form has optional checkboxes. It should let you submit with or without picking one.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input type="checkbox" name="example2" value="yes" id="example2Yes" />
<label for="example2Yes">Yes</label>
<input type="checkbox" name="example2" value="no" id="example2No" />
<label for="example2No">No</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
<p>This form has a required checkbox with a custom value for <strong>data-min-required</strong> that specifies how many checkboxes must be checked in the group. If you try to submit without checking at least 3 checkboxes, it
should show an error. When you then pick the required amount, the error should clear and let you submit.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input type="checkbox" name="example4" value="yes" id="example4Yes" />
<label for="example4Yes">Yes</label>
<input required data-min-required="3" type="checkbox" name="example4" value="no" id="example4No" />
<label for="example4No">No</label>
<input type="checkbox" name="example4" value="maybe" id="example4Maybe" />
<label for="example4Maybe">Maybe</label>
<input type="checkbox" name="example4" value="some" id="example4Some" />
<label for="example4Some">Some</label>
<input type="checkbox" name="example4" value="more" id="example4More" />
<label for="example4More">More</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>