Search

A labeled search input with an always-visible submit button.

Show the markup

<form role="search" aria-label="Site">
  <div class="cc-field">
    <label class="cc-label" for="ex-search">Search this site</label>
    <div class="cc-search">
      <input class="cc-input" type="search" id="ex-search">
      <button class="cc-button" type="submit">Search</button>
    </div>
  </div>
</form>

Accessibility

A visible label — not a placeholder, not a magnifying-glass icon alone.
role="search" creates the search landmark.
The submit button is real and visible; Enter also submits.