Formulare in HTML Teil 1
Formulare in HTML Teil 1:
Ein einfaches Texteingabefeld
Beschriftung eines Texteingabefeldes
Größe eines Texteingabefeldes
Maximale Zeichenanzahl eines Texteingabefeldes
Standardwert eines Texteingabefeldes vorlegen
Namen eines Eingabefeldes festlegen
Eingaben unkenntlich machen – Passwortfeld
großes Eingabefeld – textarea
Feld nur lesen nicht schreiben – readonly
Checkboxen – Auswahlboxen ankreuzen lassen
Checkboxen vorselektieren
Radio Buttons – Nur eine Auswahl möglich
Manchmal ist es zwingend notwendig mit seinen Besuchern Rücksprache zu halten. Sei es, um dem Besucher die Möglichkeit zu geben, über ein Kontaktformular eine Email versenden zu können, ein Bestellformular oder eine Online Abstimmung. Die Rücksprache mit den Besuchern ist immens wichtig und fördert die Kundenbindung.
Leider ist HTML prinzipiell nur dafür gedacht Formulare zu erstellen. Die Auswertung von Formularen ist mit HTML nicht möglich. Um ein Formular auszuwerten bedarf es einer weiteren Skriptsprache. In der Regel wird dafür PHP eingesetzt. PHP-Tutorials werden in Zukunft noch folgen.
Beginnen wir nun mit der Erstellung eines Formulares:
Ein Formular wird mit form-Tags erstellt.
Beispielcode HTML:
<pre><html>
<body>
<form>
</form>
</body>
</html></pre>
Innerhalb dieser form Tags wird die einzelnen Eingabefelder aufgeführt:
Für das Erstellen eines Eingabefeldes benötigen wir das input-Tag.
Eingabefelder können normale Texteingabefelder, Radio-Buttons, Checkboxen, Buttons, stille Eingabefelder sein. Ich werde Ihnen jedes einzelne genaustens erklären.
Beginnen wir mit einem einfachen Texteingabefeld:
Beispielcode HTML:
<pre><html>
<body>
<form>
<input type="text">
</form>
</body>
</html></pre>
So sieht es aus:
Nun haben wir ein Texteingabefeld… allerdings noch ohne Beschriftung. Die Beschriftung fügen wir nun einfach per Hand mit hinzu:
Beispielcode HTML:
<pre><html>
<body>
<form>
Name: <input type="text">
</form>
</body>
</html></pre>
So sieht es aus:
Welche Einstellungsmöglichkeiten haben wir nun bei diesem Feld?
Wir können beispielsweise die Feldgröße mit size einstellen.
Beispielcode HTML:
<pre><html>
<body>
<form>
Name: <input type="text" size="50">
</form>
</body>
</html></pre>
So sieht es aus:
Zu der Größeneinstellung des Feldes kann man auch die Anzahl der einzugebenden Stellen mit maxlength begrenzen:
Beispielcode HTML:
<pre><html>
<body>
<form>
Name: <input type="text" size="50" maxlenght="20">
</form>
</body>
</html></pre>
So sieht es aus:
Versuchen Sie mal mehr als 20 Zeichen in das Feld einzugeben.
Man kann auch einen Wert mit value für das Feld vorgeben:
Beispielcode HTML:
<pre><html>
<body>
<form>
Name: <input type="text" size="50" maxlength="20" value="Manuela">
</form>
</body>
</html></pre>
So sieht es aus:
Ganz wichtig ist es den Feldern auch Namen zu geben. Diese Namen sind sozusagen die Namen der Variablen, die dann später weiterverarbeitet werden können.
Beispielcode HTML:
<pre><html>
<body>
<form>
Name: <input type="text" size="50" maxlength="20" name="vorname">
</form>
</body>
</html></pre>
Widmen wir uns nun dem nächsten Texteingabefeld. Selbstverständlich kann es wichtig sein, eine Eingabe unlesbar zu machen, in dem man die eingegebenen Zeichen mit Sternchen ersetzt. Diese Eingaben sind typisch für Passworteingaben. Deshalb heißt das Texteingabefeld auch: type=“password“
Beispielcode HTML:
<pre><html>
<body>
<form>
Name: <input type="password" size="25" maxlength="25" name="passwort">
</form>
</body>
</html></pre>
So sieht es aus:
Wenn Sie in dieses Feld etwas eingeben, werden Sie sehen, daß nur Sternchen ausgegeben werden.
Ein weiteres Texteingabefeld ist die textarea. Textareas werden bei Kontaktformularen, Gästebüchern oder Foren eingesetzt. Generell, wenn ein langer Text eingegeben werden soll, verwendet man textareas.
Stellen Sie sich mal vor, Sie müssten einen Gästebucheintag in nur einer Zeile schreiben.
Bei textareas kann man die Anzahl der Zeilen und die maximale Anzahl der Buchstaben innerhalb einer Zeile festlegen. Mit rows stellt man die Anzahl der Zeilen ein und mit cols die maximale Anzahl der Buchstaben in einer Zeile.
Achtung die Textarea hat kein input Element. Es gibt ein öffnendes und ein schließendes textarea-Feld.
Beispielcode HTML:
<pre><html>
<body>
<form>
Gästebucheintrag: <br> <textarea rows="10" cols="25" name="eintrag"></textarea>
</form>
</body>
</html></pre>
So sieht es aus:
Wenn Sie ein Eingabefeld rein auf die Anzeige beschränken möchten, ohne, daß der Besucher etwas am Inhalt ändern kann, dann können Sie readonly verwenden.
Beispielcode HTML:
<pre><html>
<body>
<form>
Betrag: <input type="text" size="6" maxlength="6" name="betrag" readonly value="19,99 €">
</form>
</body>
</html></pre>
So sieht es aus:
Nun möchte ich Ihnen Checkboxen zeigen. Um eine Checkbox in ein Formular einfügen zu können benötigen wir ein input-Tag mit einem checkbox-Typen:
Beispielcode HTML:
<pre><html>
<body>
<form>
Wählen Sie aus welche Internet-Sprachen Sie interessieren:<br>
<input type="checkbox" name="Sprache" value="HTML">HTML<br>
<input type="checkbox" name="Sprache" value="XHTML">XHTML<br>
<input type="checkbox" name="Sprache" value="HTML 5">HTML 5<br>
<input type="checkbox" name="Sprache" value="CSS">CSS<br>
<input type="checkbox" name="Sprache" value="CSS 3">CSS 3<br>
<input type="checkbox" name="Sprache" value="Javascript">Javascript<br>
<input type="checkbox" name="Sprache" value="PHP">PHP<br>
</form>
</body>
</html></pre>
So sieht es aus:
Sie können zwar unterschiedliche Namen für Ihre Checkboxen wählen, aber ich kann Ihnen nur raten, zugehörige Checkboxen mit dem gleichen Namen zu benennen. Als Variable wird dann ein Array übergeben, das mit PHP wunderbar ausgelesen werden kann.
Wenn Sie eine oder mehrere Checkboxen vorselektieren möchten können Sie das in HTML folgendermaßen machen:
Beispielcode HTML:
<pre><html>
<body>
<form>
Wählen Sie aus welche Internet-Sprachen Sie interessieren:<br>
<input type="checkbox" name="Sprache" value="HTML">HTML<br>
<input type="checkbox" name="Sprache" value="XHTML" checked>XHTML<br>
<input type="checkbox" name="Sprache" value="HTML 5">HTML 5<br>
<input type="checkbox" name="Sprache" value="CSS">CSS<br>
<input type="checkbox" name="Sprache" value="CSS 3" checked>CSS 3<br>
<input type="checkbox" name="Sprache" value="Javascript">Javascript<br>
<input type="checkbox" name="Sprache" value="PHP">PHP<br>
</form>
</body>
</html></pre>
So sieht es aus:
Für XHTML müssten Sie checked=“checked“ eingeben.
Ähnlich wie die Checkbox funktioniert das radio-Button. Der entscheidende Unterschied ist hier allerdings, daß bei einem radio-Button nur eine einzige Auswahl getroffen werden kann.
Beispielcode HTML:
<pre><html>
<body>
<form>
Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:<br>
<input type="radio" name="Sprache" value="HTML">HTML<br>
<input type="radio" name="Sprache" value="XHTML">XHTML<br>
<input type="radio" name="Sprache" value="HTML 5">HTML 5<br>
<input type="radio" name="Sprache" value="CSS">CSS<br>
<input type="radio" name="Sprache" value="CSS 3">CSS 3<br>
<input type="radio" name="Sprache" value="Javascript">Javascript<br>
<input type="radio" name="Sprache" value="PHP">PHP<br>
</form>
</body>
</html></pre>
So sieht es aus:
Im nächsten Tutorial werde ich Ihnen folgendes präsentieren:
eine einfache Auswahlliste
eine längere Auswahlliste mit size
Mehrfachselektion bei einer Auswahlliste
Vorselektierung in einer Auswahlliste
verschachtelte Auswahllisten
versteckte Formularfelder mit hidden
Senden Button und Reset Button im Formular
Festlegen an welches Dokument die Daten gesendet werden:
Methode des Versendens (post oder get):
Zielfenster auswählen mit target
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
