HTML Tutorial - Formulare

Mit HTML haben Sie die Möglichkeit, verschiedene GUI-Elemente in Formularen zu verwenden, von einzeiligen Textfeldern bis zu großen Dropdown-Listen.

<title>Mustermanns Blumenladen</title>

<!--

body { background-color:#33EE00; color:#002000; font-family:Times; }

form { text-align:center; }

.zentriert { text-align:center; }

-->

</style>
</head>

<body>

<h1 class="zentriert">Mustermanns Blumenladen - Kontakt</h1>

<form action="mailto:info@mustermann-blumen.de?subject=Hallo" method="post"

enctype="text/plain">

<p>

<br/>

<br/>

</textarea>

</p>

<div>

<input type="radio" name="strauss" value="1"/> Strauß 1

</div>

<div>

Strauß 2

</div>

<p>

Schleifenfarbe:

</select>

</p>

<p>

</p>

</form>
</body>
</html>

Das obige Beispiel beginnt mit einem einzeiligen Textfeld, gefolgt von einem mehrzeiligen Textbereich, zwei gruppierten Radiobuttons, einer Auswahlliste und zum Schluss den Buttons zum Abschicken und Löschen.

form:
Jedes Formular wird mit dem <form>-Tag eingeleitet. Das Tag wird mit folgenden Attributen gesetzt: action, method und enctype.

action="mailto:E-Mail-Adresse":
Beschreibt die Aktion. Hier das versenden des Formulares per mailto. Mit dem Zusatz ?subject=Thema wird die Betreffzeile der erstellten E-mail bestimmt. Die Formulardaten können auch an Scripts oder Programme (CGI, PHP, JSP=Java Server Pages) übergeben werden, welche die Daten weiterverarbeiten.

method="post":
gibt an, wie das Formular verschickt werden soll. Bei Versenden über das mailto-Tag sollte man immer post wählen. Beim Versenden an CGU/PHP/JSP-Scripts kann man auch get wählen. Die gesamten Daten erscheinen dann mit Fragezeichen angehängt an den URL (die Webadresse).
Es werden (sowohl mit get als auch mit post nur diejenigen Input-Felder als Daten übermittelt, die auch einen Namen erhalten haben.

input type="text" name="name" size="20":
Ein einziliges Textfeld mit dem Namen name und der angezeigten Länge 20.

textarea type="text" name="txt" rows="6" cols="40":
Ein mehrzeiliges Textfeld mit 6 Reihen, 40 Spalten und der Bezeichnung txt. In unserem Beispiel wird noch wrap=physical gesetzt. Dadurch wird der automatische Zeilenumbruch im Textfeld erzwungen. Wichtig: Das textarea-Tag muss immer geschlossen werden!

input type="radio" name="strauss" value="1":
Setzt einen Radiobutton mit dem Namen strauss und der Variable 1. Ist dieser Radiobutton ausgewählt, wird beim Verschicken (mit action...) dieser Datensatz übertragen: 'strauss=1'. In dem Beispiel haben beide Radiobuttons die gleiche Bezeichnung 'strauss', dadurch sind Sie zu einer Gruppe zusammengefasst. Das bedeutet, dass nur einer ausgweählt werden kann.

select und option:
Mit diesen Tags können Sie Auswahllisten erstellen. In dem Beispiel wird eine Auswahlliste mit 3 Optionen angezeigt. Mit size steuern Sie die Höhe der Auswahlliste. Die Liste zeigt also nur die erste Option an. Durch Anklicken der Liste öffnet sie sich.

submit und reset:
Hiermit werden 2 Buttons dargestellt. submit sendet die Daten ab und reset setzt die Werte des Formulars auf die Standardwerte ("default") zurück.

Es gibt die Möglichkeit, mit Formularen Dateien des lokalen Clientrechners zum Webserver hochzuladen (upload). Ferner kann man Daten mit versteckten Variablen (hidden variables) verschicken.

<title>Mustermanns Blumenladen</title>
</head>

<body>

Bitte schicken Sie uns Ihr schönstes Blumenbild!

<form action="http://www.mustermann-blumen.de/upload.php" method="post"

enctype="multipart/form-data">

<br/>

</form>
</body>
</html>