HTML – die wichtigsten Elemente zur Eingabe

Manche Websites erzeugen nur Ausgabe – man kann Texte lesen, Bilder und Videos anschauen. Die einzige mögliche “Eingabe” ist “Klick” – man kann die Links anklicken und so ein wenig “surfen”. Und manchmal gibt es auch noch eine Textsuche.

Auf anderen Sites kann man auch etwas eingeben, zum Beispiel bei Buchungssystemen (Reisedaten), im Online-Banking, bei Webshops (gewünschte Produkte) oder bei Immobilienportalen.

Die eingegebenen Daten werden dann auf mehr oder minder komplexe Art weiterverarbeitet, um zum gewünschten Ergebnis zu kommen. So muss zum Beispiel bei einer Reisebuchung die Verfügbarkeit des Fluges, des Hotels geprüft werden, gegebenenfalls verbunden mit der Erzeugung von sinnvollen Alternativvorschlägen bei ausgebuchten Kapazitäten.

Manchmal kann man dabei “zuschauen”. Wenn Sie bei der Google-Suche der Reihe nach die Buchstaben “s” und “e” (nur die Buchstaben ohne Gänsefüßchen) eingeben, sehen Sie das Anspringen der automatischen Hilfe (sofern Ihre Internet-Verbindung nicht allzu langsam ist): Sie erhalten eine Reihe von Suchbegriffen vorgeschlagen, die mit “se” anfangen, zum “sepa” (für das “Sepa-Lastschriftverfahren”).

Geben Sie nun zusätzlich nach dem “se” als nächsten Buchstaben ein “x” ein, sehen Sie wie die automatische Hilfe plötzlich verstummt: der Kasten verschwindet. Denn das in der Suche nun stehende Wort ist politisch “nicht korrekt” – Google unterstützt keine pornographischen, gewaltverherrlichenden oder illegale Inhalte. Natürlich könnten Sie durch Klick auf den Suchbutton trotzdem jetzt eine Suche starten – nur die automatische Hilfe ist deaktiviert, nicht die Suchfunktion an sich.

Wenn Sie Ihren drei im Suchfeld stehenden Buchstaben nun als vierten ein  “u” hinzufügen, springt die Hilfe-Automatik wieder an – nicht dagegen, wenn Sie statt eines “u” ein “y” ergänzen. Das Beispiel illustriert die auf Einzelbuchstaben basierende Verarbeitungslogik ganz gut.

Bevor wir uns jetzt aber zu tief im Wald der interessanten, aber unnützen Dinge verlieren, sollten wir zum eigentlichen Thema kommen: wie kann man Eingaben vom Nutzer erhalten?

Das einfachste Beispiel ist tatsächlich das Texteingabefeld. Wir wollen, dass der Nutzer eine Eingabe selbst eintippt. Das geht innerhalb von HTML ganz einfach mit folgendem – selbst-schließenden Tag: <input type="text" name="eingabefeld" />. Und davor sollte man natürlich dem Anwender sagen, was er eingeben soll. Das macht man mit einem label-Tag. Also könnte man zum Beispiel schreiben:
<label>Eingabe</label> <input type="text" name="eingabefeld" />.
Und das Resultat wäre:


.

Mit dem name-Attribut wird der Eingabewert einer Variablen zugewiesen (hier: eingabefeld), so dass der Wert hinterher auch weiterverarbeitet werden kann.

Manchmal möchte man aber gar nicht, dass der Anwender freien Text eingibt, sondern er soll nur aus vorgegebenen Werten wählen können. Das kann zum Beispiel so machen:
<label>Anrede</label>
<input type="radio" name="anrede" value="Frau" checked="checked" /><label>Frau</label>
<input type="radio" name="anrede" value="Herr" /><label>Herr</label>

Und das ergibt dann:


     


 

Beachten Sie dabei, dass wir zwei input-Felder mit gleichem name-Attribut benötigen. Das checked-Attribut bewirkt eine Vorbelegung. Und der Wert der Variablen anrede ist am Ende derjenige desjenigen value-Attributes, dessen Radiobutton (so nennt man diese Eingabeart) angeklickt ist. Es gibt also nur die möglichen Werte “Frau” oder “Herr”.

Es gibt aber noch eine andere Möglichkeit, den Nutzer aus vorgegebenen Optionen auswählen zu lassen.
<label>Anrede</label>
<select name="anrede">
<option value="auswahl">Bitte wählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>

 

Das ergibt


 

 


 

Welches Verfahren ist besser zur Auswahl? Das läßt sich nicht mit immerwährender Gültigkeit sagen. Aber die “Radio-Knöpfe” – sie verdanken ihren Namen der alten Form eines Radios: drückte man einen Knopf hinein, sprang der bisher gedrückte heraus – haben einen wesentlichen Vorteil: man kommt mit einem Klick aus. Bei einem Selektionsmenü benötigt man in der Regel zwei Klicks – einen zur Öffnung des Menüs und einen zur Auswahl. Daraus ergibt sich ein weiterer Vorzug der Radio-Knöpfe: Man hat sofort alle verfügbaren Optionen sichtbar.

Deshalb wird das select-Statement in der Regel bei sehr langen Auswahllisten verwendet, die sonst den Umfang der Seite aufblähen würden. Ein Beispiel dafür ist eine Liste aller Länder der Erde (zur Auswahl der Zeitzone, der Sprache oder des Geburtslandes).

About Wolfgang Wagemann

Wolfgang Wagemann lebt im Rhein-Neckar-Raum.
This entry was posted in Sprachen und Systeme and tagged . Bookmark the permalink.