0 14139

Formulare in HTML Teil 2

eine einfache Auswahlliste
eine längere Auswahlliste mit size
Mehrfachselektion bei einer Auswahlliste
Vorselektierung in einer Auswahlliste
verschachtelte Auswahllisten
versteckte Formularfelder mit hidden
Senden Button und Reset Button im Formular
Festlegen an welches Dokument die Daten gesendet werden:
Methode des Versendens (post oder get):
Zielfenster auswählen mit target

Aus Tutorial Teil 1:
Ein einfaches Texteingabefeld
Beschriftung eines Texteingabefeldes
Größe eines Texteingabefeldes
Maximale Zeichenanzahl eines Texteingabefeldes
Standardwert eines Texteingabefeldes vorlegen
Namen eines Eingabefeldes festlegen
Eingaben unkenntlich machen – Passwortfeld
großes Eingabefeld – textarea
Feld nur lesen nicht schreiben – readonly
Checkboxen – Auswahlboxen ankreuzen lassen
Checkboxen vorselektieren
Radio Buttons – Nur eine Auswahl möglich

Eine einfache Auswahlliste

Es gibt eine weitere Möglichkeit dem Besucher eine Auswahl zu erlauben, eine Auswahlliste:
Um eine Auswahlliste zu erstellen benötigen wir erstmal einen Select Bereich innerhalb des Formulares:

Die Auswahlmöglichkeiten werden in option-Tags gesetzt:

Beispielcode HTML:


<pre><html>
 <body>
  <form>
Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:<br>
<select name="Sprache">
<option>HTML</option>
<option>XHTML</option>
<option>HTML 5</option>
<option>CSS</option>
<option>CSS 3</option>
<option>Javascript</option>
<option>PHP</option>
</select>
  </form>
 </body>
</html></pre>

So sieht es aus:

Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:

lange Auswahlliste

Um eine richtige Auswahlliste (und nicht ein einzelnes Feld) anzeigen zu können müssen wir noch ein size Element mit einfügen:

Beispielcode HTML:


<pre><html>
 <body>
  <form>
Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:<br>
<select name="Sprache" size="5">
<option>HTML</option>
<option>XHTML</option>
<option>HTML 5</option>
<option>CSS</option>
<option>CSS 3</option>
<option>Javascript</option>
<option>PHP</option>
</select>
  </form>
 </body>
</html></pre>

So sieht es aus:

Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:

An diesem Beispiel konnten Sie sehen, daß die Liste automatisch mit einem Scrollbalken bestückt wird, sobald die Zahl der Auswahlmöglichkeiten die Größe des size Elementes übersteigt.

Mehrfachauswahl mit multiple

Für eine Mehrfachauswahl fügen wir einfach noch multiple in den Select Tag mit ein:

Beispielcode HTML:


<pre><html>
 <body>
  <form>
Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:<br>
<select name="Sprache" size="7" multiple>
<option>HTML</option>
<option>XHTML</option>
<option>HTML 5</option>
<option>CSS</option>
<option>CSS 3</option>
<option>Javascript</option>
<option>PHP</option>
</select>
  </form>
 </body>
</html></pre>

So sieht es aus:

Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:

Einträge in einer Auswahlliste vorselektieren

Um hier Einträge vorzuselektieren können wir bei der option einfach ein selected einfügen:

Beispielcode HTML:


<pre><html>
 <body>
  <form>
Wählen Sie aus welche Internet-Sprachen Sie interessieren:<br>
<select name="Sprache" size="7" multiple>
<option>HTML</option>
<option selected>XHTML</option>
<option>HTML 5</option>
<option selected>CSS</option>
<option>CSS 3</option>
<option>Javascript</option>
<option>PHP</option>
</select>
  </form>
 </body>
</html></pre>

So sieht es aus:

Wählen Sie aus welche Internet-Sprachen Sie interessieren:

Man kann bei einer Auswahlliste auch die Werte vorgeben, die der Variablen beim Auswählen mitgesendet werden. Dazu verwenden wir das Element value:

Beispielcode HTML:


<pre><html>
 <body>
  <form>
Wählen Sie aus welche Internet-Sprachen Sie interessieren:<br>
<select name="Sprache" size="7" multiple>
<option value="Sp1">HTML</option>
<option value="Sp2" selected>XHTML</option>
<option value="Sp3">HTML 5</option>
<option value="Sp4" selected>CSS</option>
<option value="Sp5">CSS 3</option>
<option value="Sp6">Javascript</option>
<option value="Sp7">PHP</option>
</select>
  </form>
 </body>
</html></pre>

Nun würde bspw. bei der Auswahl von CSS 3 nicht „CSS 3“ als Wert übergeben werden, sondern Sp5.

Verschachtelte Auswahllisten

