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
<input type=”text” id=”myName” placeholder=”Please enter your name” />.
Obligatorisch wird die Box dadurch, dass man den Platzhalter als “required” definiert:
<input type=“text“ id=“myName“ required placeholder=“Please enter your name“ />.
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:
<input name=“myEmail“ id=“myEmail“ type=“email“ required placeholder=“Enter email“ />
für eine E-Mail, bzw. für eine URL
<input type=“url“ id=“myUrl“ name=“myUrl“ />.
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:
<input type=“color“ id=“myColor“ name=“myColor“ name=“myColor“ />.
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:
<input type=“number“ name=“myNumber1“ id=“myNumber1“ />.
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“:
<input type=“number“ name=“myNumber“ id=“myNumber“ max=“10“ min=“1“ name=“myNumber“ />.
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.
<input type=“range“ id=“myRange“ name=“myRange“ min=”0” max=”50” step=”2” value=”0” onchange=”rangeOutput.value=this.value” />
<output name=”rangeOutput”ɬ</output>.
Möchte man, dass Webseiten-Besucher bei Bearbeitung des Formularelements einen Monat wählen können, so definiert man das durch:
<input type=“month“ id=“myMonth“ name=“myMonth“ />.
Ein bestimmtes Datum lässt sich auswählen durch:
<input type=“date“ name=“myDate“ id=“myDate“ />
und eine Woche durch:
<input type=”week” name=”myWeek” required id=”myWeek” />.
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:
<input type=“file“ multiple id=“myFiles“ name=“myFiles“ />.
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:
<input type=“text“ list=“listForMyList“ name=“myList“ id=“myList“ />
<datalist id=“listForMyList“>
<option value=“Option 1“>
<option value=“Option 2“>
<option value=“Option 3“>
<option value=“Option 4“>
<option value=“Option 5“>
