Google-Suche: Den HTML-Code für das Suchformular erstellen Sie so

Formular mit HTML-Code erstellen

Wenn Sie auf Ihrer Website eine Google-Suche einbauen möchten, können Sie dies schnell und einfach über ein HTML-Formular machen.

• Ein Formular besteht dabei grundsätzlich aus dem form-Tag, mit welchem Sie die Versendeart und -Adresse festlegen, den einzelnen Eingabe- bzw. Auswahl-Feldern und dem Sendebutton.
• Der Code für den form-Tag benötigt grundsätzlich nur die zwei Attribute "action" und "method", sodass dieser in der Grundform so aussieht: 
  <form method="" action="" ></form>
• Das Attribut "method" gibt dabei die Sendeart an, bei der Sie grundsätzlich zwei verschiedene Formen nutzen können.
• Zum einen könnten Sie die Sendeart "post" verwenden. Der Attributwert "post" bedeutet, dass die eingegebenen Daten im Hintergrund gesendet werden, sodass der Benutzer diese nicht sehen kann.
• Im Gegensatz dazu werden bei "get" die Daten in der Adresszeile des Webbrowsers angezeigt. Wenn Sie also zum Beispiel ein Eingabefeld "suche" anbieten und der Benutzer bspw. "hilfe" eingibt, würde dann in der Adressezeile "...?suche=test" stehen.   
• Das Attribut "action" gibt die Datei an, welche die abgesendeten Daten verarbeitet. Dies könnte zum Beispiel eine lokale Datei wie "suche.php" oder auch ein externe Seite wie bspw. Google sein. 
• Im form-Tag werden die einzelnen Fehler für die Eingabe bzw. Auswahl sowie der Sendebutton erstellt. 
• Eingabefehler, die Sie zum Beispiel für eine Google-Suche verwenden könnten, werden dabei grundsätzlich mit folgendem Code erstellt: 
  <input name="" type="text" size="" />
• Mit dem "name" weisen Sie dem Feld einen Namen zu, den Sie dann unter anderem für die Weiterverarbeitung benötigen, damit die eingebenen Daten eindeutig zugewiesen werden können.
• Das Attribut "type" mit dem Wert "text" definiert ein Textfeld und mit dem Attribut "size" können Sie die Breite des Eingabefeldes festlegen, also zum Beispiel mit "40" die Breite auf 40 Zeichen festlegen.
• Optional können Sie mit dem Attribut "maxlength" die maximale Länge des Eingabefelds festlegen, um die eingegebenen Daten zu begrenzen. Sollte "maxlength" größer als "size" sein, würde bei der Eingabe das Feld weiter scrollen, damit der Benutzer sieht, was er über die eigentliche Länge ("size") hinaus schreibt.
• Einen Sendebutton können Sie ähnlich wie ein Eingabefeld erzeugen:
  <input type="submit" value="">
• Beim Attribut "type" wird mit dem Wert "submit" ein Button erstellt, der zum Senden gedacht ist. Beim Attribut "value" können Sie dann den Text eingeben, der auf dem Button erscheinen soll, also Beispiel "Absenden" oder "Suche". 

Formular für die Google-Suche anpassen

Um den HTML-Code für ein Formular für die Google-Suche zu verwenden, müssen Sie die oben erklärten einzelnen Komponenten für die Google-Suche anpassen.

• Für die Google-Suche müssen Sie zunächst als "method" den Wert "get" festlegen, also die Daten in der Adresseleiste anzeigen lassen. Dies können Sie leicht nachschauen, indem Sie bei Google einen beliebigen Suchtext eingeben, sodass Sie dann in der Adresszeile nach "google.de" nun etwas in der Form "google.de/search?=..." lesen können.
• Als Adresse für die Verarbeitung ("action") müssen Sie die Adresse "http://www.google.de/search" festlegen.
• Optional können Sie beim form-Tag auch noch "target="_blank" einfügen. Dadurch wid beim Klick auf den Sendebutton die Google-Suche nicht im selben Fenster geöffnet, sondern es wird ein neues Fenster im Webbrowser geöffnet, sodass dem Benutzer Ihre Website weiterhin angezeigt wird.
• Da die Google-Suche nur ein Eingabefeld hat, müssen Sie auch nur ein Eingabefeld erstellen, welches den Namen "q" hat. Die Länge ("size") können Sie dabei im Prinzip frei auswählen, wobei diese nicht zu klein sein sollte, damit der Benutzer genug Zeichen eingeben kann.
• Beim Sendebutton müssen Sie grundsätzlich nichts Besonderes ändern, wobei Sie zum besseren Erkennen der Google-Suche zum Beispiel den Text "Google Suche" oder "Suche bei Google" eingeben könnten.
• Der vollständige HTML-Code für die Google Suche würde dann zum Beispiel so aussehen:
  <form method="get" action="http://www.google.de/search" target="_blank">
  <input name="q" type="text" size="45" maxlength="255"  />
  <input type="submit" value="Google Suche" />
  </form>