Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 für Webdesigner

Beispiel-Skizze, Teil 9: Das Suchfeld einbauen

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In diesem Film wird die Meta-Navigation um ein Suchformular erweitert. Dabei kommen Eingabefelder der Typen search und image zum Einsatz.

Transkript

In der Skizze der video2brain-Startseite mit den neuen HTML 5-Elementen fehlt hier oben noch ein Suchfeld. Wenn Sie sich das Original einmal kurz anschauen: Da sind hier die drei Links in der Meta-Navigation und hier ist ein Suchfeld. Wenn man reinklickt verschwindet das. Das könnte ein Placeholder übernehmen. Und hier ist eine hübsche kleine Suchgrafik. Das ist ein Formular, ein Inputfeld und ein div. Mit der Grafik, was per JavaScript zum Klicken gebracht wird. Hier ist die Grafik. "Search header button.gif" Das nehmen wir mal weg. Da haben wir schon was vorbereitet. Im Ordner "Grafiken" liegt die zufällig schon. "Search header button gif", 26 mal 26 Pixel groß. Und so etwa sieht sie aus, mit so einer kleinen Lupe darin. Das ist die Grafik, die Sie benötigen. Suchfeld und Grafik sollen hier rechts oben erscheinen und los geht es im im Editor mit dem HTML. Hier ist die Skizze, v2b-Startseite. Ich scrolle hier mal eben runter - in die Meta-Navigation soll das Ganze rein. Dann machen wir hier ein kleines bisschen Platz und bauen dort ein Formular ein. "Action" hat es bei uns nicht, das Ganze ist ja nur eine Skizze. Hier soll das Ende-Tag. Das brauchen wir ja auch. Und dann geht es los. Erstmal mit einem Label, wie sich das gehört für ein ordentliches Suchfeld. Auch wenn man das später nicht sehen wird, das wird ausgeblendet mit einer Klasse namens "hide me" und irgendeine Beschriftung: "Diese Site durchsuchen" und "/label" - Oh da ist einer zu viel - das wird ausgeblendet, aber für Screenreader und ohne CSS ist dass doch durchaus sinnvoll so etwas da einzubauen. Jetzt kommt ein Suchfeld, das Eingabefeld und das ist der neue Type "search". Da können alle Beteiligten gleich sehen, dass es sich um ein Suchfeld handelt. "Name = Suchfeld" und "ID = Suchfeld", damit das Label im Falle des Falles stimmt. "Size" - schreiben wir ruhig mal hin - "= 10". "Max length" - damit nicht zu viel eingegeben werden kann - "60" und "placeholder max lenght". Da stimmt doch etwas nicht. Und "placeholder = Suchbegriff" stand in dem Feld. So, das ist unser Input-Feld. Jetzt wieder etwas zurück hier. Jetzt als Button kommt ein Input type "image". Das ist ein Submit-Button mit Grafiken. Man könnte auch ein Buttonelement nehmen, aber Input type "image" ist ganz praktisch. "Class = Suchbutton", damit wir ihn ordentlich formatieren können, falls da Bedarf besteht. Und die Grafik liegt im Unterordner "Grafiken" und hieß "search header button.gif". So das ist es. Wir haben hier dieses Formular zu Ende. Noch einmal kurz darüber schauen: "form action label" vor Suchfeld, "ID = Suchfeld". Das passt. Class "hide me" gibt es noch nicht, wird demnächst geschrieben. "Diese Site durchsuchen/label", input type "search". Name, Suchfeld, ID size, max lenght 60, "placeholder = Suchbegriff", input type "image", class "Suchbutton", SRC-Grafiken, "search header to button". Das sieht alles so weit ganz gut aus. Ich wechsle einmal rüber in den Firefox, klicke auf "Neu laden". Nicht erschrecken: Das passt natürlich noch nicht alles so ganz hier. Hier steht schwarz auf schwarz "Diese Site durchsuchen". Das ist fast schon ausgeblendet, ohne CSS sogar. So weit der erste Schritt, das HTML ist darin, die Positionierung kommt gleich. Der Placeholder ist schon hier. Das wird jetzt -- Nach oben muss das natürlich noch, aber funktionieren würde es.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!