28 Feb 2013, 21:54

Forms in HTML5 - New attributes review

HTML5Doctor published an article on HTML5 forms introduction and new attributes ; which is in fact an except from the book "Beginning HTML5 & CSS3 : The web evolved"

The following attributes are being reviewed with examples and some tips & tricks or examples about their implementation ; some properties were implemented with javascript in the past, now you can do the same in full html5 :

  • placeholder : display some (helpful) text as long as field is empty
  • autofocus : when form is displayed, cell with autofocus is the 1st to be filled
  • autocomplete : allow/disallow autocomplete in forms based on the previous input you made
  • required : mark input field as required
  • pattern : allow to define a regexp pattern against which the input will be validated
  • list & datalist : it can be seen as an improved implementation of select/option
  • multiple : allow to manage a 1-n sequence of field : ex you can have a form with 1 to n email field to invite people with n being dynamic.
  • form : defied at a field level, will define to which form the field is related to
  • formaction : specifies the file or application that will submit the form but defined at a <input type=submit> or <input type=image> level.
  • formenctype : specifies how data will be encrypted but defined at a <input type=submit> or <input type=image> level.
  • formmethod : specifies the method used (GET/POST/PUT/DELETE)  but defined at a <input type=submit> or <input type=image> level.
  • formtarget :specifies the target window for the form results

You can see some other attributes like on the HTML5 Form attributes from W3Schools ;

  • novalidate, formnovalidate about input field validation,
  • min/max or step to manage range of date / numbers
  • height/width about input field size

If you add all this new with also the new input types attributes (email, image, date, range, etc), HTML5 forms are a significant improvement over forms we know today. The only limit so far is the implement of all these new standards in the modern browsers ;-)

[Edit 1] : Regarding the new attributes for input tpyes in form for HTML5, HTML5Doctor.com published a 2nd article after this one introducing these new attributes with an associated demo => HTML5 Form input types

[Edit 2] : Read also the "New guide to the new HTML5 form input types"