HTML5 Formulare. HTML5 Formulare Seite Seite 1 von 7 Florian Bauer

Größe: px

Ab Seite anzeigen:

Download "HTML5 Formulare. HTML5 Formulare Seite Seite 1 von 7 Florian Bauer"

Minna Hoch
vor 8 Jahren
Abrufe

1 Formulare Formulare Seite Seite 1 von 7 Florian Bauer

2 Inhalt... 3 Grundgerüst... 3 Formularaufbau... 3 Formularfelder... 3 Textfeld... 3 Passwort... 3 Textbereich... 4 Select-Box... 4 Multi-Select-Box... 4 Optionsfelder... 4 Checkbox... 4 Dateiupload... 4 Absenden-Button... 4 Allgemeine Attribute... 5 Zusätzliche Funktionen... 5 Label... 5 Fieldset... 5 Neue Felder Feld... 5 URL-Feld... 6 Telefonnummern-Feld... 6 Zahlenfeld... 6 Such-Feld... 6 Slider... 6 Colorpicker... 6 Datum... 6 Zeit... 7 Zeit und Datum... 7 Zeit und Datum... 7 Fortschrittsbalken... 7 Formulare Seite Seite 2 von 7 Florian Bauer

.. 5 Zusätzliche Funktionen... 5 Label... 5 Fieldset... 5 Neue Felder... 5 E-Mail-Feld... 5 URL-Feld... 6 Telefonnummern-Feld... 6 Zahlenfeld.

Formulare HTML 5 ist seit ca. 2009 das neue HTML (Hypertext Markup Language), welches schon von vielen neuen Browsern unterstützt wird.

3 Formulare HTML 5 ist seit ca das neue HTML (Hypertext Markup Language), welches schon von vielen neuen Browsern unterstützt wird. Mit ist es sehr einfach möglich, die Webseite benutzerfreundlicher und moderner zu gestalten. Achtung: Nicht alle Browser unterstützen auch alle -Erneuerungen! Grundgerüst So sieht ein Grundgerüst aus: <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Formularaufbau <form action="mailto:bafl@gmx.net" method="post" enctype="text/plain"> Vorname: <input type="text" name="vorname"><br/> <input type="submit" value="absenden"> </form> Die Methode post überträgt die Daten im Hintergrund. Geeignet bei vielen und vertraulichen Daten. Die Methode get überträgt die Daten im Klartext in der URL (z.b. Google). Deswegen nicht für vertrauliche Daten geeignet. Die Zeichenanzahl ist auf 255 Zeichen beschränkt. Formularfelder Textfeld HTML4 <input type="text" value="vorname" name="vorname" > <input type="text" placeholder="vorname" name="vorname" > Passwort HTML4 <input type="password" value="passwort" name="passwort"> <input type="password" placeholder="passwort" name="passwort"> Formulare Seite Seite 3 von 7 Florian Bauer

Grundgerüst So sieht ein Grundgerüst aus: <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Formularaufbau <form action="mailto:bafl@gmx.

4 Textbereich <textarea cols="50" rows="10" name="textbereich">text hier eingeben!</textarea> Select-Box <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="vw">vw</option> <option selected value="audi">audi</option> </select> Multi-Select-Box <select multiple> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="vw">vw</option> <option selected value="audi">audi</option> </select> Optionsfelder <input type="radio" name="klasse" value="4a"> 4a<br> <input type="radio" name="klasse" value="4b"> 4b<br> <input type="radio" name="klasse" value="4c"> 4c zusätzliches Attribut: checked Checkbox <input type="checkbox" name="zutaten" value="milch"> Milch<br> <input type="checkbox" name="zutaten" value="eier"> Eier<br> <input type="checkbox" name="zutaten " value="mehl"> Mehl zusätzliches Attribut: checked Dateiupload <input type="file" name="datei"> zusätzliche Attribute für : accept="audio/*", accept="video/*", accept="image/*", accept="text/*" und multiple zum mehrfachen File-Upload. Absenden-Button HTML4 <input type="submit"> value="absenden"> <button type="submit">absenden</button> Formulare Seite Seite 4 von 7 Florian Bauer

Multi-Select-Box <select multiple> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="vw">vw</option> <option selected value="audi">audi</option> </select>

