@@JJ > [Suchfeld mit Lupe links](https://codepen.io/Test-JJ/pen/JjawaLq) Wozu das `div`? Du hast doch schon ein Containerelement. Wenn du dem `form`-Element die Klasse `search-container` verpasst, kannst du das `div` entsorgen. Allerdings hast du kein Suchfeld. Mit `role="search"` hast du eins: ```html <form role="search" class="search-container"> <label for="search"> ⋮ ``` Oder mit dem [neuen `search`-Element](https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element), das aber noch so neu ist, dass man da wohl auch noch ein paar Tage das `role`-Attribut braucht: ```html <search role="search"> <form class="search-container"> <label for="search"> ⋮ ``` (Es ist noch so neu, dass es bislang weder in *Can I Use*{:@en} noch in MDN auftaucht.) --- Es kann auch nicht schaden, den Typen des Eingabefelds auf `search` zu ändern. Bei virtuellen Tastaturen (Smartphones, Tablets, …) hat die *Call-to-action*{:@en}-Taste dann eine angepasste Beschriftung. `...` ist typografischer Frevel. Da ist das Auslassungszeichen `…` zu verwenden – im Deutschen mit Leerzeichen davor. Wenn du das Zeichen nicht irgendwoher (von hier oder aus der Zeichentabelle) rauskopieren willst, kannst du in HTML auch `&hellip;` verwenden. ```html <input type="search" id="search" name="search" placeholder="Suche …"> ``` --- > als Button Button ist ein gutes Stichwort. Das Formular hat keinen. Klar, es kann mit Enter-Taste abgeschickt werden. Aber wissen das alle Nutzer? Ich bin mir nicht sicher, ob es nicht einen Submit-Button bräuchte. Ich werd bei [nächster Gelegenheit](https://beyondtellerrand.com/events/dusseldorf-2023) mal nachfragen. 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter

@@JJ > [Suchfeld mit Lupe links](https://codepen.io/Test-JJ/pen/JjawaLq) Wozu das `div`? Du hast doch schon ein Containerelement. Wenn du dem `form`-Element die Klasse `search-container` verpasst, kannst du das `div` entsorgen. Allerdings hast du kein Suchfeld. Mit `role="search"` hast du eins: ```html <form role="search" class="search-container"> <label for="search"> ⋮ ``` Oder mit dem [neuen `search`-Element](https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element), das aber noch so neu ist, dass man da wohl auch noch ein paar Tage das `role`-Attribut braucht: ```html <search role="search"> <form class="search-container"> <label for="search"> ⋮ ``` (Es ist so neu, dass es bislang weder in Can I Use noch in MDN auftaucht.) --- Es kann auch nicht schaden, den Typen des Eingabefelds auf `search` zu ändern. Bei virtuellen Tastaturen (Smartphones, Tablets, …) hat die *Call-to-action*{:@en}-Taste dann eine angepasste Beschriftung. `...` ist typografischer Frevel. Da ist das Auslassungszeichen `…` zu verwenden – im Deutschen mit Leerzeichen davor. Wenn du das Zeichen nicht irgendwoher (von hier oder aus der Zeichentabelle) rauskopieren willst, kannst du in HTML auch `&hellip;` verwenden. ```html <input type="search" id="search" name="search" placeholder="Suche …"> ``` --- > als Button Button ist ein gutes Stichwort. Das Formular hat keinen. Klar, es kann mit Enter-Taste abgeschickt werden. Aber wissen das alle Nutzer? Ich bin mir nicht sicher, ob es nicht einen Submit-Button bräuchte. Ich werd bei [nächster Gelegenheit](https://beyondtellerrand.com/events/dusseldorf-2023) mal nachfragen. 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter

@@JJ > [Suchfeld mit Lupe links](https://codepen.io/Test-JJ/pen/JjawaLq) Wozu das `div`? Du hast doch schon ein Containerelement. Wenn du dem `form`-Element die Klasse `search-container` verpasst, kannst du das `div` entsorgen. Allerdings hast du kein Suchfeld. Mit `role="search"` hast du eins: ```html <form role="search" class="search-container"> <label for="search"> ⋮ ``` Oder mit dem [neuen `search`-Element](https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element), das aber noch so neu ist, dass man da wohl auch noch ein paar Tage das `role`-Attribut braucht: ```html <search role="search"> <form class="search-container"> <label for="search"> ⋮ ``` (Es ist so neu, dass es bislang weder in Can I Use noch in MDN auftaucht.) --- Es kann auch nicht schaden, den Typen des Eingabefelds auf `search` zu ändern. Bei virtuellen Tastaturen (Smartphones, Tablets, …) hat die *Call-to-action*{:@en}-Taste dann eine angepasste Beschriftung. `...` ist typografischer Frevel. Da ist `…` zu verwenden – im Deutschen mit Leerzeichen davor. Wenn du das Zeichen nicht irgendwoher (von hier oder aus der Zeichentabelle) rauskopieren willst, kannst du in HTML auch `&hellip;` verwenden. ```html <input type="search" id="search" name="search" placeholder="Suche …"> ``` --- > als Button Button ist ein gutes Stichwort. Das Formular hat keinen. Klar, es kann mit Enter-Taste abgeschickt werden. Aber wissen das alle Nutzer? Ich bin mir nicht sicher, ob es nicht einen Submit-Button bräuchte. Ich werd bei [nächster Gelegenheit](https://beyondtellerrand.com/events/dusseldorf-2023) mal nachfragen. 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter