View source for User:Mounir.lamouri/HTML5 Forms

HTML5 Forms is a part of the HTML5 specifications about forms. It introduces new elements, and new input types which aim to help web developers to not re-invent what is already well known. For example, with HTML5 Forms, web developers will not have to write javascript code to tell you a field is required or to check your email address is valid. 

== Shipping Criteria ==

In order to ship in a Firefox release, each HTML5 form element must be complete to the following criteria:

1. It must include pleasant and working UI, where appropriate.

2. You must be able to use CSS to style the element, especially the UI that we generate.  This includes any pre-defined pseudo-selectors (invalid, required, icon, etc.)

3. If there's a constraint API the API must be complete.

4. It should be [https://wiki.mozilla.org/Accessibility/HTML5_Forms fully accessible.]

== Priorities ==

1. Validation done - touches all text-based fields.

1a. Requires UI

1a. Support for CSS pseudo-selectors

2. Telephone

3. Email

4. URL

5. Search

6. Range

== Implementation status  ==

Wikipedia offers a non-exhaustive overview of the implementation for the main layout engines: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29#Form_elements_and_attributes 

A comparison between the different browsers: http://www.findmebyip.com/litmus/#html5-forms-inputs

== Summary ==
HTML5 Forms Meta bug: [https://bugzilla.mozilla.org/show_bug.cgi?id=344614 bug 344614]

HTML5 Form Controls UI Meta bug: [https://bugzilla.mozilla.org/show_bug.cgi?id=558593 bug 558593]

{| border="1" cellpadding="10" cellspacing="0"
! Name
! Type
! Description
! Bug ID(s)
! Status
|- style="background:#00ef00;"
|placeholder
|New Attribute
|The placeholder shows a hint to the user
|[https://bugzilla.mozilla.org/show_bug.cgi?id=457800 bug 457800]
|Done
|- style="background:#00ef00;"
|maxlength
|New attribute
|Limit the text length of an input or textarea element
|[https://bugzilla.mozilla.org/show_bug.cgi?id=535043 bug 535043] [https://bugzilla.mozilla.org/show_bug.cgi?id=536891 bug 536891] [https://bugzilla.mozilla.org/show_bug.cgi?id=536895 bug 536895]
|Done
|- style="background:#00ef00;"
|Button type behavior
|Misc/Bug fix
|Fix the button type behavior to fit the new specifications
|[https://bugzilla.mozilla.org/show_bug.cgi?id=551670 bug 551670]
|Done
|- style="background:#00ef00;"
|output
|New element
|Implement the output element
|[https://bugzilla.mozilla.org/show_bug.cgi?id=346485 bug 346485]
|Done
|- style="background:#00ef00;"
|telephone
|New input type
|New input type for telephone numbers
|[https://bugzilla.mozilla.org/show_bug.cgi?id=557620 bug 557620]
|Done
|- style="background:#00ef00;"
|search
|New input type
|New input type for search fields
|[https://bugzilla.mozilla.org/show_bug.cgi?id=456229 bug 456229]
|Done
|- style="background:#00ef00;"
|Legend element and form attribute
|Misc/Bug fix
|Legend element form has to be the fieldset form or null
|[https://bugzilla.mozilla.org/show_bug.cgi?id=555567 bug 555567]
|Done
|- style="background:#00ef00;"
|autofocus
|New attribute
|Focus an element on the page load
|[https://bugzilla.mozilla.org/show_bug.cgi?id=546995 bug 546995]
|Done
|- style="background:#00ef00;"
|label.control
|new attribute
|control attribute for label element
|[https://bugzilla.mozilla.org/show_bug.cgi?id=562932 bug 562932]
|Done
|- style="background:#00ef00;"
|Select size relation with multiple
|Misc/Bug fix
|Set the default element size depending on the multiple attribute
|[https://bugzilla.mozilla.org/show_bug.cgi?id=551846 bug 551846]
|Done
|- style="background:orange;"
|Constraint Validation API
|Misc
|Implement the constraint validation API (specific constraints will come with new attributes)
|[https://bugzilla.mozilla.org/show_bug.cgi?id=345624 bug 345624]
|Ready to be landed
|- style="background:orange;"
|url
|New input type
|New input type for url's/uri's
|[https://bugzilla.mozilla.org/show_bug.cgi?id=344615 bug 344615]
|Ready to be landed
|- style="background:orange;"
|required
|New attribute
|Specify the element is required for form validation
|[https://bugzilla.mozilla.org/show_bug.cgi?id=345822 bug 345822]
|Ready to be landed
|- style="background:orange;"
|pattern
|New attribute
|Specify the element has to follow a pattern (regexp) for form validation
|[https://bugzilla.mozilla.org/show_bug.cgi?id=345512 bug 345512]
|Ready to be landed
|- style="background:orange;"
|:required and :optional
|pseudo-class
|CSS pseudo-classes using required attribute
|[https://bugzilla.mozilla.org/show_bug.cgi?id=506554 bug 506554]
|Ready to be landed
|- style="background:orange;"
|email
|New input type
|New input type for email adresses
|[https://bugzilla.mozilla.org/show_bug.cgi?id=555559 bug 555559]
|Pending Review
|- style="background:orange;"
|input type search style
|UI
|Style for input type='search'
|[https://bugzilla.mozilla.org/show_bug.cgi?id=558594 bug 558594]
|Pending Review
|- style="background:orange;"
|formtarget
|new attribute
|override the form element target attribute
|[https://bugzilla.mozilla.org/show_bug.cgi?id=566064 bug 566064]
|Pending review
|- style="background:orange;"
|formaction
|New attribute
|Override the form action attribute depending on the used submit control
|[https://bugzilla.mozilla.org/show_bug.cgi?id=566160 bug 566160]
|Pending review
|- style="background:orange;"
|autocomplete
|New attribute
|Auto-completion with earlier user inputs
|[https://bugzilla.mozilla.org/show_bug.cgi?id=557628 bug 557628]
|Need specification fixes
|- style="background:orange;"
|accept
|New attribute
|Specify accepted files for upload
|[https://bugzilla.mozilla.org/show_bug.cgi?id=377624 bug 377624]
|WIP
|- style="background:orange;"
|placeholder style
|Misc/CSS
|Default style and style customization of the placeholder text
|[https://bugzilla.mozilla.org/show_bug.cgi?id=548626 bug 548626] [https://bugzilla.mozilla.org/show_bug.cgi?id=457801 bug 457801] [https://bugzilla.mozilla.org/show_bug.cgi?id=556145 bug 556145]
|WIP
|- style="background:orange;"
|number
|New input type
|New input type for numbers
|[https://bugzilla.mozilla.org/show_bug.cgi?id=344616 bug 344616]
|WIP
|- style="background:orange;"
|labels
|New attribute
|Access to the labels labelling the element
|[https://bugzilla.mozilla.org/show_bug.cgi?id=556743 bug 556743]
|WIP
|- style="background:orange;"
|color
|New input type
|New input type for colors
|[https://bugzilla.mozilla.org/show_bug.cgi?id=547004 bug 547004]
|Mockup in progress
|- style="background:orange;"
|datalist
|New listed element
|Implement the datalist 
|[https://bugzilla.mozilla.org/show_bug.cgi?id=555840 bug 555840]
|In pause
|- style="background:#ff3000;"
|keygen
|New listed element
|Implement keygen element (the current implementation has been done before the specification)
|[https://bugzilla.mozilla.org/show_bug.cgi?id=101019 bug 101019]
|None
|- style="background:#ff3000;"
|range
|New input type
|New input type for floating numbers
|[https://bugzilla.mozilla.org/show_bug.cgi?id=344618 bug 344618]
|None
|- style="background:#ff3000;"
|date
|New input type
|New input type related to date/time
|[https://bugzilla.mozilla.org/show_bug.cgi?id=446510 bug 446510]
|None
|- style="background:#ff3000;"
|datetime
|New input type
|New input type related to date/time
|TBD
|None
|- style="background:#ff3000;"
|month
|New input type
|New input type related to date/time
|TBD
|None
|- style="background:#ff3000;"
|week
|New input type
|New input type related to date/time
|TBD
|None
|- style="background:#ff3000;"
|time
|New input type
|New input type related to date/time
|TBD
|None
|- style="background:#ff3000;"
|datetime-local
|New input type
|New input type related to date/time
|TBD
|None
|- style="background:#ff3000;"
|list
|New attribute
|Add predefined suggestions
|[https://bugzilla.mozilla.org/show_bug.cgi?id=556007 bug 556007]
|None
|- style="background:#ff3000;"
|min/max
|New attribute
|Specify min and max values for form validation
|[https://bugzilla.mozilla.org/show_bug.cgi?id=556010 bug 556010]
|None
|- style="background:#ff3000;"
|step
|New attribute
|Specify step form numbers
|[https://bugzilla.mozilla.org/show_bug.cgi?id=556009 bug 556009]
|None
|- style="background:#ff3000;"
|novalidate
|New attribute
|Specify the form shouldn't be validated
|[https://bugzilla.mozilla.org/show_bug.cgi?id=556013 bug 556013]
|None
|- style="background:#ff3000;"
|form
|New attribute
|Associate the element with a specific form
|TBD
|None
|- style="background:#ff3000;"
|formenctype
|New attribute
|TBD
|TBD
|None
|- style="background:#ff3000;"
|formmethod
|New attribute
|TBD
|TBD
|None
|- style="background:#ff3000;"
|formnovalidate
|New attribute
|TBD
|TBD
|None
|- style="background:#ff3000;"
|progress
|New non-listed element
|Implement the progress element
|[https://bugzilla.mozilla.org/show_bug.cgi?id=514437 bug 514437]
|None
|- style="background:#ff3000;"
|meter
|New non-listed element
|Implement the meter element
|[https://bugzilla.mozilla.org/show_bug.cgi?id=555985 bug 555985]
|None
|- style="background:#ff3000;"
|Color picker
|Specific UI
|UI to easily select a color
|TBD
|None
|- style="background:#ff3000;"
|Date picker
|Specific UI
|UI to easily select a date
|TBD
|None
|- style="background:#ff3000;"
|Time picker
|Specific UI
|UI to easily select a tiwe
|TBD
|None
|- style="background:#ff3000;"
|Date/Time picker
|Specific UI
|UI to easily select a date/time
|TBD
|None
|- style="background:#ff3000;"
|Week picker
|Specific UI
|UI to easily select a week
|TBD
|None
|- style="background:#ff3000;"
|Month picker
|Specific UI
|UI to easily select a month
|TBD
|None
|- style="background:#ff3000;"
|Local date/time picker
|Specific UI
|UI to easily select a local date/time
|TBD
|None
|- style="background:#ff3000;"
|Range select
|Specific UI
|Floating number select with min/max/step management
|TBD
|None
|}