[Download des Kurses zum Offline-Betrieb]
c;-) webmichis HTML-Kurs

Formulare in einer HTML-Datei (Grundwissen)

Ein Formular dient der Dateneingabe und der Kommunikation zwischen Nutzer und Computer (z. B. bei der Suche in Suchmaschinen). Die Daten des ausgefüllten Formulars können per E-Mail versandt werden, von einem CGI-Programm auf dem Server-Rechner weiterverarbeitet oder von einem Javascript-Programm im Browser verarbeitet werden.
Sie sind also ein Baustein, um HTML-Seiten interaktiv zu gestalten.
Formulare können an beliebiger Stelle innerhalb des <body>-Bereichs definiert werden.

Aufbau eines Formulars

<form name=[formularname] action=[url] 
method=[methode]>
leitet ein Formular ein (form = Formular). [formularname] legt einen Bezeichnernamen für das Formular fest (keine Leerzeichen oder Umlaute verwenden!). Das action-Attribut legt fest, was mit den Formulardaten passieren soll:
[url] = "mailto:webmaster@kopfware.de" bedeutet, dass die Formulardaten an die angegebene E-mail-Adresse geschickt werden.
[url] = "http://www.kopfware.de/cgi-bin/auswertung.pl" bedeutet, dass die Formulardaten zur weiteren Verarbeitung an ein Programm auf dem Server-Rechner (hier ein CGI-Programm) geschickt werden. Bei der Adressierung gelten die gleichen Regeln wie bei Links.
Übertragungsmethode:
[methode] = "get" oder [methode] = "post". 
... Elemente des Formulars wie Eingabe-
felder, Auswahllisten, Buttons usw. ...
siehe unten 
</form>
beendet das Formular.
Anmerkung:
  • Zwischen dem einleitenden Formulartag und dem abschließenden Formulartag stehen hauptsächlich Eingabefelder, Auswahllisten oder Buttons. Es kann dort natürlich auch Text eingegeben und dieser mit den entsprechenden HTML-Befehlen formatiert werden. Sogar Grafiken, Verweise und Tabellen sind mitten im Formular erlaubt.
  • Benutze immer method=post, wenn du dir Formulardaten per E-Mail zuschicken lassen willst. Außerdem solltest du bei E-Mail-Empfang von Formulardaten immer das Attribut enctype="text/plain" im form-Anfangs-Tag setzen.
  • Formulare werden in diesem Kurs z. B. im Abschnitt "Farben in HTML" verwendet.
[zurück]   [zum Inhalt]

 

Elemente eines Formulars

oder 
<input name=[feldname] size=[anzahl]>
(input = Eingabe); [feldname] legt einen Bezeichnernamen für das Eingabefeld fest (keine Leerzeichen oder Umlaute verwenden!); [anzahl] Anzeigelänge in Zeichen (z. B. 30); 
<input name=[feldname] size=[anzahl] 
value="  Einzeiliges Eingabefeld  ">
 Wie oben, aber das Eingabefeld enthält nun schon einen Text (siehe Überschrift). 
<input type=password name=[feldname]
 size=[anzahl]>
Die Eingabe erfolgt verdeckt (für jedes eingegebene Zeichen wird ein * angezeigt). Die Übertragung über das Internet erfolgt allerdings im Klartext. 
<input name=[feldname] size=[anzahl] 
 value="  Einzeiliges Eingabefeld  "
 readonly>
Text im "Eingabefeld" kann nicht verändert werden, es handelt sich also eigentlich um ein "Ausgabefeld" (readonly=nur lesen) (siehe Überschrift).
Anmerkung:
Das Attribut type kann noch weitere Werte annehmen.
  • type=int Nur die Eingabe von Ganzzahlen ist erlaubt.
  • type=float Nur die Eingabe von Dezimalzahlen ist erlaubt.
  • type=date Nur Datumseingaben sind erlaubt.
  • type=url Eingabe einer Internetadresse ist möglich.
[zurück]   [zum Inhalt]

 

<textarea name=[feldname] rows=[az] cols=[as]>
Dieser Tag (textarea = Textbereich) leitet ein mehrzeiliges Eingabefeld ein.
[feldname] legt einen Bezeichnernamen für das Eingabefeld fest (keine Leerzeichen oder Umlaute verwenden!);
[az] gibt die Anzahl der gezeigten Zeilen an (z. B. 10);
[as] gibt die Anzahl der Spalten (Zeichen pro Zeile) an; 
Text
 Text, der im Eingabefeld angezeigt wird. Dieser Text kann auch entfallen, dann ist das Eingabefeld zunächst leer. 
</textarea>
Dieser Tag schließt den Bereich des mehrzeiligen Eingabefeldes.
Anmerkung:
  • Der Inhalt des Eingabefeldes kann entsprechend durch Angabe von readonly im <textarea ...>-Tag auf nur lesen gesetzt werden (dadurch ist dann wieder die Eingabe gesperrt).
  • Ein Beispiel für ein mehrzeiliges Eingabefeld findest du in diesem Kurs bei "Text auf einer Web-Seite HTML-Code".

[zum Inhalt]

 



Es wird eine Liste mit festen Einträgen angeboten, aus der man einen Eintrag auswählen kann. Beim Ausführen des Formulars wird der Text des ausgewählten Eintrags übertragen. Die Einträge der Auswahlliste kannst du anklicken (probier's). 
<select name=[listenname] size=[zeilen]>
Dieser Tag (select = auswählen) leitet eine Auswahlliste ein.
[listenname] legt einen Bezeichnernamen für die Auswahlliste fest (keine Leerzeichen oder Umlaute verwenden!);
[zeilen] gibt die Anzahl der gezeigten Zeilen an (z. B. 3); 
<option> Text 1
<option> Text 2
...
<option> Text ..
Text 1, Text 2, ... ist jeweils ein Listeneintrag (Anzahl beliebig).
Abschluss-Tag </option> ist erlaubt, aber nicht erforderlich. 
</select>
Dieser Tag schließt die Auswahlliste.
Anmerkung:

 

Weitere Eingabeelemente
[zum Inhalt]

 

Standard-Buttons zum oder eines Formulars

Durch Anklicken des Absende(Submit)-Buttons schickt der Anwender das ausgefüllte Formular ab und zwar so, wie es im einleitenden <form>-Tag durch action=... festgelegt wurde. Durch Anklicken des Abbrechen(Reset)-Button werden alle Eingaben gelöscht und das Formular wird nicht abgeschickt. 

<input type=submit value=[knopf]>
(submit = bestätigen); [knopf] legt eine Aufschrift für den Submit-Button fest (Text in Anführungszeichen). 
<input type=reset value=[knopf]>
 (reset = zurücksetzen); [knopf] legt eine Aufschrift für den Reset-Button fest (Text in Anführungszeichen).
Anmerkung:
Ein Beispiel für den Einsatz dieser Buttons findest du im Übungseditor.

 

Erzeugen eines Formulars mit dem Übungseditor

Der Übungseditor enthält übrigens auch ein großes mehrzeiliges Eingabefeld.
Zur Übung solltest du nun die verschiedenen Möglichkeiten der Gestaltung eine Formulars im Übungseditor selbst ausprobieren.
Sei kreativ und ..., na du weißt schon! (nein?)

  c;-) webmichis HTML-Kurs  [zum Inhalt]

Letzte Änderung: