[edit] [comment] [remove] |2007-04-25| e1 # HTML Formulare

  • HTML besitzt Eingabemöglichkeiten
    • um dem Anwender Suchvorgänge anzubieten.
    • um Anwender Datenbestände erweitern zu lassen.
    • um eine Auswahl aus einem umfangreichen Angebot durchzuführen.
    • um Anwenderdaten zu erfragen (Vorsicht!).
  • Hierzu dient eine Reihe von Eingabeelementen.
  • Eingabeelemente oder –felder treten üblicherweise in Gruppen auf und werden daher logisch zusammengefasst.
  • Die eingegebenen Daten werden meist zum Webserver, der das Formular ausgeliefert hat zurückgesendet.

Beispiel

Namensformular

 

[edit] [comment] [remove] |2007-04-25| e2 # Formular Element

Das Formularelement <form> ist ein Containerelement und kann an beliebiger Stelle im Dokumentrumpf <body> platziert werden.

Syntax 

<form name="[eindeutige Bezeichnung]"
      action="[Server-URI zur Weiterverarbeitung]" 
      method="get|post"
      accept-charset="[Zeichensatzangabe]">
   <!-- Formularelemente -->
</form>
 

[edit] [comment] [remove] |2007-04-25| e3 # Formular Beispiel

Wir wollen in einem Beispiel die Email Adresse einer Studierenden übertragen.

Html Datei: student01.html 

<html>
  <head>
     <title>Eingabe und Übertragung von Formulardaten</title>
  </head>
  <body>
    <h1>Studentenerfassung</h1>
    <form method="post" action="student01.php">
      Email: 
      <input type="text" id="email" name="email" />
      <input type="submit" value="senden .." />
    </form>
  </body>
</html>

Php Datei: student01.php 

<?php
print("Email an Server angekommen: " . $_POST["email"]);
?>

[ Ausführen]

 

[edit] [comment] [remove] |2007-04-25| e4 # Formularelemente - Überblick

Element Markup Beschreibung
Button <input type="button" ...> oder <button ...> Button
Checkbox <input type="checkbox" ...> Kontrollfeld
FileUpload <input type="file" ...> Element zum Hochladen von Dateien (Textfeld und passender Button)
Hidden <input type="hidden" ...> Unsichtbares Textfeld
Image <input type="image" ...> Bild als Submit-Button
Password <input type="password" ...> Textfeld, bei dem die Eingabe mit "*" maskiert ist
Radio <input type="radio" ...> Radio-Button
Reset <input type="reset" ...> Reset-Button
Select <select ...>... </select> Auswahlliste
Submit <input type="submit" ...> Submit-Button
Text <input type="text" ...> Einzeiliges Textfeld
Textarea <textarea ...> ... </textarea> Mehrzeiliges Textfeld
 

[edit] [comment] [remove] |2007-04-25| e5 # Textfeld - einzeilig

Syntax 

<input name="[eindeutige Bezeichnung]" 
       type="text|password" 
       size="[sichtbare Zeichenanzahl]" 
       maxlength="[maximale Zeichenanzahl]"
       readonly="readonly"
       value="[Vorbelegung]" />

Beispiel

Textfeld-einzeilig Email: 

  Email: 
  <input type="text" id="email" 
         name="email" size="42" 
         value="any@where.net"/>
 

[edit] [comment] [remove] |2007-04-25| e6 # Textfeld - mehrzeilig

Syntax 

<textarea name="[eindeutige Bezeichnung]" 
          cols="[Anzahl Zeichen / Zeile]"
          rows="[Anzahl Zeilen]"
          readonly="readonly">
  textuelle Vorbelegung
</textarea>

Beispiel

Textfeld-mehrzeilig Beschreibung: 

Beschreibung: 
<textarea id="desc" name="desc" cols="42" rows="4">
- hier schreiben -
</textarea>
 

[edit] [comment] [remove] |2007-04-25| e7 # Auswahlliste

Syntax 

<select name="[eindeutige Bezeichnung]" 
        size="[Anzahl sichtbarer Einträge]"
        multiple="multiple">
  <option value="[zu sendender Wert]"
          selected="selected">
    Auswahlbeschreibung
  </option
  <option> ... </option>
  ...
</select>

Beispiel

Auswahlliste 

<select name="farben" size="3" multiple="multiple">
  <option value="red">rot</option>
  <option value="green" selected="selected">green</option>
  <option value="yellow">yellow</option>
  <option value="blue">blau</option>
</select>
 

[edit] [comment] [remove] |2007-04-25| e8 # Radio-Button

Syntax 

<input name="[Gruppenbezeichner]"
       type="radio"
       value="[zu sendender Wert]"
       checked="checked" />

Beispiel

Radio-Buttons rot
grün
gelb
blau 

<input name="farbe" type="radio" value="red" /> rot <br/>
<input name="farbe" type="radio" value="green" /> grün <br/>
<input name="farbe" type="radio" value="yellow" /> gelb <br/>
<input name="farbe" type="radio" value="blue" checked="checked"/> blau
 

[edit] [comment] [remove] |2007-04-25| e9 # Checkbox

Syntax 

<input name="[Gruppenbezeichner]"
       type="checkbox"
       value="[zu sendender Wert]"
       checked="checked" />

Beispiel

Checkboxes rot
grün
gelb
blau 

<input name="farbe" type="checkbox" value="red" checked="checked"/> rot<br/>
<input name="farbe" type="checkbox" value="green" /> grün <br/>
<input name="farbe" type="checkbox" value="yellow" /> gelb <br/>
<input name="farbe" type="checkbox" value="blue" checked="checked"/> blau
 

[edit] [comment] [remove] |2007-04-25| e10 # Klickbutton

Syntax 

<button name="[eindeutige Bezeichnung]"
        type="button|submit|reset"
        value="[zu sendender Wert]"
        onclick="[script]">
  Buttonaufschrift / Inhalt(Bild)
</button>

Beispiel

Button 

<button onclick="window.alert('world')">hello</button>
 

[edit] [comment] [remove] |2007-04-26| e11 # Element-Label

Die Beschriftung, die üblicherweise zu den Eingabeelementen jeweils dazugehört, kann auch formal via <label> Element zugeordnet werden. Diese Massnahme hat sowohl den Nutzen einer verbesserten Semantik, als auch den der erhöhten Bedienfreundlichkeit.