4.8.2 Die Formularbox <form>

• 1 Allgemein
• 2 Das Element der Formularbox <form> </form>
  • a) Der Element-Code <form...>
  • b) Formular-Elemente zwischen <form...> und </form>
• 3 Form-Attribute <form action="..." method="...">
  • a) Form-Attribut Zielfenster action="..."
  • b) Form-Attribut Methode method="..."
• 4 Formatierung der Formulare mit Stylesheets
  • a) <form>
  • b) <form class="...">
• 5 Grundlagen-Websites & Workshops

Technik Formulare: Eingabefelder definieren Formulare: Stylesheet

Anwendung Kontaktformular: Erstellen Kontaktseite Formulare: Suchen-Formulare

-

⇧ 1 Allgemein

Prinzip

• Formularelemente müssen nur dann zwingend in einem form-Element stehen, wenn das Formular auch an einen Server gesendet werden soll.

Definitionen

• <form> ist der Formular Anfangs-Tag und steht ganz am Anfang des Formulars.
  Dieser Code erzeugt eine "Formularbox" (oder "Formular-Container").

• <form action="..." method="..."> sind die Attribute des Formulars.

• Zwischen <form> und </form> werden die Elemente des Formulars eingetragen.

• </form> ist der End-Tag des Formulars.
  Mit diesem Code wird das Formular abgeschlossen.

-

⇧ 2 Das Element der Formularbox <form> </form>

• a) Der Element-Code <form...>
• b) Formular-Elemente zwischen <form...> und </form>

-

↑ a) Der Element-Code <form...>

Code <form>...</form>

• Mit <form>... und </form> wird ein Formular definiert.

• Alles, was zwischen diesen beiden Tags steht, gehört zum Formular.

-

↑ b) Formular-Elemente zwischen <form...> und </form>

• Zwischen <form...> und </form> werden die Elemente des Formulars eingetragen.

• Formular-Elemente sind Eingabefelder, Druckknöpfe etc.

Beispiele

Formulare: Eingabefelder definieren

Formulare: Beschriftung mit Labels

Formulare: Radio Button

Formulare: Checkboxen

Formulare: Klick Buttons

-

⇧ 3 Form-Attribute <form action="..." method="...">

• a) Form-Attribut Zielfenster action="..."
• b) Form-Attribut Methode method="..."

-

↑ a) Form-Attribut Zielfenster action="..."

Prinzip

• action="..." Angabe der URL der Datei, in der die Eingaben verarbeitet werden.

  Die URL kann absolut http://www...
  oder relativ ../... sein.

  HTML: Externe Verweise (Links)

  HTML: Interne Verweise (Links)

• Anker #... oder Querystring ?...

  Mit einem dieser Zusätze zum Dateinamen kann nach dem Absenden eine bestimmte Stelle im Dokument angezeigt werden.

  HTML: Anker definieren und Verweise zu Ankern

Workshops

• SELFHTML-Wiki
  de HTML/Formulare/Form
  de Beispiel: CSS-Beispiel: Formular für Namenseingabe

-

↑ b) Form-Attribut Methode method="..."

Prinzip

• Mit diesem Attribut wird der Versandmodus angegeben.

• Dies legt fest, wie die Angaben an den Server bzw. die mit action="..." angegebene Datei übermittelt werden.

• Die gesendeten Daten können damit anschliessend verarbeitet werden. Es ist dann auch eine Weiterleitung per E-Mail möglich.

Arten der Weiterleitung

1. method="post" Die "Post"-Methode Übermittelt die Daten über den Header.

   Die Variablen können in diesem Fall auf der aufgerufenen Seite mit dem PHP Code $... = $_POST ['...']; eingelesen werden.

2. method="get" Die "GET"-Methode übermittelt die Daten über die URL.

   Die Variablen können auf der aufgerufenen Seite mit mit PHP Code $... = $_GET ['...'] eingelesen werden.

Bemerkungen

• Normalerweise verwendet man die "POST"-Methode, der Unterschied ist aber minim.

  In dieser Anleitung wird die "POST"-Methode verwendet,

Grundlagen und Workshops

• W3C Recommendation -
  HTML 4.01 Specification:
  Deutsche Übersetzung de Formularübertragung

• SELFHTML de Formulardaten übertragen mit GET oder POST
• SELFHTML de Datenstrom bei Übertragung von Formulardaten

-

⇧ 4 Formatierung der Formulare mit Stylesheets

• a) <form>
• b) <form class="...">

-

↑ a) <form>

• Die Formulare können mit einem Stylesheet formatiert werden.

• Quelltext: form (es ist kein weiterer Eintrag notwendig)
  

• Stylesheet: form {...} (siehe "Stylesheet")

Beispiel

1) Quelltext

<form action="..." method="post">
<div>"Formularbox" noch ohne Formularelemente</div>
</form>

2) Stylesheet

/* Blaues Formular für Beispiele, Kontakt und Gästebuch */
form {  
background:#9EC8F2;
color:#000000; 
border:thin solid #6666FF;
margin:0;
padding:0 1em 1em 1em;
}

3) Anzeige im Dokument

"Formularbox" noch ohne Formularelemente

Technik & Anwendung

Formulare: Stylesheet

Kontaktformular: Erstellen Kontaktseite

-

↑ b) <form class="...">

• Die Formulare können mit einem Stylesheet formatiert werden.

• Wenn verschiedene Formulare individuell formatiert werden sollen, kann die Stylesheet "Class"-Formatierung angewendet werden. Der Eintrag lautet dann wie folgt:

  Quelltext: form class="xxx"
  Stylesheet: form.xxx {...}

• Quelltext: form class="xxx"
  

• Stylesheet: form.xxx {...}

Beispiel

1) Quelltext

<form class="suchen" action="..." method="post">
<div>"Formularbox" noch ohne Formularelemente</div>
</form>

2) Stylesheet

/* Hintergrund von Formulare "Suchen" */
.suchen {
background:#D0E5CD;
}

3) Anzeige im Dokument

"Formularbox" noch ohne Formularelemente

Technik & Anwendung

Formulare: Suchen-Formulare

-

⇧ 5 Grundlagen-Websites & Workshops

• W3C Recommendation -
  HTML 4.01 Specification
  Deutsche Übersetzung de Das Element FORM

• SELFHTML-Wiki de HTML/Formulare/Form Beispiel

• CSS 4 You de Farbige Formularelemente

↑