Formularelemente
    
 Home • Formulare • Formularvorlage  

 Formulare - Formularelemente
01 02 03 04 05
Die Erklärung zu Formularen habe ich auf 2 separate Seiten aufgeteilt. Auf dieser zweiten Seite beschäftige ich mich mit Elementen eines Formulars, den unterschiedlichen Möglichkeiten zur Eingabe von Text, Auswahlfeldern, Checkbuttons und sogenannten 'Radiobuttons'.

Elemente des Formulars

Innerhalb eines Formulars können Sie verschiedene Formularelemente notieren. Ein- und mehrzeilige Eingabefelder, Optionsbuttons, Auswahlmenüs und natürlich Schaltflächen (Buttons) zum Absenden und Verwerfen. Innerhalb eines Formulars können auch versteckte Informationen übertragen werden.

Formularlemente stehen innerhalb der Definition für ein Formular,
also innerhalb von <form>-Tags: 
<form>
hier stehen die Formularelemente
</form>




   einzeiliges Eingabefeld   Textfeld

  •  Input bedeutet: Eingabefeld
  •  size steht für die Grösse der Eingabefeldes
  •  maxlength steht für die maximale Eingabelänge (Zeichenlänge)
Name: <input type="text" name="nachname" size="30" maxlength="60"> <br>
Name:



   einzeiliges Eingabefeld   Password

Eine Sonderform des einzeiligen Textfeldes stellt das Eingabefeld für ein Passwort dar. Der Unterschied in der Notierung ist beim Atrribut 'type' zu erkennen. Resultat: Bei der Eingabe werden Punkte / Sternchen statt der Zeichen dargestellt. 
Kennwort: <input type="password" name="geheim" size="30" maxlength="60"> <br>
Kennwort:  Eingabe hier testen



   mehrzeiliges Texteingabefeld   Editorfeld

  •  Textarea bezeichnet das Eingabefeld
  •  rows steht für dei Anzahl der Zeilen
  •  cols steht für Breite in Zeichen
Text: <textarea name="Antwort" rows="5" cols="30"></textarea>

Text:  



   Auswahlfeld   Pulldown 

Anfrage:

<select name="Bereich" size="1">
<option> HTML
<option> DHTML
<option> CSS
<option> JavaScript
</select>
Anfrage:  
Normalerweise wird beim Absenden des Formulars der Text eines ausgewählten Listeneintrags übertragen, der hinter <option> steht.

Um einen anderen Absendewert zu bestimmen, notieren sie im Tag <option...> des betreffenden Eintrags den Zusatz value=. Der Wert muß in Anführungszeichen stehen. Beim Absenden des Formulars wird dann dieser Text übertragen, nicht der Text den der Besucher sieht. Beispiel HTML

<select name="Bereich">
<option value="HTML Anfrage"> HTML
<option value="DHTML Anfrage"> DHTML
<option value="Java Anfrage"> Java
<option value="CSS Anfrage"> CSS
</select>



   Radiobuttons   eine Auswahl möglich

Bei Radiobuttons ist imer nur eine der Auswahlmöglichkeiten aktivierbar! 
Wie sollen wir antworten:<br>

<input type="radio" name="Kontakt" value="email"> email
<input type="radio" name="Kontakt" value="phone"> Telefon
<input type="radio" name="Kontakt" value="mail"> Briefpost


Wie sollen wir antworten:

email
Telefon
Briefpost




   Checkboxen   mehrere Auswahlen möglich

Bei Checkbuttons können mehrere Auswahlen getroffen werden. 
Wie wollen Sie beliefert werden?

<input type="checkbox" name="Liefern" value="UPS"> UPS
<input type="checkbox" name="Liefern" value="DHL"> Hermes
<input type="checkbox" name="Liefern" value="DPD"> DPD
Wie wollen Sie beliefert werden?

UPS
DHL
DPD



   Buttons   absenden, abbrechen, auslösen

In Formularen stehen standardmäßig zwei Buttontypen zur Verfügung, um Formularinhalte abzusenden oder die Eingabe abzubrechen bzw. Feldinhalte zurückzusetzen. Das sind die Buttons vom Typ "submit" und "reset".


<input type="submit" value="abschicken">
<input type="reset" value="abbrechen">


Außerdem besteht die Möglichkkeit einen Button vom Typ "button" zu definieren, der nicht für den Versand von Daten aus einem Formular vorgesehen ist, sondern mit anderen Aktionen verknüpft werden kann. 


<input type="button" value="Wochentag" onclick="MachWas()">
Anzeige: