User:Mounir.lamouri/HTML5 Forms: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
m (→‎Summary: legend element fix is now checkin-needed)
m (→‎Summary: s/WIP/In Pause/)
 
(36 intermediate revisions by 5 users not shown)
Line 1: Line 1:
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.  
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 [[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  ==
== Implementation status  ==
Line 7: Line 37:
A comparison between the different browsers: http://www.findmebyip.com/litmus/#html5-forms-inputs  
A comparison between the different browsers: http://www.findmebyip.com/litmus/#html5-forms-inputs  


== Proposed implementation strategy ==
== The patch queue ==
 
As much as possible, the patches related to HTML5 Forms are landed to mozilla-central so you may have some HTML5 Forms features in Firefox nightly builds (aka Minefield). However, for various reasons, some patches have to wait before being landed to our tree. These features are marked "Ready to be landed" in the summary below.
 
A patch queue has been created with all patches ready enough to be tested. That includes the "Ready to be landed" patches but also some WIP patches. You can found this patch queue here: [http://hg.mozilla.org/users/mlamouri_mozilla.com/html5forms-patchqueue/ http://hg.mozilla.org/users/mlamouri_mozilla.com/html5forms-patchqueue/]
 
=== Using the patch queue  ===
 
To use the patch queue, you have to [https://developer.mozilla.org/en/Mozilla_Source_Code_%28Mercurial%29 clone mozilla-central] then clone the patch queue, apply the patch and [https://developer.mozilla.org/En/Developer_Guide/Build_Instructions/Linux_Prerequisites build]. These can be summarized with these instructions:<br>
<pre># You need to be in a directory where you want to clone mozilla-central
hg clone http://hg.mozilla.org/mozilla-central/ src
cd src/.hg/
 
# Get the patch queue
hg clone http://hg.mozilla.org/users/mlamouri_mozilla.com/html5forms-patchqueue/ patches
cd ..


The proposed implementation strategy (not really respected at the moment) is to work on new elements then new input types so we can work on other things with a more general point of view.
# Apply the patch queue
hg qpush -a


New elements have to be split in two: listed elements [http://dev.w3.org/html5/spec/forms.html#category-listed] and non-listed elements. The missing listed elements (keygen, and output) are going to be used internally (for the constraint validation api) or to use new stuff (like new attributes). It would be easier to have them added as soon as possible. In addition, even if the datalist is not a listed element, it is needed for the list attribute so it has to be implemented as soon as possible too. The non-listed elements (progress and meter) are low priority because they are not needed by other stuff and do not need anything too.
# Build Firefox (you need a mozconfig file)
make -f client.mk</pre>
To update the patch queue:
<pre>#&nbsp;Update mozilla-central (you need to un-apply all patches before)
cd src
hg qpop -a
hg pull -u


Then, we need a minimalistic implementation of the new input types/states for the same reason. We do not need to have a full and working implementation and certainly not specific UIs.
# Update the patch queue
cd .hg/patches
hg pull -u
cd ../..


Follows the constraint validation and new attributes which may be easier to implement with all elements and input states available. Easier because the implementation would be doable in one time.
# Re-apply the patch queue and re-build Firefox
hg qpush -a
make -f client.mk </pre>
If you have any trouble while applying the patch queue or building Firefox with this patch queue, let me know by email (you should found it easily in any bug listed below). If a feature isn't working correctly, please leave a comment in the related bug.  


Finally comes the new non-listed elements and the specific UIs like color picker, date picker, etc.
Feel free to send me an email if you think a patch could/should be in this patch queue.


'''Note:''' this is a global strategy and for some reason it may be not respected. For example, the maxlength attribute is only available for input and textarea elements, we do not need the new elements to work on them.
== Summary  ==


== Summary ==
HTML5 Forms Meta bug: [https://bugzilla.mozilla.org/show_bug.cgi?id=344614 bug 344614]  
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]
HTML5 Form Controls UI Meta bug: [https://bugzilla.mozilla.org/show_bug.cgi?id=558593 bug 558593]  


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

Latest revision as of 19:46, 29 September 2010

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

The patch queue

As much as possible, the patches related to HTML5 Forms are landed to mozilla-central so you may have some HTML5 Forms features in Firefox nightly builds (aka Minefield). However, for various reasons, some patches have to wait before being landed to our tree. These features are marked "Ready to be landed" in the summary below.

A patch queue has been created with all patches ready enough to be tested. That includes the "Ready to be landed" patches but also some WIP patches. You can found this patch queue here: http://hg.mozilla.org/users/mlamouri_mozilla.com/html5forms-patchqueue/

Using the patch queue

To use the patch queue, you have to clone mozilla-central then clone the patch queue, apply the patch and build. These can be summarized with these instructions:

# You need to be in a directory where you want to clone mozilla-central
hg clone http://hg.mozilla.org/mozilla-central/ src
cd src/.hg/

# Get the patch queue
hg clone http://hg.mozilla.org/users/mlamouri_mozilla.com/html5forms-patchqueue/ patches
cd ..

# Apply the patch queue
hg qpush -a

# Build Firefox (you need a mozconfig file)
make -f client.mk

To update the patch queue: 

# Update mozilla-central (you need to un-apply all patches before)
cd src
hg qpop -a
hg pull -u

# Update the patch queue
cd .hg/patches
hg pull -u
cd ../..

# Re-apply the patch queue and re-build Firefox
hg qpush -a
make -f client.mk

If you have any trouble while applying the patch queue or building Firefox with this patch queue, let me know by email (you should found it easily in any bug listed below). If a feature isn't working correctly, please leave a comment in the related bug.

Feel free to send me an email if you think a patch could/should be in this patch queue.

Summary

HTML5 Forms Meta bug: bug 344614

HTML5 Form Controls UI Meta bug: bug 558593

Name Type Description Bug ID(s) Status
placeholder New Attribute The placeholder shows a hint to the user bug 457800 Done
maxlength New attribute Limit the text length of an input or textarea element bug 535043 bug 536891 bug 536895 Done
Button type behavior Misc/Bug fix Fix the button type behavior to fit the new specifications bug 551670 Done
output New element Implement the output element bug 346485 Done
telephone New input type New input type for telephone numbers bug 557620 Done
search New input type New input type for search fields bug 456229 Done
Legend element and form attribute Misc/Bug fix Legend element form has to be the fieldset form or null bug 555567 Done
autofocus New attribute Focus an element on the page load bug 546995 Done
label.control new attribute control attribute for label element bug 562932 Done
Select size relation with multiple Misc/Bug fix Set the default element size depending on the multiple attribute bug 551846 Done
Constraint Validation API Misc Implement the constraint validation API (specific constraints will come with new attributes) bug 345624 Done
url New input type New input type for url's/uri's bug 344615 Done
required New attribute Specify the element is required for form validation bug 345822 Done
pattern New attribute Specify the element has to follow a pattern (regexp) for form validation bug 345512 Done
 :required and :optional pseudo-class CSS pseudo-classes using required attribute bug 506554 Done
email New input type New input type for email adresses bug 555559 Done
accept image/* audio/* video/* New attribute Specify accepted files for upload bug 377624 bug 565272 Done
formtarget new attribute override the form element target attribute bug 566064 Done
formaction New attribute Override the form action attribute depending on the used submit control bug 566160 Done
formenctype New attribute Have a specific enctype for a submit button bug 582412 Done
formmethod New attribute Have a specific method for a submit button bug 582412 Done
 :valid / :invalid CSS3 Selector Select valid/invalid elements bug 558788 Done
form constraint validation Constraint validation API Constraint validation form the form element bug 561634 Done
form New attribute Associate the element with a specific form bug 588683 Done
novalidate New attribute Specify that the form shouldn't be validated bug 556013 Done
formnovalidate New attribute Specify that the form shouldn't be validated when using a specific form control bug 589696 Done
datalist New listed element Implement the datalist bug 555840 Done
list New attribute Add predefined suggestions bug 556007 Done
autocomplete New attribute Auto-completion with earlier user inputs bug 557628 Done
placeholder style Misc/CSS Default style and style customization of the placeholder text bug 457801 Done
progress New non-listed element Implement the progress element bug 514437

bug 567872

In pause
labels New attribute Access to the labels labelling the element bug 556743 In Pause
input type search style UI Style for input type='search' bug 558594 In Pause
number New input type New input type for numbers bug 344616 In pause
color New input type New input type for colors bug 547004 In pause
keygen New listed element Implement keygen element (the current implementation has been done before the specification) bug 101019 None
accept with MIME types New attribute Specify accepted files for upload bug 565274 None
range New input type New input type for floating numbers bug 344618 None
date New input type New input type related to date/time bug 446510 None
datetime New input type New input type related to date/time TBD None
month New input type New input type related to date/time TBD None
week New input type New input type related to date/time TBD None
time New input type New input type related to date/time TBD None
datetime-local New input type New input type related to date/time TBD None
min/max New attribute Specify min and max values for form validation bug 556010 None
step New attribute Specify step form numbers bug 556009 None
meter New non-listed element Implement the meter element bug 555985 None
Retrieved from "https://wiki.mozilla.org/index.php?title=User:Mounir.lamouri/HTML5_Forms&oldid=256910"