Search Field
- Surprising variety of designs for a simple UI pattern
- Often breaks convention of visible label, reliance on placeholder text and icon
- Additional considerations depending on the function of the search field (new page, combobox list, auto-suggest)
Most common, insufficient markup we see:
<form>
<input placeholder="Search">
<i class="fa fa-search"></i>
</form>
Issues:
- No associated label
- <i> tag used to format icon
- Icon is not a natively clickable element (no tab index)
- No obvious action