HTML5 Web Forms
View more presentations from estellevw
HTML 5 Forms support in Modern Browsers and IE
Note: This is only valid thru input type. After that, I still need to do more testing and the grid is just a placeholder. Safari 5 is out. THat is not yet included in this. Opera seems to have reverted, and no longer supports placeholder, so I have to redo this. Feel free to use this as a general guideline, but not fact at the moment. EEK!
<elements> / attributes / “values” | IE6 | IE7 | IE8 | FF3.6 | Saf4 | Saf5 | Chrome | Opera 10.5 | |
---|---|---|---|---|---|---|---|---|---|
<elements> / attributes / “values” | IE6 | IE7 | IE8 | FF 3.6 | Saf4 | Saf5 | Chrome | Opera 10.5 | |
<form> |
√ | √ | √ | √ | √ | √ | √ | √ | |
accept-charset |
√ | √ | √ | √ | √ | √ | √ | √ | |
action |
√ | √ | √ | √ | √ | √ | √ | √ | |
autocomplete |
Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | |
enctype |
√ | √ | √ | √ | √ | √ | √ | √ | |
method |
√ | √ | √ | √ | √ | √ | √ | √ | |
name |
√ | √ | √ | √ | √ | √ | √ | √ | |
novalidate |
Χ | ||||||||
target |
√ | √ | √ | √ | √ | √ | √ | √ | |
<fieldset> |
√ | √ | √ | √ | √ | √ | √ | √ | |
disabled |
√ | Δ | Δ | Χ | Χ | Χ | Χ | √ | |
form |
√ | ||||||||
name |
√ | ||||||||
<label> |
√ | √ | √ | √ | √ | √ | √ | √ | |
form |
√ | √ | √ | √ | √ | √ | √ | √ | |
for |
√ | √ | √ | √ | √ | √ | √ | √ | |
<input> |
√ | √ | √ | √ | √ | √ | √ | √ | |
accept |
file only | √ | √ | √ | √ | √ | √ | √ | Χ |
alt |
image only | √ | √ | √ | √ | √ | √ | √ | √ |
autocomplete |
most | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ |
autofocus |
Χ | Χ | Χ | Χ | √ | √ | √ | √ | |
checked |
radio & checkbox | √ | √ | √ | √ | √ | √ | √ | √ |
disabled |
√ | √ | √ | √ | √ | √ | √ | √ | |
formenctype / formaction / formmethod / formtarget |
sumbit buttons | √ | |||||||
form |
in spec (back in) | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ |
height |
image | √ | √ | √ | √ | √ | √ | √ | √ |
list |
texttypes | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ |
max |
date, range, #s | Χ | Χ | Χ | Χ | Χ | √ | √ | √ |
maxlength |
texttypes | √ | √ | √ | √ | √ | √ | √ | √ |
min |
dates & range | Χ | Χ | Χ | Χ | Χ | √ | √ | √ |
multiple |
email & file | Χ | Χ | Χ | √ | √ | √ | √ | Χ |
name |
√ | √ | √ | √ | √ | √ | √ | √ | |
|
in spec??? | Χ | |||||||
pattern |
texttypes | Χ | Χ | Χ | Χ | Χ | √ | √ | √ |
placeholder |
texttypes | Χ | Χ | Χ | Χ | √ | √ | √ | Χ |
readonly |
√ | √ | √ | √ | √ | √ | √ | √ | |
required |
Χ | Χ | Χ | Χ | Χ | √ | √ | √ | |
size |
texttypes | √ | √ | √ | √ | √ | √ | √ | √ |
src |
image | √ | √ | √ | √ | √ | √ | √ | √ |
step |
date, range, #s | Χ | Χ | Χ | Χ | Χ | √ | √ | |
type |
required | √ | √ | √ | √ | √ | √ | √ | √ |
"button" |
button | √ | √ | √ | √ | √ | √ | √ | √ |
"checkbox" |
checkbox | √ | √ | √ | √ | √ | √ | √ | √ |
"color" |
color picker | Χ | Χ | Χ | Χ | Χ | Δ | Δ | Δ |
"date" |
calendar | Χ | Χ | Χ | Χ | Χ | Δ | Δ | √ |
"datetime" |
calendar | Χ | Χ | Χ | Χ | Χ | Δ | Δ | √ |
"datetime-local" |
calendar | Χ | Χ | Χ | Χ | Χ | Δ | Δ | √ |
"email" |
Χ | Χ | Χ | Χ | Χ | √ | Δ | √ | |
"file" |
input + button | √ | √ | √ | √ | √ | √ | √ | √ |
"hidden" |
invisible | √ | √ | √ | √ | √ | √ | √ | √ |
"image" |
√ | √ | √ | √ | √ | √ | √ | √ | |
"month" |
calendar | Χ | Χ | Χ | Χ | Χ | Δ | Δ | √ |
"number" |
Χ | Χ | Χ | Χ | Δ | Δ | Δ | √ | |
"password" |
obscured | √ | √ | √ | √ | √ | √ | √ | √ |
"radio" |
radio | √ | √ | √ | √ | √ | √ | √ | √ |
"range" |
slider | Χ | Χ | Χ | Χ | Δ | Δ | √ | √ |
"reset" |
button | √ | √ | √ | √ | √ | √ | √ | √ |
"search" |
search field | Χ | Χ | Χ | Χ | √ | √ | √ | Χ |
"submit" |
button | √ | √ | √ | √ | √ | √ | √ | √ |
"tel" |
Χ | Χ | Χ | Χ | √ | √ | √ | Χ | |
"text" (default value) |
√ | √ | √ | √ | √ | √ | √ | √ | |
"time" |
calendar | Χ | Χ | Χ | Χ | Χ | Δ | Δ | √ |
"url" |
Χ | Χ | Χ | Χ | √ | √ | √ | √ | |
"week" |
calendar | Χ | Χ | Χ | Χ | Χ | Δ | Δ | √ |
<button> |
√ | √ | √ | √ | √ | √ | √ | √ | |
action |
√ | ||||||||
autofocus |
Χ | Χ | Χ | Χ | √ | ||||
disabled |
√ | √ | √ | √ | √ | √ | √ | √ | |
enctype |
√ | ||||||||
form |
√ | ||||||||
method |
√ | ||||||||
name |
√ | √ | √ | √ | √ | √ | √ | √ | |
novalidate |
Χ | ||||||||
target |
√ | ||||||||
type |
√ | √ | √ | √ | √ | √ | √ | √ | |
"button" |
√ | √ | √ | √ | √ | √ | √ | √ | |
"reset" |
√ | √ | √ | √ | √ | √ | √ | √ | |
"submit" |
√ | √ | √ | √ | √ | √ | √ | √ | |
value |
√ | √ | √ | √ | √ | √ | √ | √ | |
<select> |
√ | √ | √ | √ | √ | √ | √ | √ | |
autofocus |
√ | √ | √ | √ | |||||
disabled |
√ | √ | √ | √ | √ | √ | √ | √ | |
form |
Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | |
multiple |
√ | √ | √ | √ | √ | √ | √ | √ | |
name |
√ | √ | √ | √ | √ | √ | √ | √ | |
size |
√ | √ | √ | √ | √ | √ | √ | √ | |
<datalist> |
Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | |
<optgroup> |
√ | √ | √ | √ | √ | √ | √ | √ | |
disabled |
√ | √ | √ | √ | √ | √ | √ | √ | |
label |
√ | √ | √ | √ | √ | √ | √ | √ | |
<option> |
√ | √ | √ | √ | √ | √ | √ | √ | |
disabled |
√ | √ | √ | √ | √ | √ | √ | √ | |
label |
√ | √ | √ | √ | √ | √ | √ | √ | |
selected |
√ | √ | √ | √ | √ | √ | √ | √ | |
value |
√ | √ | √ | √ | √ | √ | √ | √ | |
<textarea> |
√ | √ | √ | √ | √ | √ | √ | √ | |
autofocus |
Χ | Χ | Χ | Χ | √ | √ | √ | √ | |
cols (required) |
√ | √ | √ | √ | √ | √ | √ | √ | |
disabled |
√ | √ | √ | √ | √ | √ | √ | √ | |
form |
√ | ||||||||
maxlength |
√ | √ | √ | √ | √ | √ | √ | √ | |
name |
√ | √ | √ | √ | √ | √ | √ | √ | |
readonly |
√ | √ | √ | √ | √ | √ | √ | √ | |
required |
Χ | Χ | Χ | Χ | Χ | Χ | √ | √ | |
rows (required) |
√ | √ | √ | √ | √ | √ | √ | √ | |
wrap |
√ | √ | √ | √ | √ | √ | √ | √ | |
<output> |
√ | ||||||||
for |
√ | ||||||||
form |
√ | ||||||||
name |
√ |
Your description of how FIELDSET is displayed is not standard. The FIELDSET element allows authors to group thematically related controls and labels. How that is presented to the user, whether visually or otherwise, is not specified (nor should it be).
You wrote: “‘disabled’ in IE6 and Opera disables all form elements within the fieldset. In IE7 and IE8, the attribute only disables form elements in the . ”
In IE versions, the disabled property can be used to disable arbitrary elements. See MSDN:
http://msdn.microsoft.com/en-us/library/ms533732%28VS.85%29.aspx
We can test the behavior can seen on a FIELDSET with FORM. The behavior is identical.
In IE:
javascript: void(document.forms[0].disabled = true);
– do the nested form controls look greyed out in IE? Are they disabled or does they just look like it because the form is disabled? Did you try interacting with the controls?
Your readers may be assured that the controls can still be interacted with.
Hi,
Not sure how you did your testing here, but my tests show that Firefox 3.6 and all versions of IE do not support the maxlength property on <textarea>s, which makes me suspect that some of your other tests are not valid as well. Hope you can get it all fixed up, since it would be great to have a single resource to go to for HTML5 forms support.
Regards,
You’re likely right. I haven’t finished this post… am halfway done with the new <input> types. It is right up to what is detailed below. If you see the note “Note: this is as far as i’ve gotten at this point on explaining web forms. I do plan on coming back and revisiting this page in June 2010 to update.”, that’s up to where i have thoroughly tested. I should probably put that in bold. My sandbox is http://www.standardista.com/sandbox/html5formelements.html … that file is a test page and is constantly changing.