Feature request - Add new html5 input types

[exponentcms]

There are several new input types allowed by html5 that aid form completion, esp. on handheld devices. The drawback is that they are not all fully implemented in each browser, however there are some fallback options http://diveintohtml5.info/forms.html, and at the very least, they fallback to a straight text input control.

This might best be implemented as a variation of the textcontrol (or genericcontrol) and isolated via the {control} smarty function. Here's a site with charts showing browser features: http://caniuse.com/forms

html5 controls worth adding would be:

• we've already implemented 'placeholder' attribute but have no fallback
• email
• url
• tel, telephone
• number, as a spinbox with min, max, step, & value
• range, number as a slider with min, max, step, & value
• fieldset, probably needs to be reserved for wizard/pages?
• maxlength, attribute for textarea (we already do input maxlength)
• accept, attribute to limit filetype/mimetype of file input?

html5 control featurs not worth adding?

• date, datetime, datetime-local, month, week, & time, date pickers aren't supported very well in browsers and we have a 'fallback' controll already
• search, only provides a rounded box?
• color, again not supported well and we already have a 'fallback' control
• list, kinda like autocomplete is not supported well and we have one for tags already
• autofocus, attribute though it has an easy fallback, we may not be on that control's tab?

[exponentcms]

Just ran across this demo to provide fallback for unsupported browsers http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

[exponentcms]

[bulk edit]

[exponentcms]

[bulk edit]

[exponentcms]

As a note, if we provide html5 fallback, we can 'lose' some of our controls and push the work to the browser (color, date, etc...)

[exponentcms]

Further clarification...'lose' should mean we can remove some of the controls since their function is accomplished in the browser or with the javascript fallback.

[exponentcms]

Also another updated html5 forms fallback script https://github.com/zoltan-dulac/html5Forms.js

[exponentcms]

(from [4aa5fc1]) Initial implementation of new html5 input types [#885]
4aa5fc1

[exponentcms]

[bulk edit]

[exponentcms]

FWIW, this feature is implemented, but not utilized yet in our code, nor do we provide fallback

[exponentcms]

No longer an 'alpha' only ticket

[exponentcms]

[bulk edit]

[exponentcms]

[bulk edit]

[exponentcms]

[bulk edit]

[exponentcms]

Note, we've implemented the following via the {control} smarty function with NO fallback (meaning they are treated as simple text input boxes in unsupportive browsers). They also honor the 'pattern' attribute

• email
• url
• tel
• telephone
• number
• range

[exponentcms]

(from [ed3c98f]) Changes all email address inputs to new html5 email input type [#885]
ed3c98f

[exponentcms]

(from [87dd10a]) Adds additional multiple email type iaw new html5 input types [#885]
87dd10a

[exponentcms]

(from [1e43e39]) Updates all telephone inputs to use new 'tel' html5 input type [#885]
1e43e39

[exponentcms]

(from [5584ab0]) Updates all url link inputs to use new 'url' html5 input type [#885]
5584ab0

[exponentcms]

(from [3ebe645]) Cleans up some of the calendar control types and for the time being makes them simple controls which can be used within the form designer (though some may lose their 'simple' status before stable release) [#885]
3ebe645

[exponentcms]

(from [00c1202]) Adds missing min, max, & step attribute handling for number, range controls [#885]
00c1202

[exponentcms]

(from [8da959e]) Removes unneeded loading a script already loaded by inputfilter.js.php [#885]
8da959e

[exponentcms]

[bulk edit]

[exponentcms]

(from [0aad815]) Adds more simple controls for forms designer: url, telephone, email, range, number, yuicalendar (some date/time controls may not remain in stable release) [#885]
0aad815

[exponentcms]

(from [a660021]) fixes the unused countryregioncontrol and fixes a few glitches in dropdowncontrol & formsController [#885]
a660021

[exponentcms]

Attempting to implement the html5forms.js code, but it doesn't work consistently. It seemed to be the most all-inclusive package since it provided automated script loading, though it relied on several other libraries to provide all its support.

However, I'll give the http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/ one a try though it requires static loading of helper widgets.

This may likely have to wait until a future version?

[exponentcms]

(from [792b849]) Changes input size for range/number simple controls in min/max/step since they can be + or - and decimals [#885]
792b849

[exponentcms]

(from [d08fb57]) fixes several issues with parsing and displaying simple controls (calendar, country, datetime, popupdatetime, range, states, & yuicalendar; also updates the date/time formats to values suitable for Windows servers [#885]
d08fb57

[exponentcms]

(from [9d36917]) adds html5 form fallback if unimplemented in browser; also fixes several forms controls issues, pattern param now saved/recalled correctly, adds option to change control type in edit. [#885]
9d36917

[exponentcms]

(from [36a125d]) Updated forms styles (based on new YUI forms styles [#885]
36a125d

[exponentcms]

As a note, the fallback 'range' control has a few quirks (using jqueryui slider). Tends to NOT display the default value correctly and the 'thumb' slider isn't always picked up by the mouse. May be some styling issues with the control validation 'warnings' displays

[exponentcms]

[bulk edit]

[exponentcms]

[bulk edit]

[exponentcms]

[bulk edit]

[exponentcms]

This has been implemented as intended

[exponentcms]

Lighthouse URL: https://exponentcms.lighthouseapp.com/projects/61783/tickets/885