Ausgabe wird zu oft getätigt

[Gunnar Bittersmann]

@@Rolf B

Und dein Input für die Stadt braucht ein Label. Ein Placeholder ist kein Label.

So ist es.

Du kannst das Label visuell verstecken, so dass ein sehender Mensch den Placeholder sieht. Aber das Label ist dann für Leute da, die nicht sehen können.

Nicht die beste Idee. Entweder das Feld braucht eine sichtbare Beschriftung – dann als Label – oder es braucht keine – dann das Label visuell verstecken. Ein Placeholder ist kein Ersatz für Label – auch für Sehende nicht.

   <div class="search">
     <input type="text" placeholder="Enter City Name" id="search-txt">
     <a id="search-btn" href="#"><i class="fas fa-search"></i></a>
   </div>

Außerdem braucht das Formular (warum ist das kein form?) einen Button. Ein Link ist kein Button. href="#" ist ein deutliches Zeichen für den Missbrauch das a-Elements.

Und der Button braucht natürlich auch eine Beschriftung.

Das Markup sollte so aussehen:

<div role="search">
  <form>
    <label for="search-txt">City:</label>
    <input type="search" id="search-txt" name="search-txt">
    <button>search</button>
  </form>
</div>

Beachte role="search" und type="search"!

Label und Button können ggfs. visuell versteckt werden.

Ohne JavaScript wird das Formular abgesendet und kann serverseitig ausgewertet werden.

LLAP 🖖