Associate label and input tags together via for and id attributes for accessibility

[adamjohnson]

In the complete example, the Search and Show inputs have labels, but they are not programmatically associated with their inputs via for and id attributes.

Right now the markup is like this:

<label class="label">Search</label>
...
<input class="input" type="text" placeholder="Start typing..." x-model="params.search" @keyup.debounce.350="doSearch()">

In order to associate the <label> with the <input>, for and id attributes need to be applied:

<label for="littleBigTable-search" class="label">Search</label>
...
<input id="littleBigTable-search" class="input" type="text" placeholder="Start typing..." x-model="params.search" @keyup.debounce.350="doSearch()">

Here's a great article on how to create accessible forms and another site with many examples of accessible form markup.