Formulare

Formulare sind Bestandteil vieler HTML-Seiten.

AmazonAuswahl.png
Zu den Formularen gehören z. B.
  • Auswahlformulare wie das oben dargestellte,
  • Bestellformulare,
  • Formulare zur Kontaktaufnahme,
  • Umfragen,
  • Anmeldungen zu Newslettern,
  • Gästebücher,
  • Datei-Upload,
  • etc.
Obwohl sich all diese Formulare scheinbar deutlich unterscheiden, basieren sie doch alle auf den gleichen HTML-Elementen. Alle Bestandteile eines Formulars finden Sie in der HTML-Seite zwischen den Tags <form ...> und </form>. Das Form-Tag dient sozusagen als Container für alle Elemente des Formulars. Eingegebene Werte kann man mit Javascript leicht auslesen und in eigenen Programmen als Eingaben verwenden. In den folgenden Kapiteln werden verschiedene Arten von Formularelementen beschrieben.

Ein Formular benötigt für die eindeutige Identifizierung im Javascript-Quelltext einen Namen. Das sieht dann im form-Tag z.B. wie folgt aus:
<form name="bestellform">
 
<!-- diverse Formular-Elemente -->
 
</form>
Der Zugriff auf Formularelemente des obigen Beispiels findet jetzt z.B. über folgenden Ausdruck statt:
  • document.bestellform.nameDesFormularelements.irgendwas
Beim Lesen speichern Sie den Wert von irgendwas in einer Variable, z.B.
  • x = document.bestellform.nameDesFormularelements.irgendwas
  • document.write( x )
Beim Schreiben in ein Formularfeld geben Sie den Wert aus, indem Sie z.B. folgendes schreiben
  • document.bestellform.nameDesFormularelements.irgendwas = "tralalala"

Texteingaben

Einfache Texteingaben sehen wie folgt aus:
<input type="text" name="vornamefeld" size="20">
Oder so, falls die Eingabe z.B. für ein Passwort nicht lesbar sein soll (type="password"):
<input type="password" name="pweingabe" size="15" maxlength="25">
Es gibt auch unsichtbare Textfelder (type="hidden") mit zusätzlichen Angaben, welche z.B. für die Verarbeitung der Formulardaten im Programm ergänzend zur Verfügung stehen.
<input type="hidden" value="4711" name="joker">
Für die Eingabe von mehreren Zeilen Text eignet sich das Tag <textarea> (cols und rows geben die Anzahl der Spalten und Zeilen an):
<textarea name="textgross" cols=25 rows=5></textarea>
Beispiel:
Für eine Suchanfrage kann ein Textfeld später dann auch mal wie folgt aussehen:
<input type    = "text"
       name    = "query"
       class   = "search"
       value   = "Suchbegriff"
       onfocus = "if(this.value=='Suchbegriff')this.value=''"
       onblur  = "if(this.value=='')this.value='Suchbegriff'"
       size    = "15"
>

Checkboxen

zum "Ankreuzen", siehe
http://de.selfhtml.org/html/formulare/auswahl.htm#checkboxen
<input type="checkbox" name="kommewieder" checked>immer wieder

Radio Buttons

Auswahlknöpfe - wenn einer gewählt ist, werden alle andere automatisch abgewählt, siehe
http://de.selfhtml.org/html/formulare/auswahl.htm#radiobuttons
<input type="radio" name="note" value="sehr gut"> 1 |
<input type="radio" name="note" value="gut"> 2
Die Auswahl funktioniert nur, wenn das Attribut 'name' bei allen Auswahlmöglichkeiten den gleichen Wert hat.

Auswahllisten

Auswahl z.B. von Herr/Frau oder verschiedenen Artikeln, siehe
http://de.selfhtml.org/html/formulare/auswahl.htm#listen
<select name="anrede" id="anrede" size="1">
 <option value="Herr">Herr</option>
 <option value="Frau">Frau</option>
</select>

File Uploads

Für die Auswahl einer Datei, welche z.B. an den Server übertragen werden soll verwendet man die folgende Anweisung:
<input readonly="readonly" type="file">

Reset Button (input type="button")

Zurücksetzen der Eingabefelder auf den Ausgangszustand
<input type="reset" value="Formular leeren">

Normaler Button (input type="button")

für beliebige Zwecke
<input
  type    = "button"
  name    = "meinButton"
  value   = "tuWas"
  onclick = "meineFunktion()"
>

Submit Button (input type="submit")

z.B. Abschicken der Formulardaten an den Server
<input type="submit" value="Und weg damit">

