Formularelemente in HTML5
Kommentare

Microsoft MVP Sheo Narayan erklärt seinen Lesern, wie sie bestimmte Formularelemente in HTML5 erzeugen können. Darunter sind unter anderem Datumsangaben, Dropdown-Listen oder die Möglichkeit zum Hochladen

Microsoft MVP Sheo Narayan erklärt seinen Lesern, wie sie bestimmte Formularelemente in HTML5 erzeugen können. Darunter sind unter anderem Datumsangaben, Dropdown-Listen oder die Möglichkeit zum Hochladen mehrerer Dateien.

Eine Textbox mit einem beliebigen Platzhalter, in diesem Falle „Please enter your name“, lässt sich erzeugen durch .
Obligatorisch wird die Box dadurch, dass man den Platzhalter als „required“ definiert: .

HTML5 bietet Entwicklern außerdem die Option, direkt im Browser nachzuprüfen, ob die vom Nutzer im Formular angegebene E-Mail bzw. URL gültig ist. Schreiben Sie hierzu:
für eine E-Mail, bzw. für eine URL .

Auch die Auswahlmöglichkeiten für Nutzer lassen sich mit Hilfe von HTML5 beeinflussen. Eine Farbe lässt sich auswählen, indem man dem Input-Typ das Attribut „color“ gibt: .
Das Attribut „number“ erfordert die Eingabe einer Zahl. Gibt der User in das Feld einen Text ein, wird das Feld vom Browser als leer betrachtet: .

Möchte man den Nutzer dazu zwingen, Zahlen aus einem bestimmten Spektrum auszuwählen, bestimmt man den Maximal- und einen Minimalwert im Input-Type „number“: .
Einen Schieberegler, mit dem Nutzer einen Wert auf einer Skala auswählen können – in unserem Falle auf einer Skala von 0 bis 50 – erzeugt man mit dem folgenden Snippet. „Step“ steht hierbei für den Wert, den der Schieber bei einer Bewegung durch den Nutzer macht. .

Möchte man, dass Webseiten-Besucher bei Bearbeitung des Formularelements einen Monat wählen können, so definiert man das durch: .
Ein bestimmtes Datum lässt sich auswählen durch:
und eine Woche durch: .

Um den Besuchern zu ermöglichen, eine Datei hochzuladen, definiert man den Input-Typ als „file“. Ergänzt man das Ganze zusätzlich durch das „multiple“-Attribut, können mehrere Dateien hochgeladen werden: .

Zuletzt erklärt Narayan, wie man eine Dropdown-Liste zur Eingabe von Text in eine Box erstellt. Diese Funktion kann man mit folgendem Code erreichen:

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -