|
Formulare werden überwiegend für das Zusammenspiel
mit CGI verwendet, man kann aber auch Navigationen oder Emailanfragen
damit formulieren.
| <form></form> |
Definiert Formular |
| <input> |
Definition von Formularelement |
| <textarea></textarea> |
mehrzeiliges Eingabefeld |
| <select> </select> |
Anfang und Ende einer Auswahlliste |
| <option> |
Durch <select> auswählbare
Elemente |
| ...method="post"... |
Daten versenden |
| ...method="get"... |
Daten holen |
| ...action=" ... "> |
Standort der Daten, z.B. eine URL |
| |
|
Kommen wir gleich zur ersten Übung, es soll ein Auswahlfeld
erstellt werden. Mit <select> teile ich dem Browser
mit das es hier beginnt und zwischen den <option> Tags
definiert man dann die einzelnen Punkte.
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<form name="form1" method="post" action="">
<select name="select">
<option>Kirschen</option>
<option>Bananen</option>
<option>Birnen</option>
<option>Pflaumen</option>
</select>
</form>
</body>
</html>
|
Hier das Beispiel...
So, dass war natürlich nicht besonders aufregend. Deshalb
geht es gleich mit der nächsten Übung weiter. Damit
wir aber ein wenig Action in das Formular bringen, wurde ein
wenig Javascript mit herein geschummelt. Aber ihr könnt
es später vielleicht mal für eine Navigation gebrauchen.
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<form name="form2" method="post">
<select name="auswahl">
<option value="bild.htm">1-Bild</option>
<option value="test.htm">2-Test</option>
<option value="oben.htm">3-Oben</option>
<option value="unten.htm">4-Unten</option>
</select>
<input type=button onClick= "location = ''+ document.form2.auswahl.options
[document.form2.auswahl.selectedIndex].value;"
value="Gehe zu dieser Webseite">
</form>
</body>
</html>
|
Hier das Beispiel...
Zum Abschluss noch ein Formular mit diversen Möglichkeiten,
probiert einfach mal was aus.
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<form action="http://www.prz.tu-berlin.de/~filou/cgi-bin/post-query.cgi" method="post">
<p>Mein Name:
<input type="text" name="Name"></p>
<p>Ich wähle das Passwort:
<input type="password" NAME="Kennung"></p>
<p><input type="radio" NAME="button" value="weiter" checked>
Ich werde weiter mit diesen Seiten arbeiten</p>
<p><input type="radio" name="button" value="aufhoeren">
Ich habe die Nase voll.</p>
<P><input type="checkbox" name="e-mail">
Ich möchte per E-Mail über neue Seiten informiert werden.</p>
<P>Ich arbeite mit dem Betriebssystem
<select name="Betriebssystem">
<option>Windows 98 </option>
<option selected>Windows XP </option>
<option>Windows 2000 </option>
<option>Windows ME</option>
<option>Windows NT</option>
</select></p>
<p>Ich habe noch ein paar Anmerkungen zu deinen Seiten<br>
<textarea name="Anmerkungen" rows="2" cols="50"></textarea></p>
<P><input type="submit" value="Eingaben abschicken">
<input type="reset" value="Eingaben löschen"></p>
</form>
</body>
</html>
|
Hier das Beispiel...
|
