Skip to content

Instantly share code, notes, and snippets.

@kaleb

kaleb/jsbin.exaXuQa.html

Created October 17, 2013 20:03
Show Gist options
  • Save kaleb/7031310 to your computer and use it in GitHub Desktop.
Save kaleb/7031310 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.exaXuQa.html
<!DOCTYPE html>
<html>
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<meta charset=utf-8 />
<title>Form Accessibility</title>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="javascript:void 0">
<h2>Personal Information</h2>
<div class="form-group">
<label class="col-sm-2 control-label" for="fname">First name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fname" name="first_name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="lname">Last name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lname" name="last_name" />
</div>
</div>
<div class="example1 form-group">
<label class="col-sm-2 control-label" for="ssn3">SSN</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="ssn3" name="ssn2" />
</div>
<div class="col-xs-1 text-center">-</div>
<div class="col-xs-2">
<input type="text" class="form-control" id="ssn2" name="ssn3" />
</div>
<div class="col-xs-1 text-center">-</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="ssn4" name="ssn4" />
</div>
</div>
<fieldset class="example1 form-group" style="display:none">
<legend class="col-sm-2 control-label" for="ssn2"><abbr title="Social Security Number">SSN</abbr></legend>
<div class="col-xs-2">
<input type="text" class="form-control" id="ssn3" name="ssn2" aria-label="SSN First 3 Numbers" />
</div>
<div class="col-xs-1 text-center">-</div>
<div class="col-xs-2">
<input type="text" class="form-control" id="ssn2" name="ssn3" aria-label="SSN Next 2 Numbers" />
</div>
<div class="col-xs-1 text-center">-</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="ssn4" name="ssn4" aria-label="SSN Last 4 Numbers" />
</div>
</fieldset>
<button type="button">Toggle SSN Example</button>
</form>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
</body>
</html>
Raw
jsbin.exaXuQa.js
$('button').on('click', function() {
$('.example1').toggle();
});
Raw
jsbin.exaXuQa.less
legend.control-label {
cursor: default;
font-size: inherit;
font-weight: bold;
border-bottom: inherit;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment