|
|
|
|
 Wegweiser:
Startseite >>
Übersicht HTML-Kurs
>>
Kapitel 8: Formulare
| HTML Kurs - Kapitel 8: Formulare |
Wenn Sie bei der erstellung Ihrer Homepage interaktion mit dem User erreichen wollen, dann kommen Sie über den Einsatz von
Formularen nicht hinweg. Formulare werden in erster Linie dazu benötigt, um Datenbank abfragen zu starten und E-Mails zu versenden.
Ein Formular, kann an jeder beliebigen Stelle innerhalb des <body>-Tags stehen. Die Definition
jedes Formulars beginnt mit <form>. Alle Angaben, die bis zu dem Abschluss-Tag </form> getätigt werden, gehören zu diesem Formular.
Das Grundgerüst eines Formulars sieht demnach folgendermaßen aus.
Beispiel:
<form action="..." method="...">
<! Hier folgen die Elemente des Formulars>
<form>
|
Durch das Attribut action= geben Sie die Verwendung der Formulardaten an.
Die am Häufigsten eingesetzte ist das senden der Daten an eine E-Mail-Adresse. Die Syntax hierfür lautet: action="mailto:irgendwer@irgendwo.de".
Die zweite Variante action="cgi-bin/abfrage.php" ruft ein z.B. PHP-Script auf, das Die Verarbeitung der Daten übernimmt.
Das Attribut method= gibt die Übertragungsmethode an. Hierbei wird auch zwischen zwei Varianten unterschieden. Möchten Sie Daten
per E-Mail übermittlen, so empfield sich die method=post. Werden hingegen Daten zu einem Server transveriert, so
ist die method=get vorzuziehen.
Hierbei wird zwischen einzeiligen und mehrzeiligen Textfeldern unterschieden. Die Syntex wie man einzeilige Textfelder einbaut,
sieht folgender massen aus: <input type="text" name="Name1" size="25" maxlength="40">. Wobei die Attribute size= und
maxlength= die Größe des Textfeldes bzw. die maximale Anzahl der einzugebenen Zeichen festlegen. Diese eignen sich sehr gut als Eingabefelder
für kurze Inhalte z.B. Name oder E-Mail. Die Syntax bei mehrzeiligen Textfeldern sieht so aus <textarea name="Name1" rows="5" cols="25"></textarea>.
Durch rows= wird die Anzahl derZeilen festelegt. In unserem Beispiel stehen daher 5 Zeilen zur verfügung. Die Angabe cols= hingegen bestimmtdie
Anzahl der Zeichen pro Zeile.
Beispiel:
<form action="..." method="...">
Name:<br>
<input type="text" name="Name1" size="25" maxlength="40">
<br>
Kommentar:<br>
<textarea name="Name1" rows="5" cols="25">
</textarea>
<form>
|
<< So sieht`s aus >>
Sie können seit HTML 3.2 auch Auswahlfelder in ihre Formulare integrieren. Der User hat dan die Möglichkeit,
einen der vorbelegten Punkte auszuwählen.Durch <select> wird ein Auswahlfeld eingeleitet. Einzelne Einträge müssen dann
durch die Tags <option>Wert1</option> eingeschlossen werden.
Beispiel:
<form action="..." method="...">
Bundesland:<br>
<select name="bundesland" Size="1">
<option>Bayern</option>
<option>Bremen</option>
<option>Sachsen</option>
</select>
<form>
|
<< So sieht`s aus >>
Optionsfelder nennt man eine Gruppe mehrerer anwählbarer Punkte, aus der einer makiert werden kann. Es ist zwar möglich,
nur ein einziges Optionsfeld einzusetzen, doch nur das Festlegen einer Gruppe von Feldern ist sinnvoll. Wenn eines der Optionsfelder
automatisch ausgewählt werden soll, so muss dar Befehl checked in den <input>-Tag geschrieben werden.
Beispiel:
<form action="..." method="...">
Bewertung:<br>
<input type="radio" name="note" value="spitze">spitze
<input type="radio" name="note" value="durchschnitt" checked>durchschnitt
<input type="radio" name="note" value="schlecht">schlecht
<form>
|
<< So sieht`s aus >>
Checkboxen sind ebenfalls eine Gruppe von Optionen, aus der im Unterschied zu Optionsfeldern nun mehrere ausgewählt werden können.
Die Vorbelegung funktioniert ebenso wie bei den Optionsfeldern durch den Befehl checked.
Beispiel:
<form action="..." method="...">
Welche Programmiersprache beherschen Sie?<br>
<input type="checkbox" name="note" value="PHP"checked >PHP
<input type="checkbox" name="note" value="Java" >Java
<input type="checkbox" name="note" value="C++">C++
<form>
|
<< So sieht`s aus >>
Hierbei handelt es sich um die wichtigsten Elemente in einem Formular. Sie bieten die Möglichkeit die Formularinhalte
entweder zu senden oder zu löschen. Diese Schaltflächen müssne nicht selbst definiert werden, sonder werden in dieser Form
von HTML bereitgestellt. Die Syntax für einen "Abschicken"-Button sieht wie folgt aus: <input type=submit"
value="Abschicken name="Button1"/>. Durch type="submit" wird die Schaltfläche zum Absenden des Formulars definiert.
Über value= geben Sie die Beschriftung der Schaltfläche an. Um einen "Löschen"-Button zu erstellen, müssen Sie
lediglich den type= auf "reset" setzen.
Beispiel:
<form action="..." method="...">
<input type="submit" name="Button1" value="Abschicken">
<input type="reset" name="Button2" value="Löschen">
<form>
|
<< So sieht`s aus >>
|
|
|