Alternativ kann man auch type="image" zum Absenden von Formulardaten an den Server verwenden

(Verwendung in ähnlicher Form siehe z.B. www.comdirect.de)
<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
  <input name="SEARCH_VALUE"
         onfocus="this.value='';this.style.color='#000000'"
         onblur="if(this.value == '')
                 {
                   this.value='na na na onblur happened';
                   this.style.color='#85868D'
                 };"
         type="text"
         value="lalala" />
  <input type="image"
         src="http://www.comdirect.de/ccf2/img/form_button.gif" />
</form>
via Link (wobei formid die id des Tags form ist, d.h. <form id="formid" ,,,>):
<a onclick="document.forms['formid'].submit();"
   href="javascript:;">suchen</a>

Überprüfen eines Formulars vor dem Abschicken

  1. Schreiben Sie eine Funktion, welche die Überprüfung der Eingaben vornimmt.
  2. Der Rückgabewert der Funktion muss true sein, wenn die Prüfung in Ordnung war, andernfalls false.
  3. Ergänzen Sie den Submit-Button um den Eventhandler onclick und diese Funktion: onlick="meinePrueffunktion()"

Formatierung

Zur Formatierung von Formularen stehen Ihnen alle Möglichkeiten von CSS zur Verfügung.
Es wurden zu diesem Zweck auch immer wieder gerne Tabellen eingesetzt (siehe Beispiel).
<form name="newsletter" action="">
  <table>
    <tr>
      <td>E-Mail-Adresse:</td>
      <td><input name="Mail" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td>Formular:</td>
      <td><input type="image" src="absende.gif" alt="Absenden"></td>
    </tr>
  </table>
</form>

Zugehörige Programmbeispiele

die z.B. zur Prüfung der obigen Elemente verwendet werden können

Funktion zur Ausgabe der Ergebnisse in ein Ausgabefeld:

<div id="ausgabefeld"></div>:
function ausgabe( text )
{
      document.getElementById("ausgabefeld").innerHTML += text + "<br>";
}

Hineinschreiben in Formularfelder

(an der zweiten Stelle steht immer der Name Ihres Formulars, siehe <form name=?>) :
function hineinschreiben()
{
      document.alles.name.value          = "tralala";
      document.alles.pw.value            = "huehott";
      document.alles.textfeld.value      = "Hier kann ein ganz langer Text stehen";
      document.alles.kommewieder.checked = false;
      document.alles.note[0].checked     = true;
}

Herauslesen von Werten aus verschiedenen Formularelementen

function herauslesen()
{
      // zuerst Ausgabefeld loeschen
      document.getElementById("ausgabefeld").innerHTML = "";
 
      ausgabe( document.alles.name.value );
      ausgabe( document.alles.pw.value );
      ausgabe( document.alles.textfeld.value );
      ausgabe( document.alles.kommewieder.checked );
      ausgabe( document.alles.anrede.value );
      ausgabe( document.alles.note[0].checked );
      if( document.alles.note[1].checked == true )
      {
        alert("Silber");
      }
}

Auswerten einer Auswahlliste

