Informatik-Kompendium
Formulare
Im Internet erfreuen sich Formulare größter Beliebtheit. Aus diesem Grund werden wir uns jetz voll und ganz diesem Thema widmen.
Formulare werden überall dort eingesetzt, wo vom Benutzer Eingaben verlangt werden.
Das kann ein Kontaktformular sein, ein Formular für ein Gästebucheintrag, ein Login, eine Eingabe von Begriffen bei einer Suchmaschine, eine Newsletter-Anmeldung, ein Bestellformular in einem Onlineshop und so weiter.
Formulare sind aus dem Internet einfach nicht mehr wegzudenken.
Alle Formulare beginnen mit dem einleitenden <form> Tag und werden mit </form> beendet.
Innerhalb des <form> Tag muss zuerst ein Ziel für das Absenden des Formulars angegeben werden. Dies geschieht mit der Eigenschaft 'action' und als Wert geben sie die Zieladresse an.
Als nächstes müssen sie sich für eine Versandmethode 'method' entscheiden. Zur Auswahl stehen 'post' und 'get'.
Bei der 'get' Methode werden die Formulardaten einfach mit einem Fragezeichen an die Zieladresse angehangen und die einzelnen Formularfelder durch ein '&' voneinander getrennt. So könnte das aussehen:
http://www.html-kompendium.de/index.php?id=45
Bei der 'post' Methode werden die Daten nicht sichtbar zur Weiterverarbeitung an den Webserver gesendet.
Die 'get' Methode hat den Nachteil, dass die Länge der URL begrenzt ist, und die Formulardaten offen in der Adresszeile des Browsers angezeigt werden.
Optional kann das Formular die Eigenschaft 'name' beinhalten. Hiermit lässt sich dem Formular ein eineutiger Name zuorden.
Beispiel für ein einleitendes <form> Tag:
<form name="gaestebuchform" action="gaestebuch_eintragen.html" method="post" >
einzeiliges Textfeld
Um ein einzeiliges Textfeld zu definieren verwenden wir das <input> Tag mit dem Attribut 'type=text'. Mit 'size' bestimmen sie die Länge des Textfeldes und mit 'maxlength' die maximale Länge für die einzugebenden Zeichen. Sie können das Formular mit einem beliebigen Text vorbelegen. Hierzu wird das 'value' Attribut verwendet. Damit die Eingaben in unserem Textfeld auch ausgewertet bzw. zugeordnet werden können, müssen wir natürlich unserem einzeiligem Textfeld auch einen Namen mit 'name' zuweisen.
Ein kleines Beispiel für ein Formular mit einem einzeiligen Textfeld:
<form name="form1" action="form1.html" method="post" >
<input name="vorname" type="text" size="20" maxlength="15" value="Vorname">
<form>
Soll im einzeiligen Textfeld während der Eingabe der Eingabetext nicht angezeigt werden, z.B. für ein Passwort, dann wählen sie für 'type' den Wert "password".
Ein kleines Beispiel für ein Formular mit einem Passwortfeld:
<form name="form1" action="form1.html" method="post" >
<input name="geheim" type="password" >
<form>
mehrzeiliges Textfeld
Ein mehrzeiliges Textfeld lässt sich mit <textarea></textarea> erstellen.
Um die Höhe und Breite des mehrzeiligen Textfeldes festzulegen geben wir die Anzahl der Zeilen mit 'rows' und die Anzahl der Spalten bzw. Anzahl der Zeichen mit 'cols' an.
Um ein mehrzeiliges Textfeld mit Text vorauszufüllen brauchen wir unseren Text nur zwischen dem einleitenden und schliessenden 'textarea' Tag zu schreiben.
Ein kleines Beispiel für ein Formular mit einem mehrzeiligen Textfeld:
<form name="form1" action="form1.html" method="post" >
<textarea name="nachricht" rows="5" cols="30" >Ihre Nachricht</textarea>
<form>
Auswahlliste
Um den Besucher ihres Formulars die Auswahl von Einträgen zu ermöglichen können wir eine Auswahlliste erstellen die vorgefertigte Einträge enthält.
Die Auswahlliste wird mit 'select' eingeleitet und die vorgefertigten Einträge stehen im 'option' Tag.
Mit der Eigenschaft 'selected' innerhalb von 'option' lässt sich ein Eintrag vorselektieren.
Ein kleines Beispiel für ein Formular mit einer Auswahlliste:
<form name="form1" action="form1.html" method="post" >
<select name="auswahl">
<option>Herr</option>
<option selected >Frau</option>
<option>Firma</option>
</select>
</form>
Die Höhe der Auswahlliste kann mit 'size' eingestellt werden und gibt die Anzahl der Zeilen an. Die Breite wird automatisch festgelegt und richtet sich nach dem längsten Eintrag. Durch 'multiple' lassen sich mit gedrückter 'Strg' Taste mehrere Einträge auswählen.
Ein kleines Beispiel für ein Formular mit einer Auswahlliste mit Merhfachauswahl und size:
<form name="form1" action="form1.html" method="post" >
<select name="auswahl" size="2" multiple >
<option>Herr</option>
<option selected >Frau</option>
<option>Firma</option>
</select>
</form>
Radio Buttons
Bei den Radio Buttons handelt es sich um mehrere kleine runde Knöpfe von denen der User nur eines auswählen kann. Das funktioniert allerdings nur wenn alle Radio Buttons den gleichen Namen zugewiesen bekommen. Jeder Radio Button bekommt mit 'value' einen Wert zugewiesen. Mit 'checked' lässt sich ein Radio Button vorselektieren. Bei der Erstellung der Buttons kann ein Button vorselektiert werden.
Ein kleines Beispiel für ein Formular mit Radio Buttons:
<form name="form1" action="form1.html" method="post" >
<input type="radio" name="lieblingsspeise" value="Pizza" > Pizza<br>
<input type="radio" name="lieblingsspeise" value="Spaghetti" > Spaghetti<br>
<input type="radio" name="lieblingsspeise" value="Hot Dog" checked > Hot Dog<br>
<input type="radio" name="lieblingsspeise" value="Salat" > Salat<br>
<form>
Checkbox
Bei der Checkbox handelt es sich um ein kleines Kästchen das sich durch anklicken auswählen lässt. In die Checkbox wird dann ein Häkchen gezeichnet. Die Checkbox erhält mit 'value' den zu übermittelnden Text. Mit 'checked' lässt sich die Checkbox mit dem Häkchen vorausfüllen.
Ein kleines Beispiel für ein Formular mit Checkbox
<form name="form1" action="form1.html" method="post" >
<input type="checkbox" name="agb" value="AGB akzeiptiert" checked > AGB akzeptiert<br>
<input type="checkbox" name="newsletter" value="Newsletter bestellen" > News
letter bestellen<br>
<form>
Submit und Reset Buttons
Unser Formular soll elegant durch klicken auf eine Schaltfläche abgesendet werden. Hierfür gibt es bereits einen 'submit' Button, der auf Mausklick unser Formular absenden wird. Mit 'value' kann man den text auf der Schaltfläche definieren, ansonsten wird der Browser einen Standard-Text auf den Button legen. Der Text kann je nach Browser unterschiedlich sein.
Der 'reset' Button funktioniert ähnlich, jedoch wird das Formular hier nicht versendet sondern zurückgesetzt und eventuell ausgefüllte Felder werden wieder geleert.
Ein kleines Beispiel für ein Formular mit Textfeld, Submit und Reset Button:
<form name="form1" action="form1.html" method="post" >
<input name="vorname" type="test" ><br><br>
<input type="submit" value="Formular versenden" >
<input type="reset" value="Formular zurücksetzen" >
<form>
Image Button
Anstatt des Standard 'submit' Button lässt sich auch ein Image Button mit der gleichen submit Funktion benutzen. Darüber hinaus werdem beim absenden des Formulars die x und y Koordinaten von der Klickposition auf den Image Button mit übersendet, so das sich diese zusätzlich auswerten lassen könnten. Da es sich hier um eine Grafik handelt muss auch wieder ein alternativer Text angegeben werden, falls das Bild nicht angezeigt werden kann.
Ein kleines Beispiel für ein Formular mit Textfeld und Image Button:
<form name="form1" action="form1.html" method="post" >
<input name="vorname" type="test" ><br><br>
<input type="image" src="bild.jpg" alt="Absenden" >
<form>
Linktipps: