Formular

HTML - Formulare und Buttons


Autoren: A. Grella, D. Supper, Elektronikschule Tettnang.

Formulardaten werden zum Anmelden auf Internetseiten, zum Abschluss von Versicherungen, für die Websuche, für Onlinetest u.v.m. verwendet.

In dieser Einheit lernst Du das Erstellen von Formularen. Weiter erfährst Du alles wichtige über die Formatierung und den Einsatz von Buttons.

Formulare









Ein Formular dient der Erfassung von Daten:
<form>
  <label for="inputuser">Benutzer</label><br>
  <input type="text" id="inputuser" placeholder="username" name="user">

  <label for="inputpassword">Passwort</label><br>
  <input type="password" id="inputpassword" placeholder="password" name="word">

  <button type="submit">Senden</button>
  <button type="reset">Zurücksetzen</button>
</form>

Im Tag <form> ... </form> stehen die Formular­elemente <input></input> und die dazu­gehörigen Beschriftungen <label for="..."><label>. Ab­geschickt und zurück­gesetzt werden die Daten mit einem Button <button type="...">...</button>.

Formular­elemente und Attribute



Das <form>-Tag hat die drei Attribute: <form action="#top" method="get" id="kontakt"></form>.
Dabei wird das Ziel (action="/action-page.html"), die Übertragungsart (method="get": Daten als URL-Variablen, post: Daten im HTTP-Request) und die ID (id="kontakt")festgelegt. Mit der ID können bspw. Submitbuttons auch außerhalb des <form>-Tags plaziert werden.

Mit dem <label for="inputuser">-Tag wird das <input>-Tag beschriftet. Das Attribut forenthält den Identifier des Formularfeldes. Beim Anklicken der Beschriftung wird der Cursor in das entsprechende Eingabefeld gesetzt.

Das <input>-Tag ist ein einzeiliges universelles Formularfeld und wird nicht geschlossen.

Eine Texteingabe:
<label for="fname">Name:</label>
<input type="text" id="fname" name="fname">

Eine Datumseingabe:
<label for="datum">Datum:</label>
<input type="date" id="datum" name="datum">

Eine Zahleneingabe:
<label for="wert">Anzahl:</label>
<input type="number" id="wert" name="wert">

Eine Email-Adresse:
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail">

Eine Textnachricht:
<label for="nachricht">Ihre Nachricht:</label>
<textarea id="nachricht" name="nachricht" cols="20" rows="5"></textarea>
Man beachte, dass die Größe des mehrzeiligen Textfeldes festgelegt werden kann.









Checkbox und Radiobuttons



Wähle beliebige Zutaten:


Wähle ein Zahlungsmittel:

Die Checkbox:
<label><input type="checkbox" name="zutat" value="ananas">Ananas</label>
<label><input type="checkbox" name="zutat" value="kaese">Käse</label>
<label><input type="checkbox" name="zutat" value="oliven">Oliven</label>

Radiobuttons:
<input type="radio" id="vi" name="zahlmethode" value="Visa">
<label for="vi"> Visa</label>
<input type="radio" id="vi" name="zahlmethode" value="Mastercard">
<label for="mc"> Mastercard</label>
<input type="radio" id="pp" name="zahlmethode" value="PayPal">
<label for="pp"> PayPal</label>

Man beachte, dass Radiobuttons nur eine Auswahl zulassen, während bei einer Checkbox eine Mehrfachauswahl möglich ist.

Buttons gestalten



Zur Gestaltung von Buttons verwendet man das <button>-Tag:
<button>Mehr Infos »</button>

Button mit abgerundeten Ecken:
<button style="border-radius: 6px; padding: 10px 16px;">Mehr Infos »</button>

Button mit Link und Hintergrundfarbe:
<a href="#top"> <button style="padding: 10px 16px; line-height: 1.2; border-radius: 6px; background-color: #D1D1D1">Mehr Infos »</button></a>







Übung 1 Das Kontaktformular

In dieser Übung wird die bestehende Internetseite um ein Kontaktformular erweitert.

Internetseite mit Kontaktformular

  1. Teste die Formularfelder auf dieser Webseite.
  2. Erstelle die Seite /html/kontakt.html. Erweitere Navigationslinks auf allen Seiten.
  3. Erstelle auf der Seite ein Kontaktformular mit folgenden Eingabe­feldern:
    • Name
    • Email
    • Betreff
    • ein Textfeld für die Nachricht
    • eine Checkbox für Datenschutzhinweise
  4. Ergänze das Formularfeld mit dem Submitbutton. Die Daten sollen als URL-Variable übertragen werden. Überprüfe, ob die Daten korrekt übertragen werden, indem Du den Submit­button drückst und dann die URL kontrollierst. Dabei sollte für jedes Formularfeld ein Eintrag in der URL stattfinden.
  5. Formatiere das Layout der Formular­felder mit Hilfe von CSS in der externen CSS-Datei /lib/css/custom.css.
  6. Formatiere das Layout des Submitbuttons: abgerundeten Ecken und padding.
  7. Ergänze das Formular mit zwei Formularfeldern Deiner Wahl.
  8. Teste die Seite für eine Auflösung des Iphones 7.
    Strg +   ⇧  + I
    Füge für eine einwandfreie Darstellung, falls notwendig bedingte Trennzeichen ein.

<form>
  <label for="inputname">Name</label><br>
  <input type="text" id="inputname" placeholder="Name" name="user">

  <label for="inputmail">Email</label><br>
  <input type="email" ...

  ...

  <button type="submit">Senden</button>
</form>


Übung 2 Welche Aussage ist wahr?

Wähle die korrekten Aussagen aus.

Nenne zwei korrekte Tags aus dem Bereich der Formulare
Wähle zwei Antworten.

  1. input
  2. label
  3. user
  4. formular

Nenne zwei Attribute, welche zum input-Tag gehören.
Wähle zwei Antworten.

  1. type
  2. for
  3. name
  4. username

Nenne ein Wert des Attributs type.
Wähle eine Antwort.

  1. type="textarea"
  2. type="user"
  3. type="radio"
  4. type="username"

Benenne den Unterschied zwischen type="checkbox" und type="radio". Wähle eine Antwort.

  1. type="checkbox" hat mehr Eingabefelder als type="radio".
  2. Beide Felder sehen identisch aus.
  3. type="checkbox" hat sich gegenüber type="radio" durchgesetzt.
  4. type="checkbox" beliebig viele Auswahlen, type="radio" nur eine Auswahl.

Benenne mögliche Werte des Attributs method.
Wähle zwei Antworten.

  1. method="get"
  2. method="ups"
  3. method="post"
  4. method="take"

Benenne die zwei Übertragungsarten beim Absenden eines Formulars. Wähle zwei Antworten.

  1. URL-Verschlüsselung
  2. FTP-Request
  3. HTTP-Request
  4. URL-Variable

Wortliste und Satzbausteine



das For­mular, -e Ein Formular dient der Er­fassung von Daten und besteht aus min­destens einem Eingabe­feld.
das Eingabe­feld, -er Eingabe­felder, auch Formular­elemente gibt es für unter­schied­liche For­mate wie Text, Zahlen, Email, Pass­wörter, Datum u.v.m.
die Check­box, -en Eine Check­box besteht aus min­destens einem Auswahl­button. Dabei sind mehrere Optionen mög­lich.
der Radio­button, ~ ist ein Auswahl­button mit nur einer Option aus mehreren Optionen
der Submit­button, ~ wird für die Über­tragung der Daten be­nötigt