nach Anklicken / komplettes minimalistisches aber funktionsfähiges Beispiel mit HTML!!
(siehe auch http://de.selfhtml.org/javascript/objekte/options.htm)
<html>
 
<head>
 
  <script type="text/javascript">
 
    function auswahl()
    {
      var index;
 
      // Speichern des ausgewählten Index der Liste
      index = document.myForm.Klassen.selectedIndex;
 
      // Ausgeben des Index
      alert( index );
 
      //Wert des Attributs value des gewählten Eintrags
      alert( document.myForm.Klassen[index].value );
    }
 
  </script>
 
</head>
 
<body>
 
 <form name="myForm" action="">
 
  <select name="Klassen" size="5" onchange="auswahl()">
    <option value="Klasse1">MEA11</option>
    <option value="Klasse2">MEA12</option>
    <option value="Klasse3">MEA13</option>
    <option value="Klasse4">MEA14</option>
    <option value="Klasse5">MEA15</option>
  </select>
 
 </form>
 
</body>
 
</html>
Wenn Sie den Wert aus der Eigenschaft 'value' auslesen wollen, dann geht das z.B. wie folgt:
var index = document.myForm.Klassen.selectedindex;
var value = document.myForm.Klassen[index].value;

Weitere nützliche Funktionen

siehe http://www.strassenprogrammierer.de/mit-javascript-formulare-ueberpruefen_tipp_389.html
Folgende Funktion können Sie verwenden:

Prüfen der Gültigkeit der Emailadresse


function validEmail( email )
{
  var strReg = "^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$";
 
  // Anlegen des RegExp-Objektes
  var regex = new RegExp(strReg);
 
  // Prüfung von email ergibt true oder false
  var result = regex.test(email)
 
  // Rückgabe des Ergebnisses an die aufrufende Stelle im Programm
  return( result );
}
  1. Die Funktion bekommt als Übergabewert eine Zeichenkette, in der angeblich eine Emailadresse steht. (email)
  2. Innerhalb der Funktion wird ein RegExp-Objekt erzeugt, welches die Syntax einer Emailadresse kennt, z.B. entsprechend http://emailregex.com/
  3. Die Test-Funktion des Objekts prüft die email.
  4. Das Ergebnis der Prüfung wird in der Variable result gespeichert.
  5. Das Ergebnis wird mit return zurückgegeben an die aufrufende Stelle im Programm.

Gültigkeit von Namen prüfen

function gueltigerName( name )
{
   var strReg = "^[a-zA-Z]*$";
   var regex = new RegExp(strReg);
   return( regex.test(name) );
}
Die Überprüfungen mit der Funktion RegExp funktionieren wie im folgenden Beitrag beschrieben:

Zum Üben gibt es auch eine Seite:

Prüfen der Eingabe einer ganzen Zahl

function pruefe_feld_anzahl()
{
      // Den Wert aus dem Feld kann ich mir in eine Variable kopieren.
      // Das macht Sinn, wenn ich nicht immer so lange
      // Bezeichner schreiben will.
      var anz=document.meric.anzahl.value;
 
      // Jetzt wird das Feld ausgewertet:
 
      // Steht im Feld etwas drin?
      // anz=="" bedeutet: Wenn im Eingabefeld nichts steht,
      // dann ist der Vergleich des Wertes aus dem Eingabefeld
      // mit "" wahr, d.h. true.
      if( anz=="" )
      {
        alert("Im Feld Anzahl steht nichts drin!");
        return;
      }
 
      // isNaN( anz ) gibt den Wert true zurück,
      // wenn im Eingabefeld keine Zahl steht
      if( isNaN( anz ) )
      {
        // isNaN() - is not a number !
        alert("Eingabe ist ein Text! Mist!")
        return;
      }
 
      // Jetzt kann die eingegebene Zahl immer noch viel zu gross sein.
      // Das muss auch geprueft werden. Die einfachste Möglichkeit besteht
      // darin, einfach nur die Anzahl der Zeichen zu prüfen.
      if( anz.length > 2 )
      {
        alert("Bei uns koennen Sie maximal 99 Stück bestellen");
      }
}

Quellen / Links

Die besten ...
http://www.html-world.de/program/js_e_5.php Formulare
http://de.selfhtml.org/html/formulare/index.htm Formulare
http://de.selfhtml.org/javascript/beispiele/formulareingaben.htm Formulareingaben überprüfen
http://de.selfhtml.org/html/formulare/definieren.htm

HTML5 Ergänzungen
https://www.coding-lab.de/tutorials/html5/form-elemente/#Neue_Elemente

Weitere gute ...
http://www.formws.onlex.de/
http://www.formws.onlex.de/feedbackformular.html
http://www.oreilly.de/catalog/designjs2ger/chapter/f_Kapitel04.html
http://javascript-workshop.de/buch/05.html
http://www.starhtml.de/online/javaform.htm
http://www.kostenlose-javascripts.de/tutorials/tutorials/formulare.html
http://de.selfhtml.org/javascript/objekte/forms.htm
http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/
http://www.jchanke.de/homepage/download/formular.pdf
http://dcljs.de/faq/antwort.php?Antwort=forms_radioselect
http://die.netzspielwiese.de/blog/barrierefreiheit/2006-03/verwendung-des-label-elements-bei-radio-und-checkboxen-innerhalb-von-formularen
http://www.808.dk/?code-javascript-print Drucken von HTML-Elementen
http://www.stichpunkt.de/css/formulare.html Formatierung von Formularen
http://www.w3schools.com/tags/att_input_name.asp
http://www.w3schools.com/tags/tag_input.asp
http://www.html5rocks.com/de/tutorials/forms/html5forms/
http://www.heise.de/ix/artikel/Auswahlscheibe-1667689.html
http://pattern.tfcpc.de/pattern-tutorial.php





<input type="checkbox" name="kommewieder" value="ja">immer wieder