[edit] [comment] [remove] |2006-06-07| e1 # HTML Formular

HTML Formulare erlauben die Eingabe von Benutzerdaten. Üblicherweise werden die Daten zum Webserver zur weiteren Verarbeitung gesendet.

Syntax

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

[edit] [comment] [remove] |2006-06-07| e2 # 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] |2006-06-07| e3 # Formularelemente

  • Textfeld
    • einzeilig
    • mehrzeilig
  • Auswahlliste
  • Radio-Button
  • Checkbox
  • Klickbutton
 

[edit] [comment] [remove] |2006-06-07| e4 # Textfeld - einzeilig

Syntax

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

Beispiel

Textfeld-einzeilig Email:

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

[edit] [comment] [remove] |2006-06-07| e5 # Textfeld - mehrzeilig

Syntax

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

Beispiel

Textfeld-mehrzeilig Beschreibung:

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

[edit] [comment] [remove] |2006-06-08| e6 # 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] |2006-06-08| e7 # 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] |2006-06-08| e8 # 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] |2006-06-08| e9 # 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>