More accessible in HTML Form

image taken from https://alistapart.com/article/prettyaccessibleforms
  1. For every <input> try to associate with <label> .
  2. Inside <label> put an attribute for and the value will be anything you like but must be the same id to that <input> .
<div class="border p-3">
<div class="alert alert-warning">This is <b>not accessible</b> form</div>

<form>
<div class="form-group">
<label>Title: (click here)</label>
<input type="text" class="form-control" placeholder="Enter title">
</div>

<div class="form-group">
<label>Body: (click here) </label>
<textarea class="form-control" placeholder="Enter any message"></textarea>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="border p-3">
<div class="alert alert-info">This is <b>accessible</b> form</div>

<form>
<div class="form-group">
<label for="title">Title: (click here) </label>
<input type="text" class="form-control" id="title" placeholder="Enter title">
</div>

<div class="form-group">
<label for="body">Body: (click here) </label>
<textarea id="body" class="form-control" placeholder="Enter any message"></textarea>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store