HTML5 Form Browser Support Test Page

Use this page to check support and appearance of HTML5 form controls for your browser. Play around with them and submit the form (using the submit or image control in the "buttons" section below) to see how the data is handled.

The form submits to itself using the GET method. So all the data is passed via the query string. A javascript on the page will evaluate the query string and display the submitted data conveniently.

Feel free to edit the document locally and play more around.

<form method=get action="" autocomplete=off><input type=hidden name=_charset_>

Common Text controls

Text:

<input name=text dirname=text.dir type=text maxlength=30 placeholder="Placeholder">

Textarea:

<textarea name=textarea dirname=textarea.dir placeholder="some multiline text" maxlength=200></textarea>

Password:

<input name=password type=password placeholder="your secret" autocomplete=on>

More text controls

Search:

<input name=search type=search placeholder="find something" autocomplete=on>

Email:

<input name=email type=email placeholder="local@netloc" multiple list=emails>

multiple accepted (comma separated)

Tel:

<input name=tel type=tel placeholder="phone number" pattern="[ \t\d+*/-]+">

pattern="[ \t\d+*/-]+"

URL:

<input name=url type=url placeholder="a http(s) URL" pattern="https?://.+">

pattern="https?://.+"

Special text controls

Color:

<input name=color type=color value="#FFC400" placeholder="#RRGGBB" list=colors>

Number:

<input name=number type=number placeholder="1 .. 10" min=1 max=10 pattern="[1-9]|10">

min=1 max=10 pattern="[1-9]|10"

Range:

<input name=range type=range placeholder="1 .. 10" min=1 max=10 value=3>

min=1 max=10

Date and time controls

Month:

<input name=month type=month value="1970-01" placeholder="YYYY-MM" list=months>

Date:

<input name=date type=date value="1970-01-01" placeholder="YYYY-MM-DD" list=dates>

there's a datalist assigned. Browsers don't seem to use it though, if they provide a date picker.

Datetime:

<input name=datetime type=datetime value="2011-12-31T18:00:00+01:00" placeholder="YYYY-MM-DDTHH:mm:SS+hh:mm" list=datetimes>

there's a datalist assigned. Browsers don't seem to use it though, if they provide a date picker.

Datetime Local:

<input name=datetime-local type=datetime-local value="2011-12-31T18:00:00" placeholder="YYYY-MM-DDTHH:mm:SS">

Time:

<input name=time type=time value="10:00" placeholder="hh:mm:ss" min="09:00" max="17:00" step=1800>

min="09:00" max="17:00" step="1800"

Week:

<input name=week type=week value="2012-W01" placeholder="YYYY-Wxx" pattern="\d\d\d\d-W\d\d">

pattern="\d\d\d\d-W\d\d"

Selection controls

Select:

<select name=select> <optgroup label="Lower Operators"> <option value="+">Plus</option> <option value="-">Minus</option> </optgroup> <optgroup label="Higher Operators"> <option value="*">Times</option> <option value="/">Divide</option> </optgroup> </select>

grouped with optgroup

Checkbox: Salami Cheese Tomato

<label><input type=checkbox name=checkbox value=salami> Salami</label> <label><input type=checkbox name=checkbox value=cheese> Cheese</label> <label><input type=checkbox name=checkbox value=tomato> Tomato</label>

Radio: 1 2 3

<label><input type=radio name=radio value=1> 1</label> <label><input type=radio name=radio value=2> 2</label> <label><input type=radio name=radio value=3> 3</label>

Upload controls

File:

<input type=file name=file multiple>

form method is "get", so only the filename(s) will be submitted. "multiple" flag is set.

Keygen: <keygen id=keygen name=keygen keytype=rsa>

<keygen> generates a private/public key pair, stores the private key in your browser and submits the public key. If you want to play with that, modify the html file. Beware: Browsers are buggy here. Sometimes they generate and store even if the control has no name or is disabled!

Buttons

<button type=button>Button element</button> <input type=button value="Button"> <input type=reset value="Reset"> <input type=submit value="Submit"> <input type=image src="html5-badge-h-solo.png" width=63 height=64 alt="Image" title="Image">

</form>