Implement Form API support for new HTML5 elements

Last updated on
6 October 2020

Overview

HTML5 forms are one of the areas where major changes and improvements have been made. There are 13 new element types and a number of new attributes that aim to improve both the user and developer experience of HTML forms. As part of the Drupal 8 HTML 5 Initiative, one of our goals is to add support for all of these elements and attributes. For detailed browser support information and demonstrations, visit http://wufoo.com/html5/.

Proposed plan

  1. Create an issue for the implementation of each element.
  2. Implement the elements in core, starting with the basic ones first.
  3. Look for legitimate uses for the elements in core and implement them.
  4. When issue is fixed, add issue to the HTML5 FAPI change set.

Point Person(s)

HTML5 Field Widgets

Name Issue(s)
color #1740438: Add a new color field type
email #1668332: Add an E-mail field type into core
number #1519852: Use the new number FAPI element for the number field textfield widget
range
tel #1740470: Add a new phone number field type
url #501434: Move Link/URL field type into core

HTML5 Input Types

Name Specification Issue(s)
color WHATWG | W3C #1445224: Add new HTML5 FAPI element: color
#1675000: Allow selecting an alpha channel for the color FAPI element
#1651344: Use color input type in the color.module
date WHATWG | W3C #1496632: Add new HTML5 FAPI Element : date
datetime WHATWG | W3C #1496644: Add new HTML5 FAPI Element : datetime
datetime-local WHATWG | W3C #1496652: Add new HTML5 FAPI Element : datetime-local
month WHATWG | W3C #1496682: Add new HTML5 FAPI Element : month
week WHATWG | W3C #1496686: Add new HTML5 FAPI Element : week
time WHATWG | W3C #1496708: Add new HTML5 FAPI Element : time
email WHATWG | W3C #1174620: Add new HTML5 FAPI element: email
number WHATWG | W3C #1174640: Add new HTML5 FAPI element: number
#1519720: Remove element_validate_integer() and element_validate_integer_positive() replace with number element type
#1527988: Missing or legacy number validation
#1540174: Some attributes not allowed for the new HTML5 input elements
range WHATWG | W3C #1174646: Add new HTML5 FAPI element: range
#1540174: Some attributes not allowed for the new HTML5 input elements
#1539820: Browser stylesheet of some webkit based browsers hides range element
search WHATWG | W3C #1174628: Add new HTML5 FAPI element: search
tel WHATWG | W3C #1174634: Add new HTML5 FAPI element: telephone
url WHATWG | W3C #1174630: Add new HTML5 FAPI element: url

NOTE: Here's a simple module JR wrote to test the new input types. http://drupal.org/node/1496644

HTML5 Input Attributes

Name Specification Issue(s)
accept WHATWG | W3C
autocomplete WHATWG | W3C #1275764: Add a dedicated #autocomplete property to Form API form elements
autofocus WHATWG | W3C #1174936: Allow FAPI usage of the autofocus attribute
dirname WHATWG | W3C
list (datalist) WHATWG | W3C
formaction WHATWG | W3C
formenctype WHATWG | W3C
formmethod WHATWG | W3C
formnovalidate WHATWG | W3C
formtarget WHATWG | W3C
max WHATWG | W3C
min WHATWG | W3C
multiple WHATWG | W3C #625958: Support Uploading Multiple Files for HTML5 Browsers via #multiple attribute
novalidate WHATWG | W3C
pattern WHATWG | W3C #1174766: Support the #pattern FAPI property for native HTML5 pattern attribute
placeholder WHATWG | W3C #1174694: Allow FAPI usage of the placeholder attribute
#1241938: Add support for #placeholder to relevant Field API widgets
required WHATWG | W3C #1174938: Natively support the HTML5 required and aria-required FAPI properties
spellcheck WHATWG | W3C
step WHATWG | W3C #1174640: Add new HTML5 FAPI element: number

New HTML5 Form Elements

Name Specification Issues(s)
keygen WHATWG | W3C
meter WHATWG | W3C
output WHATWG | W3C
progress WHATWG | W3C #1477550: Bring progressbar to the postmodern era

Help improve this page

Page status: No known problems

You can: