: New feature! MozillaWiki is now mobile-friendly. Visit from a mobile device to see new mobile theme + try editing. Release details.

User:Mounir.lamouri/HTML5 Forms

From MozillaWiki
Jump to: navigation, search

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.


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.


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