Im fünften Teil unseres Artikelworkshops “HTML und CSS erlernen”, erklären wir Ihnen heute alles wissenswerte rund um das Thema Formulare. Unser Workshop ist genau das richtige für Einsteiger, welche ihre eigene Website von Grund an selbst erstellen möchten, oder auch für Fortgeschrittene, welche unseren Workshop als Nachschlagewerk nutzen möchten.
Heute lernen Sie bei uns alles über Formulare. Formulare dienen der Interaktion mit der Website. Mittels <Form> Tags werden sie definiert. Durch das Attribut „action“ können wir eine Email-Adresse (=“mailto:empfänge@domain.de“), oder eine Link-Adresse (formular.html) als Empfänger hinzufügen. Als Platzhalter für die Link-Adresse kann eine Raute eingegeben werden.
Möchten wir die „Versandmethode“ festlegen, machen wir das über das Attribut „method“.
| Formulardaten werden an die URL gehängt | <form action=“formular.html“ method=“get“ |
| Formulardaten werden als stdin (Standarteingabe) zur Verfügung gestellt | <form action=“formular.html“ method=“post“ |
<input type=“text“ size=“30“ maxlength=“50“/>
Mit „size“ legen wir die Anzahl der sichtbaren Zeichen fest und mit „maxlength“ die maximal eingegebenen Zeichen. Möchten wir ein Passwortfeld definieren müssen wir bei „type“ einfach nur „password“ angeben:
<input type=“password“ size=“30“/>
Suchfelder benötigen ein neues Attribut, und zwar den Placeholder, der den Text anzeigt der im Suchfeld steht wenn nichts eingegeben wurde.
<input type=“serch“ placeholder=“Sucheingabe“ />
Damit die Daten, die in die Formularfelder eingetragen wurden auch verarbeitet werden können, müssen die Felder benannt werden. Um einen fehlerfreien Code zu schreiben, sollten Sie alle Möglichkeiten abgreifen und sowohl Name sowie die ID nutzen. Außerdem dürfen keine Sonder- und Leerzeichen verwendet werden.
<input type=“text“ name=“vorname“ id=“vorname“ />
Um eine Beschriftung innerhalb des Formularfeldes zu machen, müssen wir das Attribut „value“ hinzufügen.
<input type=“text“ name=“Anschrift“ id=“Anschrift“ value=“Ihr Anschrift“/>
Durch den „label“-Tag, wird ein logischer Bezug zwischen Formular und Beschriftungsfeld hergestellt. Er verändert allerdings nicht den Text.
<label for=“Anschrift“>Ihre Anschrift</label>
<input type=“text“ name=“Anschrift“ id=“Anschrift“ />
Auswahllisten werden mit dem „select“-Tag definiert. Die Anzahl der angezeigten Einträge wird mit dem Attribut „size“ festgelegt. Der Wert „1“ definiert dabei ein Dropdown-Menü. Alle Werte >“1″ erzeugen eine Selectbox mit Scrollbalken. Zwischen dem öffnenden und dem schlißenden Tag werden die einzelnen Einträge mit dem „option“-Tag-Paar platziert:
<select name=“Lieblingsfarbe“ id=“Lieblingsfarbe“ size=“1″>
<option>Rot</option>
<option>Blau</option>
<option>Gelb</option>
</select>
Mehrfachauswahlen sind ab einer „size“-Größe von „2“ möglich. Die Mehrfachauswahl wird durch das „select“-Attribut multiple=“multiple“ definiert. Checkboxen oder auch Ankreuzfelder gennant, werden wie folgt definiert:
<input type=“checkbox“ name=“box1″ id=“box“1″ value=“lesen“ />Lesen<br />
Über die „name“ Attribute-Box definiert man die ankreutzbaren Kästchen. Radiobuttons erlauben die Auswahl einer alternative. Alle Tags die zu einer Gruppe gehören, müssen den selben Namen tragen:
<input type=“radio“ name=“anreise“ value=“Auto“ />
<label for=“anreise“>mit dem Auto</label><br />
<input type=“radio“ name=“anreise“ value=“Zug“ />
<label for=“anreise“>mit dem Zug</label><br />
Um einen Dateiupload zu definieren brauchen wir folgende Befehle:
– Das Attribut type=“file“ erzeugt einen Durchsuchen-Button, mit dem Dateien hochgeladen werden können.
<input type=“file“ name=“datei“ id=“datei“ />
– Datentypen können mit „accept“ eingeschränkt werden:
<input type=“file“ name=“datei“ id=“datei“ accept=“image/gif“ />
– Der einleitende form-Tag muss zusätzlich die Codierungsmethode enthalten:
<form action=“#“ enctype=“multipart/form-data“>
– Möchten wir einen normalen Button erstellen machen wir das wie folgt:
<input type=“button“ name=“knopf“ value=“Eingabe“ />
– Einen Resetbutton zum zurücksetzen von Formulare erzeugen wir mit:
<input type=“reset“ name=“weg“ value=“Löschen“ />
– Einen „Submit“ oder „Senden“-Button dann natürlich mit:
<input type=“submit“ name=“senden“ value=“Und weg!“ />
– Es kann auch eine Grafik verwendet werden:
<input type=“submit“ name=“senden“ src=“absenden.gif“ />
Alle Teile des Workshops jetzt kostenlos abrufen:
- Grundstruktur einer HTML-Datei
- Tabellen und Listen
- Textformatierung
- Links, Videos & Bilder
- Formulare
- Die erste CSS-Datei
Artikelbild: Sebastian Fuss / pixelio.de
