pattern
Pattern und textbezogene Attribute

AttributBedeutung
pattern="[1-9]{5}"Definition der Eingabemöglichkeit. Es gelten für das Pattern die "Regular Expressions" (RegEx.) [A-X]{3} z.B. erlaubt genau drei Großbuchstaben bis auf Y und Z. [A-Za-z]{3} z.B. erlaubt genau drei beliebige Groß und Klein-Buchstaben. [1-9]{5} erlaubt genau 5 beliebige Zahlen. [1-9]{1-3} erlaubt beliebige Zahlen mit einer, zwei oder drei Dezimal-Stellen.
readonlyKann nur gelesen werden
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
placeholder=""Platzhalter der nicht übertragen wird.

Attribute Date und URL

AttributBedeutung
type="date"Datum in der Schreibweise YYYY-MM-TT (1980-09-12)
type="month"Monatsangabe in der Schreibweise YYYY-MM (2012-12)
type="week"Wochenangabe in der Schreibweise YYYY-w00 (2014-w16)
type="time"Zeitangabe in der Schreibweise hh-mm-ss (16:24:56)
type="url"Internetadresse

HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<input>Eingabe-Element das über das Attribut type="..." näher spezifiziert werden kann.
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.

Interessante Pseudo-Elemente

CSSBedeutung
:focusFokussierte Eingabeelement, also gerade aktive Elemente.
:invalidAussehen von Eingabeelementen falschen Werten.
:validWählt valide Eingabeelemente an.
::input-placeholder Platzhalter Text in Formular-Elementen.

[table “QA-Form” not found /]
min, max & steps
Attribute für Number & Range-Slider

AttributBedeutung
type="range"Skala um innerhalb eines definierten Wert zu wählen
type="number"Liste um eine Anzahl einzugeben
max="10"Maximaler Wert
min="1"Mindestwert
step=""Schritte in denen die Werte erhöht werden können für type="number".
value=""Zugewiesener Wert der tatsächlich übertragen wird. Wichtig für die Typen checkbox, radio und range.

Allgemeine Attribute

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite

HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<input>Eingabe-Element das über das Attribut type="..." näher spezifiziert werden kann.
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.

[table “QA-Form” not found /]
output
Outputbezogene Attribute für <form>

AttributBedeutung
oninput= "x.value= parse...(a.value) + parse...(b.value)"Bereitet die Ausgabe im <output> vor. Man definiert den Namen für das <output> und die gewünschte Berechnung. Wenn mit Zahlen gearbeitet wird kommt entweder parseInt für ganze Zahlen oder parseFloat für die Ausgabe mit Kommastellen in Frage. Es müssen außerdem der NAME der Inputs angegeben werden, mit deren Werten gerechnet wird. Dies ist Javascript. Im später verwendeten <output> wird nichts berechnet. <output> ist lediglich der semantisch richtige Ort für die Ausgabe dieser Kalkulation. Vorsicht: Wenn Javascript deaktiviert ist, dann wird auch nichts kalkuliert.
.toFixed(2)Gibt die Werte immer auf 2 Kommastellen gerundet aus.

Attribute für <output>>

AttributBedeutung
for="a b"Im <output> müssen die NAMEN der zu verarbeiteten Inputs angegeben sein.
name='x'Der Name des <output> muss dem im oninput= Attribut des <form> entsprechen.

[table “QA-Form” not found /]
action & submit
action & submit

AttributBedeutung
action="..."Ist ein Attribut der <form>. Definiert den nächsten Schritt nach dem Klicken des Senden-Buttons. Z.B. die PHP-Funktion die dann aufgerufen wird. Aus Sicherheitsgründen sind die Beispiele als Download verfügbar.
type="submit"Button mit der Funktion senden. Führt die bei <form action="..." definierte Aktion aus.

Download

TutorialBeschreibungInhalt

Form2PHP.zip (8.9 KiB)

Prüfung der E-Mail mit HTML5 Attribut Pattern sowie Javascript. Die Daten von dem Formular werden an PHP übergeben. Anzeige der übergebenen Daten. Dies ist die Grundlage für die weiteren Schritte.index.html
style.css
check.js
send.php

Form2Mail.zip (10.1 KiB)

Prüfung der E-Mail mit HTML5 Attribut Pattern sowie Javascript. Die Daten von dem Formular werden an PHP übergeben. Versenden einer E-Mail mit dem Inhalt der Formular-Daten und Anzeige der gesendeten Daten.index.html
style.css
check.js
send.php

Form2SQL.zip (11.6 KiB)

Entspricht Form2Mail allerdings werden Anrede, Vorname, Nachname und E-Mail mit PHP und SQL in eine Datenbank eingetragen.index.html
style.css
check.js
send.php
php2sql.php (include)
SQL Create DATABASE
SQL CREATE TABLE

Damit Form2PHP und Form2Mail funktionieren, musst Du diese Daten auf einem Server mit PHP laufen lassen. Für ein Versenden von E-Mails muss natürlich die Mail Funktion auf dem Server aktiviert sein. Für Form2SQL muss natürlich zu erst die Datenbank und Tabelle auf dem Server angelegt werden. Die SQL Befehle dafür stehen dabei.

