Standardista

CSS3, JavaScript and HTML5 explained

HTML5 Web Forms & Browser Support

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  
novalidate 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                

<form>

The <form> element creates a form for user input to pass user entered data to the server. Note that the accept attribute is no longer included in HTML 5.

<elements> / attributes Values IE6 IE7 IE8 Firefox 3.6 Safari 4 Chrome Opera 10.5
<form>  
accept-charset charset(s)
action URL
autocomplete on | off              
enctype mime type
method get | post |
put | delete              
name unique name
novalidate novalidate Χ Χ Χ Χ Χ Χ Χ
target _blank | _self | _parent | _top | winname

The reason there appears to be so much HTML5 support for the <form> element is that only two new attributes were added to the form element in HTML 5: autocomplete and novalidate.

autocomplete takes the values off | on. When ‘on’, the browsers stores the form’s input values, to auto-fill the form when the user returns. “off” tells the browser to not store user input.

novalidate, if set (and supported), tells the browser to not validate the form upon submission.

 

<fieldset>

The <fieldset> element is not new to HTML 5, but it does have new attributes – disabled, form, and name. The <fieldset> element is used to group together related elements in a form, drawing a box around the encompassed elements. The options <legend> element, if included as the first child of the <fieldset>, display a caption within the box border.

<fieldset name="car_elements" disabled>
 <legend> 
    <label>
   <input type="checkbox" name="cars"> Use Car Finder
    </label> 
  </legend>
  <p><label>Make: <input name=make  type="text" required></label></p>
  <p><label>Year: <input name=year required pattern="[-0-9]{4}"></label></p>
</fieldset>

Browser support of <fieldset> and its HTML 5 attributes

<elements> / attributes   IE6 IE7 IE8 Firefox 3.6 Safari 4 Chrome Opera 10.5
<fieldset>  
disabled   Δ Δ Χ Χ Χ
form              
name              

Weirdly, IE6 actually supports something Mozilla and Webkit don’t. ‘disabled’ in IE6 and Opera disables all form elements within the fieldset. In IE7 and IE8, the attribute only disables form elements in the <legend>.

<label>

The <label> defines a label for a form element, providing enhanced usability. When used in conjunction with radio or check boxes, clicking on the label text toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

<elements> / attributes   IE6 IE7 IE8 Firefox 3.6 Safari 4 Chrome Opera 10.5
<label>  
form id of form
for id of form element

<input>

HTML5 defines 13 new values for the type attribute of the HTML <input> element (search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, and color). Currently, Opera has the best support, with some decent support from Webkit, especially for mobile.

<elements> / attributes input type values IE6 IE7 IE8 FF3.6 Saf4 Saf5 Chrome Opera 10.5
<input>    
accept file only mime types Χ
alt image only  
autocomplete most on | off Χ Χ Χ Χ Χ Χ Χ
autofocus   autofocus Χ Χ Χ Χ
checked radio & checkbox checked
disabled   disabled
formenctype sumbit buttons enctypes              
formaction url
formmethod methods
formtarget targets
form in spec??? form Χ Χ Χ Χ Χ Χ Χ
height image  
list texttypes   Χ Χ Χ Χ Χ Χ Χ
max date, range, #s   Χ Χ Χ Χ Χ
maxlength texttypes  
min dates & range   Χ Χ Χ Χ Χ
multiple email & file   Χ Χ Χ Χ
name in spec???  
novalidate in spec???                 Χ
pattern texttypes   Χ Χ Χ Χ Χ
placeholder texttypes *see js Χ Χ Χ Χ
readonly    
required     Χ Χ Χ Χ Χ
size texttypes  
src image  
step date, range, #s   Χ Χ Χ Χ Χ  
type required  
Values     IE6 IE7 IE8 FF3.6 Saf4 Saf5 Chrome Opera 10.5
"button" button  
"checkbox" checkbox  
"color" color picker   Χ Χ Χ Χ Χ Δ Δ Χ
"date" calendar   Χ Χ Χ Χ Χ Δ Δ
"datetime" calendar   Χ Χ Χ Χ Χ Δ Δ
"datetime-local" calendar   Χ Χ Χ Χ Χ Δ Δ
"email"   text Χ Χ Χ Χ Χ Δ
"file" input + button  
"hidden" invisible  
"image"    
"month" calendar   Χ Χ Χ Χ Χ Δ Δ
"number"     Χ Χ Χ Χ Δ Δ Δ
"password" obscured  
"radio" radio  
"range" slider   Χ Χ Χ Χ Δ Δ
"reset" button  
"search" search field   Χ Χ Χ Χ Χ
"submit" button  
"tel"   text Χ Χ Χ Χ Χ
"text" (default value)    
"time" calendar   Χ Χ Χ Χ Χ Δ Δ
"url"   text Χ Χ Χ Χ
"week" calendar   Χ Χ Χ Χ Χ Δ Δ

