HTML5 Input Formular Formatierungen

Diese Seite enthält Beispiele für Formularsteuerelemente, die mit den neuen Werten für das Attribut "Typ" des Eingabeelements in HTML5 erstellt werden können.

Formularfeld So sieht es aus 
<form action="#">
 
<div class="text">
<label for="type-text">Text (text)</label>
<input type="text" name="type-text" id="type-text" contenteditable inputmode="text">
</div>
 

<div class="text">
<label for="type-search">Search (search)</label>
<input type="search" name="type-search" id="type-search" contenteditable inputmode="search">
</div>
 

<div class="text">
<label for="type-tel">Telephone (tel)</label>
<input type="tel" name="type-tel" id="type-tel" contenteditable inputmode="tel">
</div>
 

<div class="text">
<label for="type-url">URL (url)</label>
<input type="url" name="type-url" id="type-url" contenteditable inputmode="url">
</div>
 

<div class="text">
<label for="type-email">E-mail (email)</label>
<input type="email" name="type-email" id="type-email" contenteditable inputmode="email">
</div>
 

<div class="text">
<label for="type-datetime">Date and Time (datetime)</label>
<input type="datetime" name="type-datetime" id="type-datetime">
</div>
 

<div class="text">
<label for="type-date">Date (date)</label>
<input type="date" name="type-date" id="type-date">
</div>
 

<div class="text">
<label for="type-month">Month (month)</label>
<input type="month" name="type-month" id="type-month">
</div>
 

<div class="text">
<label for="type-week">Week (week)</label>
<input type="week" name="type-week" id="type-week">
</div>
 

<div class="text">
<label for="type-time">Time (time)</label>
<input type="time" name="type-time" id="type-time">
</div>
 

<div class="text">
<label for="type-datetime-local">Local Date and Time (datetime-local)</label>
<input type="datetime-local" name="type-datetime-local" id="type-datetime-local">
</div>
 

<div class="text">
<label for="type-number">Number (number)</label>
<input type="number" name="type-number" id="type-number" min="0" max="20" contenteditable inputmode="decimal">
</div>
 

<div class="text">
<label for="type-range">Range (range)</label>
<input type="range" name="type-range" id="type-range" min="0" max="100" contenteditable inputmode="none">
</div>
 

<div class="text">
<label for="type-color">Colour (color)</label>
<input type="color" name="type-color" id="type-color">
</div>
 

<div class="text">
<label for="type-file">File (multiple)</label>
<input type="file" multiple name="type-file" id="type-file">
</div>
 

<div class="submit-area">
<input type="submit" value="Submit" name="submit">
</div>
 
</form>