Empfohlene Software

SoftwareBedeutung
Google ChromeIdealerweise prüfst Du deine Arbeit in mehreren aktuellen Browsern. Bei dem Google Chrome Browser sind die eingebauten Entwickler-Tools schlicht die derzeit Besten. Gerade für Responsive Webdesign, also die Gestaltung für möglichst viele Geräten gleichzeitig.
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.
XamppKostenloser Server für alle Betriebssysteme um PHP und Datenbaken zu nutzen und lokal auf dem eigenen Computer zu entwickeln.
FirebugBei der Arbeit mit Quellcode ist es sehr hilfreich zu prüfen was im Browser ankommt. Firebug zeigt den CODE für HTML, CSS und Javascript und bietet auch die Möglichkeit diesen temporär in der Vorschau zu ändern. Firebug ist eine kostenlose Erweiterung für den Firefox Browser. Es gibt Firebug auch für Chrome. Für Safari sind vergleichbare Webentwickler-Tools eingebaut.
FileZillaWenn eine Webseite auf einen Webserver hochgeladen werden muss, wird meist das File-Transfer-Protokoll (FTP) benutzt. Um z.B. Daten auf einen Server im Internet zu spielen benötigst Du eine FTP Software. Filezilla ist eine sehr gute und kostenlose Lösung für alle Betriebssysteme. Mit dem FTP Programm lassen sich auch Lese- und Schreibrechte festlegen. Ebenso andere Sicherheitsaspekte wie .htaccess insofern dies nicht über den Dienst des Webserver gesteuert wird.
Adobe Photoshop

Gimp
Wer Adobe Photoshop zur Verfügung hat, der benutzt natürlich den weltweiten Branchen-Standard für Bildbearbeitung. Lösbar sind die meisten einfachen Anforderungen allerdings auch mit dem kostenlosen Gimp. In der Arnold-Bode-Schule arbeiten wir aus professionellen Gründen mit Adobe und haben das auf jedem Computer.

► Weitere Infos

Externe Quellen

Kompatibilität

http://caniuse.com/#feat=forms

Die grundsätzlichen Formular Input-Elemente wie Textfelder, Auswahllisten, Radio-Buttons, Checkboxen etc. sind sehr gut untersützt. Allerdings sind Vendor-Prefixe bei einigen Sub-Elementen zu beachten.


W3C 4.10 Forms

http://www.w3.org/TR/html5/forms.html

Original Spezifikation der W3C für Formulate des HTML 5 Standard aus dem Jahr 2014.


Formulare auf selfhtml.wiki

http://wiki.selfhtml.org(...)Formulare

Umfangreiche Erklärung in deutscher Sprache.


Formulare für mobile Endgeräte optimieren

http://webkrauts.de/(...)formulare-fuer-mobile-geraete-optimieren

Lesenswerter Artikel für die Eigenheiten der Smartphones und Tabletts bei Formularen in deutscher Sprache.


Individuelle Checkbox & Radio Inputs

http://maddesigns.de/individuelle-checkbox(...)

Es ist nicht so ohne weiteres Möglich die Optik von Checkboxen etc. zu ändern. Dieser Artikel in deutscher Sprache beschreibt wie es geht und was dabei zu beachten ist.


Checkbox vs. Radio

http://www.nngroup.com(...)checkboxes-vs-radio-buttons/

Wann nimmt man eigentlich Checkboxen und wann die Radio-Buttons? Bei der nngroup sind 13 Richtlinien für den Umgang mit diesen Input-Elementen formulert. Lesenswerter Artikel in englischer Sprache.


Text Input Effects

http://tympanus.net/(...)/TextInputEffects

Sehr schöne Anregungen für die Gestaltung von Text-Inputs in Formularen mit Hilfe von Transition und Pseudo-Classes sowie Pseudo-Elements.


Regular Expressions Tutorial

http://regexone.com/

Interaktive Tutorials um Regular Expressions zu üben in englischer Sprache. "Learn Regular Expressions with simple, interactive exercises."


Beispiele Regular Expressions für HTML Pattern

http://html5pattern.com

Grundsätzlich kann man für die Kontrolle von Inputs die gleichen Regular Expressions (Regex) wie im Javascript benutzen. Allerdings ist der große Teil der Anforderungen die wir im HTML Attribut pattern nutzen im Vergleich zu Suchabfragen noch relativ überschauber. Die Webseite zeigt viele sehr praktische Beispiele für typische HTML Pattern.


Editor für Formulare

http://www.wufoo.com

Editor für die Erstellung von Formularen. Empfehlenswert ist es dennoch den grundlegenden Code zu kennen.


parseInt vs. parseFloat

http://www.peterkroener.de/javascript-parseint-vs-parsefloat/

Ausführlicher Artikel in deutscher Sprache zum Thema parseInt und parseFloat,


Formular Styling

http://wtfforms.com

Ausführlicher Artikel in englischer Sprache zum Thema Styling von Formularen mit CSS.

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit