Formularfelder definieren
Um Daten mit einem Formular zu erfassen, stehen einzeilige und mehrzeilige Eingabefelder, Radiobuttons und Checkboxen sowie Auswahllisten zur Verfügung. Sie alle haben einen Namen „name“, der zugleich als Variablenname bei der Übertragung dient und über den das Feld per Javascript angesprochen werden kann, sowie einen Wert „value“, der den Inhalt des Feldes umfasst.
Einzeilige Eingabefelder
Sollen einzelne wenige Wörter oder eine Zahl erfragt werden, lässt sich dies am besten über ein einzeiliges Eingabefeld bewerkstelligen. Dieses ist vom Typ type=“text“, die Anzeige kann beliebig lang sein (size=“xxx“) und beliebig viele oder aber eine maximale Zahl an Zeichen aufnehmen (maxlength=“xxx“). Ist die maximale Zahl der Zeichen größer als die Anzeige, wird automatisch gescrollt. Der Wert kann leer oder mit einem Wert vorbelegt sein (value=“xxx“), der entweder überschrieben oder, eher unüblich, nur gelesen werden kann (readonly=“readonly“). Für die Eingabe von Passwörtern kann die aktuelle Eingabe eines Nutzers mit Sternchen verdeckt werden, so dass zufällig anwesende Personen sie nicht nachvollziehen können. Dazu ändert sich der Typ von type=“text“ auf type=“password“.
<form method=“post“ action=“empfaenger_datei.php“ name=“beispiel“>
<input type=“text“ name=“vorname“ value=““ size=“20″ maxlength=“25″>
<input type=“text“ name=“vorname“ value=“Stefan“ size=“20″ maxlength=“25″>
<input type=“text“ name=“vorname“ value=“Stefan nicht veränderbar“ size=“20″ maxlength=“25″ readonly=“readonly“>
<input type=“password“ name=“kennung“ value=““ size=“20″ maxlength=“25″>
</form>
Mehrzeilige Eingabefelder (Textfelder)
Mehrzeilige Eingabefelder, sogenannte Textfelder, werden zwischen den Tags <textarea…></textarea> notiert. Die Größe des Feldes wird in Zeilen (rows=“xxx“) und Spalten (cols=“xxx“) angegeben. Die tatsächliche Eingabe kann natürlich länger sein und wird gegebenenfalls gescrollt. Anders als bei den einzeiligen Eingabefeldern wird der Wert nicht im Attribut „value“ aufgenommen, sondern zwischen den Tags <textarea…></textarea>. Gelegentlich werden Textfelder auf nur lesen (readonly=“readonly“) gesetzt, um zum Beispiel AGB in einem Bestellformular abzubilden.
<form method=“post“ action=“empfaenger_datei.php“ name=“beispiel“>
<textarea name=“texteingabe“ cols=“60″ rows=“5″></textarea>
<textarea name=“texteingabe“ cols=“60″ rows=“5″ readonly>AGB – der Inhalt kann nicht verändert werden.</textarea>
</form>
Auswahllisten
Über Auswahllisten kann der Nutzer einen oder mehrere Einträge (multiple=“multiple“) aus einer vorgegebenen Liste wählen. Eine Auswahlliste wird zwischen den Tags <select…></select> notiert. Über die Größe (size=“xxx“) kann festgelegt werden, wieviel Einträge angezeigt werden. Jeder einzelne Eintrag wird zwischen den Tags <option…></option> definiert. Der Wert eines Listeneintrags wird als value=“xxx“ im <option…>-Tag festgesetzt. Dort kann man mit selected=“selected“ auch einen Wert vorselektieren.
<form method=“post“ action=“empfaenger_datei.php“ name=“beispiel“>
<select name=“land“ size=“3″>
<option value=“oest“>Österreich</option>
<option value=“deu“ selected>Deutschland</option>
<option value=“schw“>Schweiz</option>
<option value=“frankr“>Frankreich</option>
<option value=“hol“>Holland</option>
</select>
</form>
Auswahllisten ohne die Möglichkeit zur Mehrfachauswahl werden eingesetzt, um zum Beispiel Länderangaben im Bestellformular eines Onlineshops zu definieren. Wer sich schon mal in Jobbörsen umgesehen hat, wird dort auch Auswahllisten mit Mehrfachauswahl vorgefunden haben, um die Suche in der Datenbank auf mehrere Berufsfelder oder Regionen auszuweiten.
<form method=“post“ action=“empfaenger_datei.php“ name=“beispiel“>
<select name=“region“ size=“3″ multiple=“multiple“>
<option value=“nrw“>NRW</option>
<option value=“hes“>Hessen</option>
<option value=“bay“>Bayern</option>
<option value=“sachs“>Sachsen</option>
<option value=“bre“>Bremen</option>
</select>
</form>
Checkboxen und Radiobuttons
Eine andere Form von Auswahllisten sind Checkboxen und Radiobuttons, nur dass hier die Einträge getrennt voneinander als Block von Einträgen mit jeweils einem quadratischen beziehungsweisen runden Auswahlfeld vorkommen. Checkboxen, die eckigen Auswahlfelder, erlauben keine, Einfach- oder Mehrfachauswahl, während Radiobuttons, die runden Auswahlfelder, nur maximal eine Auswahl gestatten. Über das Attribut checked=“checked“ können ein oder mehrere Werte vorgewählt sein.
<form method=“post“ action=“empfaenger_datei.php“ name=“beispiel“>
<input type=“checkbox“ name=“land“ value=“deutschland“> Deutschland
<input type=“radio“ name=“geschlecht“ value=“frau“> Frau
</form>
Versteckte Elemente
Mit dem Absenden des Formulars können auch versteckte Variablen übergeben werden. Wer die Suche in einer Datenbank erlaubt, könnte auf diese Weise zum Beispiel dem ausführenden Script zu Statistikzwecken versteckt die Seite, von der aus die Suche gestartet wurde, übermitteln. Versteckte Elemente werden wie einzeilige Eingabefelder definiert, nur dass hier der Typ statt type=“text“ type=“hidden“ ist.
<form method=“post“ action=“empfaenger_datei.php“ name=“beispiel“>
<input type=“hidden“ name=“seite“ value=“formularfelder.php“>
</form>
Eingabefeld für Dateiupload
Angenommen, dem Nutzer soll Gelegenheit gegeben werden, Dateien wie zum Beispiel Fotos auf den Server zu laden, dann kann er das über ein Formularfeld, das mit type=“file“ gekennzeichnet ist. Das Attribut maxlength=“xxx“ legt hierbei die maximale Dateigröße in Byte für den Upload fest. Enthält ein Formular ein derartiges Feld, muss dies im einleitenden „<form…>“ mit enctype=“multipart/form-data“ gekennzeichnet sein. Neben solch einem Feld erscheint ein zusätzlicher Klickbutton, über den in der Dateistruktur der Festplatte nach einer Datei gesucht werden kann.
<form method=“post“ action=“empfaenger_datei.php“ name=“beispiel“>
<input type=“file“ name=“hochzuladende_datei“ value=““ maxlength=“50000″ size=“40″>
</form>