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

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