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.
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
Proposed implementation strategy
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.
New elements have to be split in two: listed elements [1] 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.
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.
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.
Finally comes the new non-listed elements and the specific UIs like color picker, date picker, etc.
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
HTML5 Forms Meta bug: bug 344614
| 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 |
| search | New input type | New input type for search boxes | bug 456229 | Pending review |
| autofocus | New attribute | Focus an element on the page load | bug 546995 | Pending review |
| Button type behavior | Misc/Bug fix | Fix the button type behavior to fit the new specifications | bug 551670 | Pending review |
| Select size relation with multiple | Misc/Bug fix | Set the default element size depending on the multiple attribute | bug 551846 | Pending review |
| Legend element and form attribute | Misc/Bug fix | Legend element form has to be the fieldset form or null | bug 555567 | Pending review |
| Constraint Validation API | Misc | Implement the constraint validation API (constraints come with attributes) | bug 345624 | Pending review |
| datalist | New listed element | Implement the datalist | bug 555840 | Pending review |
| output | New listed element | Implement the output element | bug 346485 | Pending Review |
| required | New attribute | Specify the element is required for form validation | bug 345822 | WIP |
| placeholder style | Misc/CSS | Default style and style customization of the placeholder text | bug 548626 bug 457801 bug 556145 | WIP |
| keygen | New listed element | Implement keygen element (there is a hack at the moment) | bug 101019 | None |
| New input type | New input type for email adresses | bug 555559 | None | |
| url | New input type | New input type for url's/uri's | bug 344615 | None |
| color | New input type | New input type for colors | bug 547004 | None |
| telephone | New input type | New input type for telephone numbers | TBD | None |
| number | New input type | New input type for numbers | bug 344616 | 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 |
| accept | New attribute | Specify accepted files for upload | bug 377624 | None |
| labels | New attribute | Access to the labels labelling the element | bug 556743 | None |
| autocomplete | New attribute | Auto-completion with earlier user inputs | TBD | None |
| list | New attribute | Add predefined suggestions | bug 556007 | None |
| pattern | New attribute | Specify the element has to follow a pattern (regexp) for form validation | bug 345512 | 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 |
| novalidate | New attribute | Specify the form shouldn't be validated | bug 556013 | None |
| form | New attribute | Associate the element with a specific form | TBD | None |
| formaction | New attribute | TBD | TBD | None |
| formenctype | New attribute | TBD | TBD | None |
| formmethod | New attribute | TBD | TBD | None |
| formnovalidate | New attribute | TBD | TBD | None |
| progress | New non-listed element | Implement the progress element | bug 514437 | None |
| meter | New non-listed element | Implement the meter element | bug 555985 | None |
| Color picker | Specific UI | UI to easily select a color | TBD | None |
| Date picker | Specific UI | UI to easily select a date | TBD | None |
| Time picker | Specific UI | UI to easily select a tiwe | TBD | None |
| Date/Time picker | Specific UI | UI to easily select a date/time | TBD | None |
| Week picker | Specific UI | UI to easily select a week | TBD | None |
| Month picker | Specific UI | UI to easily select a month | TBD | None |
| Local date/time picker | Specific UI | UI to easily select a local date/time | TBD | None |
| Number select | Specific UI | Number select with min/max/step management | TBD | None |
| Range select | Specific UI | Floating number select with min/max/step management | TBD | None |