Formulare

• Einsatz von Formularen:
  • grundlegende Eingabe-Möglichkeit in HTML
  • enthält Eingabeelemente sowie beliebige weitere HTML-Elemente zur Gestaltung
  • Beispiel forms1.html (HTML-Quelle)
• Definition eines Formulars:
  • Tag <form> umschliesst ganzes Formular
  • action-Parameter: Wohin mit den Daten?
  • mögliche Aktionen
    • als Email verschicken (mailto:peter@junglas.name)
    • an auswertende Seite (CGI, PHP) übergeben
  • method-Parameter: Wie werden die Daten verschickt?
    • get: kodiert in der URL
      z.B. http://www.junglas.name/echo.php?user=klaus&passwort=juhu
      auf kleine Datenmengen beschränkt
      kann man als Bookmark speichern
      Werte sind sichtbar!
    • post: als eigener Datenblock
      bei großen Datenmengen
      wenn Inhalt nicht sichtbar sein soll
  • Button zum Abschicken (submit) löst Aktion aus
• Einzeilige Text-Eingabefelder:
  • definiert durch Tag <input>
  • kein Ende-Tag
  • Parameter size
    • Länge des Feldes in Zeichen
  • Parameter name
    • Name des Feldes
    • wichtig für auswertendes Programm
  • Parameter value
    • zur Vorbelegung des Textes
  • Passwort-Felder
    • zeigen eingegebene Zeichen nur als * an
    • erzeugt mit type="password"
• Buttons zum Abschicken und Zurücksetzen:
  • mit <button> erzeugt
  • Inhalt des Tags wird Beschriftung
    
  • Abschicken aller Formular-Daten
    • type="submit" (default)
    • muss in einem Formular auftauchen (sinnvollerweise)
  • Zurücksetzen aller Formular-Daten
    • type="reset"
    • kann in einem Formular auftauchen
    • in der Regel überflüssig
• Ein komplizierteres Beispiel:
  • forms2.html (HTML-Quelle)
  • enthält die wichtigsten Formular-Elemente
  • übersichtliche Anordnung
• Auswahllisten:
  • Listen zur Auswahl eines oder mehrerer Elemente
  • definiert durch <select> ... </select>
  • Listeneinträge mit <option> Listentext
  • Parameter size
    • Zahl der gleichzeitig sichtbaren Elemente
    • Rest ggf. über Scrollbar erreichbar
    • size = 1 → aufklappbare Liste (drop-down)
  • Parameter multiple
    • mehr als ein Element darf ausgewählt werden
    • Default: nur ein Element
  • Parameter name
    • Name für das auswertende Programm
    • bei multiple für Auswertung mit PHP [] (= mehrere Werte) anhängen
• Checkboxen:
  • Knöpfe zur (Mehrfach-)Auswahl
  • definiert durch <input>-Tag und Attribut type="checkbox"
  • Parameter name
    • Name für das auswertende Programm
    • für Auswertung mit PHP [] anhängen
    • alle Checkboxen mit gleichem Namen bilden eine Gruppe
  • Parameter value
    • Wert, der für gedrückten Knopf übergeben wird
  • Tag label
    • fasst Checkbox und Beschriftung zusammen
    • dadurch auch Text wird anklickbar
• Radiobuttons:
  • Menge von Knöpfen, von denen genau einer gedrückt ist (außer evtl. am Anfang)
  • definiert durch <input>-Tag und Attribut type="radio"
  • Parameter name und value wie bei Checkboxen
  • Parameter name ohne []
• Textfelder:
  • Eingabefeld für mehrzeilige Texte
  • definiert durch <textarea></textarea>
  • erzeugt eigenen Absatz
  • Parameter rows und cols
    • Zahl der Zeilen und Spalten
    • bei größerem Eingabetext automatisch Scrollbars
• Bemerkungen zur Formatierung:
  • Anordnung der Elemente durch normale HTML-Anweisungen
  • häufiges Hilfsmittel: unsichtbare Tabellen (ohne Rand)
  • andere Möglichkeit z.B. Gruppierung mit horizontalen Linien (<hr>)