Html Tags - form - Formulare in einer Webseite

Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap
<<< 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 >>>

Html-Tags - Formulare in Webseiten

Foumulare werden auf Webseiten sehr häufig verwendet. Die unterschiedlichsten Anwendungen lassen sich dadurch realisieren.

Über ein Formular geben Sie beispielsweise Ihren Besuchern die Möglichkeit mit Ihnen in Kontakt zu treten. Durch definierte Felder kann der Besucher angeben, worüber er Informationen von Ihnen benötigt. Durch das Ausfüllen von Pflichtfeldern stellen Sie sicher, dass Sie die nötigen Daten des Besuchers haben um Ihm die Informationen zukommen zu lassen.

Sie können aber auch Umfragen über Formulare realisieren. Firmen nutzen diese Technik häufig um Informationen darüber zu erhalten, wie ihr Webangebot beim Besucher ankommmt. Nach der Auswertung dieser Informationen lassen sich Konzepte zur Verbesserung des Internetauftrittes entwickeln.

Html-Befehl Bedeutung

<form name="Adressen"  
action="mailto:name@domain.de">

	Vorname: <input type="text" size="20" name="v-name" value="Vornamen eintragen"> <br>

	Nachname: <input type="text" size="30" name="nachname"> <br>

	Telefon: <input type="text" size="20" name="fon"> <br>

	</form>

Einzeilige Textfelder input type - ohne Endtag in html
size - für den User sichtbare Breite der Eingabefelder in Punkten

<form action="mailto:name@domain.de" method="post" enctype="text/plain"> <br>

	<p> Textfeld: <input type="text" size="72" name="textfeld" value="Vor dem Senden besser ein javascript zur Prüfung der Gültigkeit vorschalten"> </p>

	<input type="submit" name="weg" value="abschicken">

	</form>

<form action="mailto:name@domain.de"> <textarea name="grosses Textfeld" cols="40" rows="15"> Geben Sie ihre Bemerkungen hier ein </textarea> <br>
	
	<input type="submit" value="Absenden">
	<input type="reset" name="löschen" value="löschen"> </form>
<br>

Textfeld für längere Bemerkungen:
Die Breite und Höhe des Textfeldes muß in cols (Spalten) und rows (Zeilen) angegeben werden. Geben Sie das Textfeld nicht zu klein an, wenn zu erwarten ist, dass viel Text eingetragen werden muß. Nichts ist nerviger beim Korrekturlesen als zu kleine Textfelder in denen ewig gescrollt werden muß.
bricht im Netscape den Text nicht um

<table border="2" cellpadding="15">

	<tr>

 	 <td valign="top"> Auswahlliste mit vorausgewähltem Menüpunkt
	 </td>

 	 <td>

	 <select name="list" size="3">

 	 <option value="1" SELECTED> Gemüse </option>

	 <option value="2"> Bokkoli </option>

	 <option value="3"> Blumenkohl </option>

	 <option value="4"> Kartoffeln </option>

	 <option value="5"> Paprika </option>

	 </select>

	 </td>

 	 <td valign="top">

	 <select name="list2" size="1">

 	 <option value="1"> Getränke </option>

	 <option value="2"> --------------- </option>

	 <option value="3"> Wein </option>

	 <option value="4"> Bier </option>

	 <option value="5"> Saft </option>

	 <option value="6"> Sekt </option>

	 </select>

	 </td>

	</tr>

	</table>

Auswahlliste mit vorausgewähltem Menüpunkt Mit size bestimmen Sie wieviele Auswahlpunkte sofort sichtbar sind. Mit selected treffen Sie eine Vorauswahl, die beim Öffnen der Webseite bereits farbig hinterlegt ist.
Scrollmenü drei Punkte sichtbar	Aufklappmenü ein Punkt sichtbar

<p> <input type="checkbox" name="vname" size="16" value="Vorname"> Sport </p>

	<p> <input type="checkbox" name="nname" size="16" value="Nachname"> Musik </p>

Checkboxen für eine Checkliste

Sport

Musik

Checkboxen erlauben die Auswahl mehrerer Punkte.

<p><input type="radio" name="radio" value="Hochformat" checked> Hochformat </p>

	<p><input type="radio" name="radio" value="Querformat"> Querformat </p>

das ist eine Auswahlliste

Hochformat

Querformat

Zusammengehörige Punkte müssen unbedingt den gleichen Namen erhalten. Mit checked legen Sie eine Vorauswahl auf einen Radiobutton. Radiobutton erlauben nur eine Auswahl.

Die obigen Beispiele können Sie durch css oder durch Verwendung einer Tabelle formatieren und so ein ansprechendes Layout erzeugen. Sie können Formulare auch mit grafischen Buttons gestalten.

<<< 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 >>>
Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap