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.

<form action="mailto:user@domain.de"  method="post" enctype="text/plain">
   <!-- Hier folgen später die Felder-->
</form> 

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:

<form action="mailto:user@domain.de" method="post" enctype="text/plain">
   <!-- Textfeld für ein Formular zur Eingabe des Namen-->
   Name: <input type="text" name="name" value="Ihr Name">
</form>

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:

<form action="mailto:user@domain.de" method="post" enctype="text/plain">
   <!-- Textfeld für ein Formular zur Eingabe des Namen-->
   Name: <input type="text" name="name" value="Ihr Name">
   <!-- Mehrzeiliger Textbereich für das Formular -->
   Deine Meinung:
   <textarea name="meinung">     
     Schreib in dieses Feld deine 
     Meinung zu unserer
     Internetseite.
   </textarea>
</form> 


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:

<input type="checkbox" name="kenntnisse" value="bilder"/>Bilder<br/>
<input type="checkbox" name="kenntnisse" value="frames"/>Frames<br/>
<input type="checkbox" name="kenntnisse" value="tabellen"/>Tabellen<br/>
<input type="checkbox" name="kenntnisse" value="formulare"/>Formulare<br/>


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:

<form action="mailto:user@domain.de" method="post" enctype="text/plain">
   <!-- Textfeld für ein Formular zur Eingabe des Namen-->
   <p>Name: <input type="text" name="name" value="Ihr Name"></p>
   <!-- Mehrzeiliger Textbereich für das Formular -->
   <p>Deine Meinung: <textarea name="meinung">Schreib in dieses Feld 
         deine Meinung zu unserer Internetseite</textarea></p>
   <!-- Checkboxen für Mehrfachauswahl -->
   <p>Das weiss ich über HTML:<br />
       <input type="checkbox" name="kenntnisse" value="bilder"/>Bilder<br/>
       <input type="checkbox" name="kenntnisse" value="frames"/>Frames<br/>
       <input type="checkbox" name="kenntnisse" value="tabellen"/>Tabellen<br/>
       <input type="checkbox" name="kenntnisse" value="formulare"/>Formulare<br/>
   </p>
</form>

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:

<input type="radio" name="geschlecht" value="maennlich"/>Männlich<br/>
<input type="radio" name="geschlecht" value="weiblich"/>Weiblich<br/>

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:

<form action="mailto:user@domain.de" method="post" enctype="text/plain">
   <!-- Textfeld für ein Formular zur Eingabe des Namen-->
   <p>Name: 
   <input type="text" name="name" value="Ihr Name"></p>
   <!-- Mehrzeiliger Textbereich für das Formular -->
   <p>Deine Meinung:
      <textarea name="meinung">Schreib in dieses Feld deine Meinung zu
       unserer I nternetseite.
      </textarea>
   </p>
   <!-- Checkboxen für Mehrfachauswahl -->
   <p>Das weiss ich über HTML:<br />
      <input type="checkbox" name="kenntnisse" value="bilder"/>Bilder<br/>
      <input type="checkbox" name="kenntnisse" value="frames"/>Frames<br/>
      <input type="checkbox" name="kenntnisse" value="tabellen"/>Tabellen<br/>
      <input type="checkbox" name="kenntnisse" value="formulare"/>Formulare<br/>
   </p>
   <!-- Radiobuttons zur Auswahl des Geschlechts -->
   <p>Geschlecht:<br />
     <input type="radio" name="geschlecht" value="maennlich"> männlich<br />
     <input type="radio" name="geschlecht" value="weiblich"> weiblich<br />
   </p>
</form> 


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