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

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

@@ Line 175: / Line 175: @@
 | Done
 |- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
-| :required and&nbsp;:optional
+| &nbsp;:required and&nbsp;:optional
 | pseudo-class
 | CSS pseudo-classes using required attribute
@@ Line 187: / Line 187: @@
 | Done
 |- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
 | accept image/* audio/* video/*
 | New attribute
 | Specify accepted files for upload
@@ Line 207: / Line 207: @@
 | formenctype
 | New attribute
 | Have a specific enctype for a submit button
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=582412 bug 582412]
 | Done
 |- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
 | formmethod
 | New attribute
 | Have a specific method for a submit button
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=582412 bug 582412]
 | Done
 |- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
-| :valid / :invalid
+| &nbsp;:valid /&nbsp;:invalid
 | CSS3 Selector
 | Select valid/invalid elements
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=558788 bug 558788]
 | Done
 |- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
 | form constraint validation
 | Constraint validation API
 | Constraint validation form the form element
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=561634 bug 561634]
 | Done
@@ Line 234: / Line 234: @@
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=588683 bug 588683]
 | Done
-|- style="background: none repeat scroll 0% 0% orange;"
+|- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
+| novalidate
+| New attribute
+| Specify that the form shouldn't be validated
+| [https://bugzilla.mozilla.org/show_bug.cgi?id=556013 bug 556013]
+| Done
+|- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
+| formnovalidate
+| New attribute
+| Specify that the form shouldn't be validated when using a specific form control
+| [https://bugzilla.mozilla.org/show_bug.cgi?id=589696 bug 589696]
+| Done
+|- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
+| datalist
+| New listed element
+| Implement the datalist
+| [https://bugzilla.mozilla.org/show_bug.cgi?id=555840 bug 555840]
+| Done
+|- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
+| list
+| New attribute
+| Add predefined suggestions
+| [https://bugzilla.mozilla.org/show_bug.cgi?id=556007 bug 556007]
+| Done
+|- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
 | autocomplete
 | New attribute
 | Auto-completion with earlier user inputs
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=557628 bug 557628]
-| In pause
+| Done
+|- style="background: none repeat scroll 0% 0% rgb(0, 239, 0);"
+| placeholder style
+| Misc/CSS
+| Default style and style customization of the placeholder text
+| [https://bugzilla.mozilla.org/show_bug.cgi?id=457801 bug 457801]
+| Done
 |- style="background: none repeat scroll 0% 0% orange;"
 | progress
@@ Line 252: / Line 282: @@
 | Access to the labels labelling the element
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=556743 bug 556743]
-| WIP
+| In Pause
 |- style="background: none repeat scroll 0% 0% orange;"
 | input type search style
@@ Line 258: / Line 288: @@
 | Style for input type='search'
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=558594 bug 558594]
-| WIP
+| In Pause
-|- style="background: none repeat scroll 0% 0% 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]
-| In pause
 |- style="background: none repeat scroll 0% 0% orange;"
 | number
@@ Line 277: / Line 301: @@
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=547004 bug 547004]
 | In pause
-|- style="background: none repeat scroll 0% 0% orange;"
-| datalist
-| New listed element
-| Implement the datalist
-| [https://bugzilla.mozilla.org/show_bug.cgi?id=555840 bug 555840]
-| Will be landed with @list
 |- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"
 | keygen
@@ Line 290: / Line 308: @@
 | None
 |- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"
 | accept with MIME types
 | New attribute
 | Specify accepted files for upload
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=565274 bug 565274]
 | None
 |- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"
@@ Line 336: / Line 354: @@
 | New input type related to date/time
 | TBD
-| None
-|- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"
-| list
-| New attribute
-| Add predefined suggestions
-| [https://bugzilla.mozilla.org/show_bug.cgi?id=556007 bug 556007]
 | None
 |- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"
@@ Line 354: / Line 366: @@
 | Specify step form numbers
 | [https://bugzilla.mozilla.org/show_bug.cgi?id=556009 bug 556009]
-| None
-|- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"
-| novalidate
-| New attribute
-| Specify that the form shouldn't be validated
-| [https://bugzilla.mozilla.org/show_bug.cgi?id=556013 bug 556013]
-| None
-|- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"
-| formnovalidate
-| New attribute
-| Specify that the form shouldn't be validated when using a specific form control
-| [https://bugzilla.mozilla.org/show_bug.cgi?id=589696 bug 589696]
 | None
 |- style="background: none repeat scroll 0% 0% rgb(255, 48, 0);"