5 Allgemeine Attribute Zusätzlich gelten für alle Formularfelder folgende Attribute: maxlength="4" autofocus readonly tabindex="1" autocomplete="off" autocomplete="on" Beschränkt die max. Anzahl der Zeichen. Einsatzgebiet: PLZ-Feld Cursor springt bei Seitenaufruf sofort in dieses Feld. Das Feld kann nicht bearbeitet werden. Bestimmt die Reihenfolge der Cursorsprünge, wenn die Tabulator-Taste gedrückt wird. Reihenfolge der Sprünge entspricht der aufsteigenden Reihenfolge der Tab-Indizes. Regelt die Autovervollständigung. Einsatzgebiete für off : bei Passwort-Eingabefeldern, oder bei erneut eingeben. required Dieses Feld muss ausgefüllt werden. Zusätzliche Funktionen Label Mit dem Tag <label for=" "> und dem Attribut id=" " wird eine Feldbeschreibung einem Textfeld zugeordnet. <label for="vname">vorname: </label><input type="text" name="vorname" id="vname"> Fieldset Mit <fieldset> können Elemente optisch gruppiert werden und mit <legend> benannt werden. <fieldset> <legend>gruppierung</legend> Vorname: <input type="text"><br/> Nachname: <input type="text"><br/> Username: <input type="text"><br/> </fieldset> Neue Felder -Feld In manchen Browsern wird auf Korrektheit überprüft. Mobiltelefone blenden passende Tastatur ein. <input type=" " placeholder=" "> Formulare Seite Seite 5 von 7 Florian Bauer

Bestimmt die Reihenfolge der Cursorsprünge, wenn die Tabulator-Taste gedrückt wird. Reihenfolge der Sprünge entspricht der aufsteigenden Reihenfolge der Tab-Indizes. Regelt die Autovervollständigung.

URL-Feld Sieht wie normales Textfeld aus. Mobiltelefone blenden passende Tastatur ein. <input type="url" placeholder="url"> Telefonnummern-Feld Sieht wie normales Textfeld aus.

<input type="tel" placeholder="telefon"> Zahlenfeld Je nach Browser wird das Feld umformatiert <input type="number" placeholder="geburtsjahr" min="1900" max="2012"> Such-Feld Je nach Browser wird das

6 URL-Feld Sieht wie normales Textfeld aus. Mobiltelefone blenden passende Tastatur ein. <input type="url" placeholder="url"> Telefonnummern-Feld Sieht wie normales Textfeld aus. Mobiltelefone blenden passende Tastatur ein. <input type="tel" placeholder="telefon"> Zahlenfeld Je nach Browser wird das Feld umformatiert <input type="number" placeholder="geburtsjahr" min="1900" max="2012"> Such-Feld Je nach Browser wird das Feld abgerundet und ein Lösch-Kreuz erscheint bei der Eingabe <input type="search" placeholder="suchen"> Slider Je nach Browser wird das Feld als Slider dargestellt <input type="range" min="0" max="10" step="1"> Colorpicker Je nach Browser wird das Feld als Colorpicker dargestellt <input type="color"> Datum Je nach Browser wird das Feld als Datumsfeld dargestellt. <input type="date" placeholder="datum"/> Formulare Seite Seite 6 von 7 Florian Bauer

7 Zeit Je nach Browser wird das Feld als Zeitfeld dargestellt. <input type="time" placeholder="datum"/> Zeit und Datum In Browsern meist als normales Textfeld dargestellt. <input type="datetime" placeholder="datum und Uhrzeit"/> Zeit und Datum In Browsern meist als normales Textfeld dargestellt. <input type="month" placeholder="monat wählen"/> Fortschrittsbalken Wird von Browsern als Fortschrittsbalken angezeigt. <progress max="10" value="8"></progress> Formulare Seite Seite 7 von 7 Florian Bauer

<input type="datetime" placeholder="datum und Uhrzeit"/> Zeit und Datum In Browsern meist als normales Textfeld dargestellt.

Ähnliche Dokumente

HTML Formulare. Benutzerschnittstelle für interaktive Webseiten

HTML Formulare. Benutzerschnittstelle für interaktive Webseiten 1 HTML Formulare Benutzerschnittstelle für interaktive Webseiten Literatur und Links 2 Literatur: Coar, Ken; Bowen, Rich: Apache-Kochbuch. 2004 HTML: kein Buch oder irgend eins für Einsteiger, z. B. Münz,