You’ll note that I changed some of the values from No to Iffy support because while some browsers don’t support the new features that go with email, url, tel, etc., input types, they do actually support the element. When a type is not supported or understood, the browsers interpret it as the default, which is text, which works fine. Un-understood types are treated as ‘text’ and don’t provide any new features. Because browsers old don’t break with these new types, you can go ahead and start using them now.

<input> attributes by type & Browser Support

TYPE ⇒

Attribute

Text, search, url, tel Email Password Dateandtime
Date,
Month,
Week,
Time
Dateandtime-local,
number
range color Checkbox, radio file
accept WK, O,
FF, IE
autocomplete O O O O O O O
autofocus WK, O WK, O WK,O WK, O WK, O WK, O WK, O WK, O
checked WK, O,
FF, IE
disabled WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
Form O O O O O O O O
list WK, O WK, O WK, O WK, O WK, O WK, O
max O, WK O, WK O, WK
maxlength WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
min O, WK O, WK O, WK
multiple FF, WK, IE FF, WK
Name WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
pattern WK, O WK, O WK, O
placeholder WK WK WK
readonly WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
required WK, O WK, O WK, O WK, O WK, O WK, O WK, O
size WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
step O, WK O, WK O, WK
checked WK, O,
FF, IE
value WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
  • WK = Webkit (tested Safari 5)
  • O = Opera (10.5 on Mac)
  • FF = Firefox (3.6.3 on Mac)
  • IE = Internet Explorer (IE8 on XP)

Browsers
that don’t support the specific type attribute may still support other attributes in the
input as the browser may support attributes on the text input type (such as maxlength or size), and will therefore support those
attributes on a type it doesn’t support, as the input will default to text
type. For example, while IE and FF don’t currently support the email type, they
do support the multiple attribute on that type, since
they will accept a text type including space separated email addresses.

 

With some input types, even if the browser does support it, you can’t tell. The big difference in support comes to the iPhone: when an input has type email, url or tel, the iPhone provides a more input type suitable keyboard for user data entry.

JavaScript for placeholder attribute functionaility until supported by browsers

$("input[placeholder]").each(function(){
  if($(this).val()==""){
    $(this).val($(this).attr("placeholder"));
    $(this).focus(function(){
      if($(this).val()==$(this).attr("placeholder")) $(this).val("");
    });
    $(this).blur(function(){
      if($(this).val()==""){
         $(this).val($(this).attr("placeholder"));
      }
     });
  }
});

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.

<datalist>

The <datalist> is a list of <options>. The <datalist> is used in conjunction with an <input> element, defining which values the input element can take. When used, the <datalist> is not visible to the user, but rather is associated with the <input> element thru the <input>’s ‘list’ attribute that takes as its value the id attribute value of the datalist. The <datalist> defines what values are valid for that <input>.

In the end, this is very similar to a select list, except that the user is not limited to the suggested values.

<label>Enter a car manufacture: <input type="text" name="make" list="makes">
    <datalist id="makes">
    <option value="Toyota" /> <!-- works -->
    <option>Honda</option> <!-- doesn't work in Opera -->
   <option value="Hummer" label="Stupid Ass Gas Guzzler"> <!-- not right -->

   <!-- add more -->
    </datalist>
    </label>

<output>

New in HTML 5, the <output> tag defines different types of output, such as output written by a script.

The ‘for’ attribute takes the ids of the other elements for which it is defining the outputs. The’form’ attribute takes as it’s value the form’s name with which the <output> element is associated. The ‘name’ attribute is a unique name for the element that defines the output element when the form gets submitted.

8 Responses to “HTML5 Web Forms & Browser Support”

  1. 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.

  2. Colin Snover says:

    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,

    • Estelle Weyl says:

      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.

  3. [...] standardista Estelle Weyl enlivened a recent HTML5 Meetup with her summary of the neat stuff we could use if only everybody used, say, the latest version of [...]

  4. [...] One of the aspects that have been greatly improved in HTML5 are the forms, including new input types , new form elements and some new form and input attributes.  As with the previous elements that we have seen the main problem is adoption and the older browsers. [...]

  5. [...] support for web video, audio, and drag & drop, there has been precious little improvement in Web Forms support. Similar to Safari 5, the beta release has removed some support from :link and :visited. In über [...]

  6. [...] HTML5 Web Forms and Browser Support [...]

  7. [...] browser support isn’t all that good with these new inputs, however in most cases the fallback is a text box. [...]

Leave a Reply