Formulare

Formulare in HTML

Zugegeben, mit HTML alleine gibt es sehr wenige Einsatzbereiche für Formulare. Du solltest dich trotzdem damit beschäftigen. Denn später, wenn du mit Skriptsprachen programmierst, oder Formulare mit JavaScript auswertes, sind Formulare das A und O.

Ich möchte euch hier Formulare am Beispiel eines einfachen Mailformulares erklären. Wenn du dich mal mehr mit HTML und z.B. PHP beschäftigt hast, wirst du herausfinden das es für diesen Zweck bessere Lösungen gibt.

Bei diesem Beispiel geht es also nur ums Prinzip. Um ein Formular zu erstellen müssen wir erstmal einen Formularbereich erstellen.In diesem Anfangs Tag müssen wir festlegen, was mit dem Formular passieren soll, wenn der Benutzer es abschickt. Wir müssen uns also eine Aktion überlegen, genauso heisst auch das Attribut des form Tags, nämlich "action".

Mit "method" wird die Art der Übertragung festgelegt. Man kann bei method zwischen "post" und "get" wählen. Was das zu bedeuten hat werden wir irgendwann später klären. Mit enctype legen wir in diesem Fall fest um weche Art von Mail es sich handelt. Das enctype Attribut wird aber normal nicht so häufig verwendet.

Wenn wir dieses Formular in eine unserer Seiten einbauen, sehen wir, das wir nix sehen. Ist auch ganz klar, denn wir müssen ja noch unsere Felder eintragen. Aber auch hier gibt es viele Möglichkeiten.


Wir fangen erstmal mit dem einfachsten an, nämlich mit dem Textfeld.

Textfelder in HTML Formularen

Das Textfeld benutzen wir immer wenn Zeichen eingegeben werden sollen. Dazu zählen auch Zahlen.

Ein Textfeld integrieren wir indem wir unser Formular folgendermassen erweitern:

Wir benutzen für unser Textfeld also den <input> Tag. Dieser Tag hat das "type" Attribut, indem wir hier festlegen das es sich um ein Textfeld handelt. Mit dem Attribut "name" legen wir den Namen des Feldes fest.


Wenn du später komplexe Skripte schreibst, ergibt sich aus diesem Namen ein Variablenname. Mit dem "value" Attribut kann man einen Text der im Textfeld steht vorgeben.

Textbereiche (textareas)

Manchmal braucht man einen großen Bereich, wo ein Benutzer lange Texte eingeben kann. Speziell für diesen Zweck gibt es <textarea>. In eine Textarea kann man mehrere Zeilen schreiben.

Wir erweitern also unser Formular um einen Bereich wo der Besucher seine Meinung schreiben kann:

Wie du siehst benötigt Textarea einen Tag der die Textarea beendet. Das liegt daran das der "value" Bereich zu gross werden würde, wenn man den Inhalt hineinschreiben würde.

Checkboxen

In manchen Fällen brauchen wir auch nur eine Box, die ein Benutzer ankreuzen kann oder nicht.

Diese Box nennen wir checkbox. Checkboxen haben die eigenschaften, das ein Benutzer mehrere auswählen kann.

Über folgenden Tag bauen wir eine Checkboxen ein:

Alle Felder haben den gleichen Namen, das kann bei Skripten später ein Problem werden, aber PHP z.B. kennt Möglichkeiten diese Werte zu gruppieren.


Wir geben allen Werten den gleichen Namen und jeweils als "value" einen Bezeichner durch den wir wissen, was angekickt wurde.

Nun bauen wir das ganze in unser Mailformular ein:

Jetzt wissen wir wie wir unseren Benutzern eine mehrfach Auswahl anbieten können, aber wie können wir bestimmen das der Benutzer nur eine Option wählen kann?

Radiobuttons

Ihren Namen haben die Radiobuttons von alten Radios. Bei diesen Radios war es so, dass wenn man einen Knopf getdrückt hat, die anderen Knöpfe rausgesprungen sind.

Genauso ist das auch in HTML mit den Radiobuttons.

Ein gutes Beispiel für Radiobuttons ist die Auswahl des Geschlechts, den jeder ist entweder männlich oder weiblich oder ? ;-)

So sieht es aus wenn wir einen Radiobutton einbauen wollen:

Dabei ist wichtig, dass im Attribut ?name? der gleiche Wert steht. Nur dann kann der Browser die gewünschte Funktion realisieren. Wir bauen das ganze also in unser Formular ein:

Neben den bislang gezeigten Formularelement in HTML gibt es noch eine weitere nützliche Elemente.

 

z.b. Um DropDown-Auswahllisten einzubinden, oder um Passörter einzugeben. Auf der nächsten Seite lernen Sie diese kennen.

 

Navigation