Es gibt auch die Möglichkeit verschachtelte Listen auszugeben. Hierbei kann die Anzeige in den Browsern sehr unterschiedlich ausfallen. Verschachtelte Auswahllisten erstellt man folgendermaßen:

Beispielcode HTML:


<pre><html>
 <body>
  <form>
Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:<br>
<select name="Sprache" size="7" multiple>
<optgroup label="HTML Sprachen">
<option label="HTML">HTML</option>
<option label="XHTML" selected>XHTML</option>
<option label="HTML 5">HTML 5</option>
</optgroup>
<optgroup label="CSS Versionen">
<option label="CSS" selected>CSS</option>
<option label="CSS 2">CSS 2</option>
<option label="CSS 3">CSS 3</option>
</optgroup>
<optgroup label="Sonstige Skriptsprachen">
<option>Javascript</option>
<option>PHP</option>
</optgroup>
</select>
  </form>
 </body>
</html></pre>

So siehts aus:
Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:

versteckte Formularfelder mit hidden

Zuletzt möchte ich Ihnen noch eine der wichtigsten Formularfelder vorstellen: hidden… also versteckt…
Welchen Sinn macht es, ein Feld zu verstecken? Da gibt es unterschiedliche Gründe: Man könnte damit bspw. an das auswertende Formular weitergeben, von welcher Seite man kam. Man kann dem auswertenden Formular auch einen Wert mitgeben, der bestätigen soll, daß das Formular tatsächlich ausgefüllt wurde.

Beispielcode HTML:


<pre><html>
 <body>
  <form>
   <input type="hidden" name="testvar" value="xyz">
  </form>
 </body>
</html></pre>

In dem Beispiel hätten wir der Variablen testvar den Wert xyz übergeben.

Senden Button und Reset Button im Formular

Ein Formular benötigt selbstverständlich noch ein Button, mit dem man die Daten absenden kann und eines, mit dem man das Formular zurücksetzen oder resetten kann. Ein Button zum Absenden der Daten erhalten wir mit dem input type=“submit“ und zurücksetzen können wir das Formular mit dem input type=“reset“. Der Wert des Value-Elementes ist die Beschriftung des Buttons.

Beispielcode HTML:


<pre><html>
 <body>
  <form>
  <input type="submit" value="Absenden">
  <input type="reset" value="zurücksetzen">
  </form>
 </body>
</html></pre>

So sieht es aus:

Wählen Sie aus welche Internet-Sprache Sie am meisten interessiert:

Festlegen an welches Dokument die Daten gesendet werden:

Das Formular muss nun noch erfahren, an welches Dokument die Daten gesendet werden sollen. Dazu müssen wir in das öffnende Form-Tag noch ein action Element einfügen:

Beispielcode HTML:


<pre><html>
 <body>
  <form action="form.php">
  <input type="submit" value="Absenden">
  <input type="reset" value="zurücksetzen">
  </form>
 </body>
</html></pre>
Methode des Versendens (post oder get):

Um dem Formular noch mitzuteilen mit welcher Methode die Daten versendet werden sollen. Es gibt zwei Möglichkeiten: get und post. Der Unterschied ist fologender: Bei get werden alle Variablen mit ihren Variablenwerten an die URL (also die Internetadresse) angehängt. Sie sehen dann hinter der Adresse ein Fragezeichen und sehr viel unverständliches Zeug… Das sind VAriablen, die per get verschickt werden. Man kann Variablen auch mit Post versenden. Die Post Methode hängt die Variablen NICHT an die URL-Adresse an sondern versendet die Daten direkt an die Internet Seite, bei der sie ausgelesen werden kann.

Beispielcode HTML:


<pre><html>
 <body>
  <form action="form.php" method="post">
  <input type="submit" value="Absenden">
  <input type="reset" value="zurücksetzen">
  </form>
 </body>
</html></pre>

Selbstverständlich ist es sinnvoller (erst recht als Anfänger) wenn man die Daten per Post verschickt. So kann man kaum Gefahr laufen, daß ein findiger Hacker die Variablen erkennt und dafür nutzt, um einem seinen schadhaften Code unterzujubeln.

Zielfenster auswählen mit target

Zuletzt können Sie noch entscheiden, ob die auswertende Seite in einem neuen Fenster geöffnet werden soll, oder im gleichen Fenster. Um die neue Seite in einem neuen Fenster zu öffnen, setzen Sie noch ein target=“_blank“ mit ein.

Beispielcode HTML:


<pre><html>
 <body>
  <form action="form.php" method="post" target="_blank">
  <input type="submit" value="Absenden">
  <input type="reset" value="zurücksetzen">
  </form>
 </body>
</html></pre>

Nun habe ich Ihnen alle mir bekannten Formularfelder aufgezeigt. Sollte ich etwas übersehen haben, sagen Sie mir bitte Bescheid.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.