Materialien zum Unterricht

Formulare

Ein wichtiges Element in HTML-Seiten sind Formulare. Sie dienen der Eingabe von Informationen. Was mit diesen Informationen dann weiter geschieht, hängt vom Formular ab. Man kann z.B.

Es soll eine neue Seite erstellt werden, in der in einem Formular ein Text eingetragen wird. Dieser Text soll per e-mail an Deine e-mail-Adresse verschickt werden. Die neue Seite wird über einen Link im Fuß-Bereich mit jeder Seite verbunden.

  1. Erstelle eine neue Seite post.htm mit dem Titel "Post". Im Bereich Inhalt wird eine Überschrift "Post an den Webmaster" eingefügt.
  2. Verlinke diese neue Seite mit der Startseite. Der Link heißt "Kontakt".
  3. Füge ein Formulargrundgerüst ein.
  4. Füge bei action= ein: "http://physikaufgaben.de/schule/html/post.php" Damit wird ein PHP-Programm aufgerufen, dass Deine Post weiterleitet. Der in HTML-Beschreibungen verwendete Befehl mailto funktioniert normaler Weise nicht! (Link zum PHP-Script)
  5. Füge bei method= ein: "get"
  6. Füge in das Formulargrundgerüst, also vor dem abschließenden Tag </form>, ein einzeiliges Eingabefeld ein.
  7. Ergänze die notwendigen Eigenschaften: name="absender", size="30", maxlength="30".
  8. Schreibe über dieses Element einen Text, so dass der Nutzer weiß, was was er dort hineinschreiben soll.
  9. Füge ein mehrzeiliges Textfeld ein (textarea). Es soll text heißen sowie 50 Spalten und 10 Zeilen haben. Gib über diesem Feld auf der Post-Seite auch eine Beschreibung an.
  10. Jetzt brauchen wir noch einen Button, mit dem alles abgeschickt wird. Das ist der Submit-Button. Füge eventuell noch einen Reset-Button ein.
  11. Teste Dein Formular. Fülle die Felder aus und schicke es ab. Wenig später bekommst Du Post.
  12. Das Formular sieht noch recht unordentlich aus. Es sollen jetzt die Eingabefelder am linken Rand bündig angeordnet werden.
    Dazu ist der Text über den Eingabefeldern in den Tag <label> einzubetten. In der style.css kann dieser Tag dann mit einer festen Breite und einem float. Weiterhin lassen sich Hintergrundfarben und Randabstände für alle beteiligten Tags verändern.
  13. Innerhalb eines Formulares können Gruppen von Elementen optisch zusammengefasst werden. Dazu verwendet man den Tag <fieldset>. Mit dem Tag <legend> kann für das Formular eine Überschrift eingetragen werden.
    Die beiden Tags lassen sich in der style.css ebenfalls formatieren.

zurück