Formulare
Mit HTML kann man Formulare erstellen, jedoch braucht es zum Auswerten eine Programmiersprache.
Mit dem Tag <form> beginnt das Formular und umschließt alle Felder die im Formular vor kommen.
Damit das Formular überhaupt etwas macht, wenn man es abschicken will, braucht es das Attribut <action>
In diesem Attribut wird die Zieladresse angegeben, wohin die Werte des Formulares geschickt werden sollen.
Dann muss noch angegeben werden was mit den Daten geschehen soll. Diese Methoden heißen "get" und "post"
Bei der get-Methode werden die Werte nach einem Fragezeichen an die URL angehängt. Die passende Programmiersprache kann diese URL lesen und die Werte des Formulares weiter verarbeiten.
Bei der post-Methode werden die Werte im Kopfbereich des HTTP-Requests eingefügt. Das hat den Vorteil, dass die Daten nicht in der URL angezeigt werden. Auch hier kann eine Programmiersprache die Werte abgreifen.
</form>
Mit dem action-Wert "mailto" wird ein E-Mail Programm geöffnet, mitdem die Werte verschickt werden können. Die passende Methode dazu ist post. Für eine schönere Darstellung gibt es das zusätzliche Attribut <enctype="text/plain">. Dieses kommt den den form-Tag. Dies benutzt man in der Praxis selten, da es für den Benutzer sehr umständlich ist
Textfelder
Nun muss das Formular seine Formularfelder bekommen, Da etwas eingegeben werden soll, ist das passende Tag dafür <input>. Mit dem <type> Attribut wird die Art des Feldes bestimmt. Mit dem Wert "text" wird ein einfaches Textfeld erstellt. Wichtig ist es, jedem Feld einen Namen zu geben, diese sind notwendig wenn später die Werte identifiziert werden müssen. Das Attribut hierfür ist <name>
<input type="text" name="text">
</form>
Es ist auch möglich die größe der Textfelder zu verändern. Dafür gibt es das Attribut <size>
Auswahlmöglichkeiten
Für Auswahlmöglichkeiten gibt es die Radiobuttons und Checkboxen. Während man bei Radiobuttons nur eine Möglichkeit auswählen kann, sind bei Checkboxen mehrere Eingaben möglich. Bei den Radiobuttons hat das Attribut type den Wert "radio", bei Checkboxen ist es "checkbox".
|
|
|
Radiobuttons kommen als Gruppe, sie haben den gleichen Namen. So können auch mehrere Gruppen auf einer Seite stehen. Sie brauchen außerdem das Attribut <value> dessen Wert für den abgeschickten Wert des Formularfeldes steht. Um eine Vorauswahl zu treffen gibt es das Attribut <checked> Es braucht keinen Wert, steht also alleine.
Button 1 <input type="radio" name="radio" value="Button 1"> <br>
Button 2 <input type="radio" name="radio" value="Button 2"> <br>
Button 3 <input type="radio" name="radio" value="Button 3"> <br>
Button 4 <input type="radio" name="radio" value="Button 4" checked> <br>
Button 5 <input type="radio" name="radio" value="Button 5">
</form>
Checkboxen sind genau so aufgebaut, nur mit dem Unterschied das der Name unterschiedlich sein darf.
Auswahl 1 <input type="radio" name="checkbox" value="Auswahl 1"> <br>
Auswahl 2 <input type="radio" name="checkbox" value="Auswahl 2"> <br>
Auswahl 3 <input type="radio" name="checkbox" value="Auswahl 3"> <br>
Auswahl 4 <input type="radio" name="checkbox" value="Auswahl 4" checked> <br>
Auswahl 5 <input type="radio" name="checkbox" value="Auswahl 5">
</form>
Auswahllisten
Für Auswahllisten gibt es einen neuen Tag <select>, auch dieses verlangt das name-Attribut. Innerhalb des select-Tags gibt es mehrere <option> Tags, welche die Auswahlmöglichkeiten enthalten. Sie müssen alle ein value-Attribut haben. Auch bei Auswahllisten kann mit <selected> eine Vorwahl getroffen werden.
<option value"Auswahl-1">Auswahl 1</option>
<option value"Auswahl-2">Auswahl 2</option>
<option value"Auswahl-3">Auswahl 3</option>
</select>
Die Menge der sichtbaren Zeilen der Auswahllisten ist mit dem Attribut size einstellbar. Es wird ins select-Tag geschrieben.
Mehrzeilige Textfelder
Mit dem input-Tag sind einzelige Textfelder möglich, aber für längere Texte braucht es ein weiteres Tag <textarea>. Es braucht auch das name-Attribut. Man kann zwischen den textarea-Tags einen Text schreiben der beim Laden der Seite im Textfeld steht.
Das Feld ist recht klein, kann aber mit den Attributen <rows> und <cols> verändert werden. Sie geben an wieviele Zeilen und Spalten das Textfeld haben soll.
Hier ist Platz für Kommentare </textarea>
So muss der Text im Textfeld vom Anwender selbst gelöscht werden. Mit dem Attribut <placeholder> verschwindet der Text sofort, wenn der Anwender in das Textfeld schreibt. Der Text zwischen den textarea-Tags wird nun zum Wert des placeholder.
</textarea>
Versteckte Felder
Es gibt versteckte Felder, welche der Anwender nicht sehen oder verändern kann. Sie sind für reines HTML eher uninteressant, aber mit einer Programmiersprache lassen sich mit ihnen Werte für zum Beispiel Datenbanken übermitteln. Möchte man etwa die Internetadresse des Formulares mit schicken würde das so aussehen:
Im input-Tag bekommt das Attribut type den Wert "hidden", es braucht einen namen und das value, in dem die Information steht, die übermittelt werden soll.
Buttoms
Jetzt muss das Formular nur noch abgeschickt werden. Das geht mit dem Submit- und Reset-Button. Wieder kommt das input-Tag zum einsatzt. Die Buttoms werden mit den Werten "submit" und "reset" im type-Attribut erstellt. Mit dem value-Attribut lassen sich die Buttoms beschriften.
Es gibt noch viele weitere Tags und Attribute. Die Seite https://www.w3schools.com/ hat eine sehr ausführliche Übersicht.