Lecture 04

Prof. Dr.-Ing. S. Gössner

FH Dortmund - University of Applied Sciences

Inhalt

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

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>

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]

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

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"/>

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>

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>

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

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

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>