Erweiterte Formulare

Auswahllisten

Mit Listen können wir große Mengen an Auswahloptionen kompakt darstellen. Ein Beispiel wäre das Bundesland aus dem unser Benutzer kommt.

<select name="bundesland" size="1">
   <option value="nichts">nicht aus Deutschland</option>
   <option value="Baden-Wuerttemb">Baden-Württemberg</option>
   <option value="Bayer">Bayer</option>
   <option value="Berlin">Berlin</option>
   <option value="Brandenburg">Brandenburg</option>
   <option value="Bremen">Bremen</option>
   <option value="Hamburg">Hamburg</option>
</select> 


Aus Platzgründen hab ich mir den Rest der Bundesländer gesparrt, aber ich  denke das Prinzip wird klar.


Das ganze bauen wir natürlich auch 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:
     <br />
     <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>
   <!-- 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>
   <!-- Auswahlliste zur Auswahl des Bundeslands -->
   <p>
     Aus welchem Bundesland kommst du? <br />
     <select name="bundesland" size="1">
       <option value="nichts">nicht aus Deutschland</option>
       <option value="Baden-Wuerttemb">Baden-Württemberg</option>
       <option value="Bayer">Bayer</option>
       <option value="Berlin">Berlin</option>
       <option value="Brandenburg">Brandenburg</option>
       <option value="Bremen">Bremen</option>
       <option value="Hamburg">Hamburg</option>
     </select>
   </p> 
</form> 

Nun ist unser Formular fast schon komplett, aber ein entscheindendes Element fehlt noch. Dieses Element ist der Button zum Abschicken.

Submit Buttons

Einen Submit Button bauen wir mit folgendem Tag ein:

<input type="submit" value="EMail versenden"/>

Wir müssen also als Attribut type "submit" angeben. Um die Beschriftung des Buttons zu ändern, müssen wir den Wert des Value Attributs bearbeiten.Ein Element habe ich in unserem Mailformular nicht verwendet, das ist das Passwortfeld.

Passwortfelder

Mit einem Passwortfeld kann man ein Feld einbauen in dem alle eingaben in Form von Sternchen dargestellt werden. Dadurch können zuschauer das eingegebene Passwort nicht lesen.

Tag für ein Passwortfeld:

<input type="password" name="feldname"/>

Ausserdem kann man noch versteckte Felder in ein Formular einbauen.

versteckte Formularfelder

Ein verstecktes Formularfeld dient zu reinen Datentransport. Bei PHP Skripten kann man z.B. soetwas manchmal finden:

<input type="hidden" name="filled" value="true"/> 

Damit kann der Programmierer später abfragen ob das Formular abgesendet wurde. Versteckte Felder können also nützlich sein um z.b. statusvariablen etc zu übermitteln. Man sollte sie jedoch niemals dazu nutzen Sicherheitsrelevante Informationen vom Server zum Client zu übertragen um diese nach dem abschicken des Formulars wieder zu nutzen. Denn der Quelltext ist beim Client lesbar und veränderbar.


In unserem Mailformular habe ich auf ein verstecktes Feld verzichtet.

Unser Formular ist jetzt soweit fertig und der Quelltext sieht wie folgt aus:

<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:
     <br />
     <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>
   <!-- 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>
   <!-- Auswahlliste zur Auswahl des Bundeslands -->
   <p>
     Aus welchem Bundesland kommst du?<br />
     <select name="bundesland" size="1">
       <option value="nichts">nicht aus Deutschland</option>
       <option value="Baden-Wuerttemb">Baden-Württemberg</option>
       <option value="Bayer">Bayer</option>
       <option value="Berlin">Berlin</option>
       <option value="Brandenburg">Brandenburg</option>
       <option value="Bremen">Bremen</option>
       <option value="Hamburg">Hamburg</option>
     </select> 
  </p>
  <!-- Einbau des Submit Buttons zu abschicken des Formulars -->
   <p>
   <input type="submit" value="EMail senden">
   </p>
</form>

Die aus diesem Feld generierte Mail würde so aussehen:

name=Timo Schmidt
meinung=Tolle Internetseite
kenntnisse=bilder
kenntnisse=frames
kenntnisse=tabellen
kenntnisse=formulare
geschlecht=maennlich
bundesland="Hamburg"

 

Navigation