Is it permissible to have 1 text box and 2 Label elements that are associated with that one textbox?
Imagine the Textbox as a search field. The two Label elements represent two distinct categories you can conduct searches in. Clicking on Label 1 would focus the textbox and modify the hidden attribute of the underlying form. For example:
<form method="" action="">
<label for="search" id="books">Search Books</label>
<label for="search" id="games">Search Games</label>
<input type="search" name="search" id="search" placeholder="What are you looking for?" />
</form>
<script type="javascript">
// IF LABEL 1 (BOOKS) IS CLICKED, THEN SET HIDDEN FORM ELEMENT TO "BOOKS"
// IF LABEL 2 (GAMES) IS CLICKED, THEN SET HIDDEN FORM ELEMENT TO "GAMES".
</script>
What impact does this setup have on SEO? I can identify potential concerns but unsure if they hold validity.