#885 Feature request - Add new html5 input types - Exponent CMS

Type	To find
responsible:me	tickets assigned to you
tagged:"@high"	tickets tagged @high
milestone:next	tickets in the upcoming milestone
state:invalid	tickets with the state invalid
created:"last week"	tickets created last week
sort:number, importance, updated	tickets sorted by #, importance or updated
Combine keywords for powerful searching.
Use advanced searching »

#885 ✓resolved

Feature request - Add new html5 input types

Reported by dleffler | January 25th, 2013 @ 02:22 AM | in 2.2.4 (closed)

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?

Comments and changes to this ticket

dleffler January 25th, 2013 @ 02:28 AM
Just ran across this demo to provide fallback for unsupported browsers http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-...
dleffler January 25th, 2013 @ 03:17 PM
- Milestone set to “2.1.2”
[bulk edit]
dleffler February 4th, 2013 @ 09:32 PM
- Milestone changed from “2.1.2” to “2.2.0alpha2”
[bulk edit]
dleffler February 6th, 2013 @ 10:15 PM
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...)
dleffler February 11th, 2013 @ 10:33 PM
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.
dleffler February 11th, 2013 @ 10:38 PM
Also another updated html5 forms fallback script https://github.com/zoltan-dulac/html5Forms.js
expNinja February 14th, 2013 @ 11:48 AM
(from [4aa5fc1553d24a5ba4f74d598a82894045a4bc9c]) Initial implementation of new html5 input types [#885] https://github.com/exponentcms/exponent-cms/commit/4aa5fc1553d24a5b...
dleffler February 16th, 2013 @ 02:55 AM
- Milestone changed from “2.2.0alpha2” to “2.2.0alpha3”
[bulk edit]
dleffler February 16th, 2013 @ 02:57 PM
- Title changed from “Feature request - Add new html5 input types” to “* Feature request - Add new html5 input types”
dleffler February 16th, 2013 @ 08:21 PM
FWIW, this feature is implemented, but not utilized yet in our code, nor do we provide fallback
dleffler February 28th, 2013 @ 06:09 PM
- Title changed from “* Feature request - Add new html5 input types” to “Feature request - Add new html5 input types”
No longer an 'alpha' only ticket
dleffler March 2nd, 2013 @ 09:43 PM
- Milestone changed from “2.2.0alpha3” to “2.2.0beta1”
[bulk edit]
dleffler March 2nd, 2013 @ 09:44 PM
[bulk edit]
dleffler March 16th, 2013 @ 03:28 AM
- Milestone changed from “2.2.0beta1” to “2.2.0beta2”
[bulk edit]
dleffler March 18th, 2013 @ 12:37 AM
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
expNinja March 19th, 2013 @ 01:00 PM
(from [ed3c98fa4d4dad918f800161a5c5499f89e7c5a0]) Changes all email address inputs to new html5 email input type [#885] https://github.com/exponentcms/exponent-cms/commit/ed3c98fa4d4dad91...
expNinja March 19th, 2013 @ 01:11 PM
(from [87dd10a8949c41f957e7238d2db0050f0ad312e8]) Adds additional multiple email type iaw new html5 input types [#885] https://github.com/exponentcms/exponent-cms/commit/87dd10a8949c41f9...
expNinja March 19th, 2013 @ 01:17 PM
(from [1e43e391020a3a6582fe8045cd4afa341653e401]) Updates all telephone inputs to use new 'tel' html5 input type [#885] https://github.com/exponentcms/exponent-cms/commit/1e43e391020a3a65...
expNinja March 19th, 2013 @ 01:35 PM
(from [5584ab0e3fec6132c17257ca7034b8d3afa9a190]) Updates all url link inputs to use new 'url' html5 input type [#885] https://github.com/exponentcms/exponent-cms/commit/5584ab0e3fec6132...
expNinja March 20th, 2013 @ 01:04 AM
(from [3ebe6455465ccbb8d3356a11eb3a7d0cd873a6de]) 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] https://github.com/exponentcms/exponent-cms/commit/3ebe6455465ccbb8...
expNinja March 26th, 2013 @ 07:27 PM
(from [00c12025286f3c9ab628b1933db6371b4240843d]) Adds missing min, max, & step attribute handling for number, range controls [#885] https://github.com/exponentcms/exponent-cms/commit/00c12025286f3c9a...
expNinja March 27th, 2013 @ 08:35 PM
(from [8da959ee40b4408f10b0ecad75fa31c9c9cc46b6]) Removes unneeded loading a script already loaded by inputfilter.js.php [#885] https://github.com/exponentcms/exponent-cms/commit/8da959ee40b4408f...
dleffler March 29th, 2013 @ 08:00 PM
- Milestone changed from “2.2.0beta2” to “2.2.0beta3”
[bulk edit]
expNinja March 30th, 2013 @ 03:07 AM
(from [0aad81542addd293d2724e501e7743eb9366a0dc]) Adds more simple controls for forms designer: url, telephone, email, range, number, yuicalendar (some date/time controls may not remain in stable release) [#885] https://github.com/exponentcms/exponent-cms/commit/0aad81542addd293...
expNinja March 30th, 2013 @ 07:29 PM
(from [a6600216ef64e89fc514f8b56f9b93fe4c819bdf]) fixes the unused countryregioncontrol and fixes a few glitches in dropdowncontrol & formsController [#885] https://github.com/exponentcms/exponent-cms/commit/a6600216ef64e89f...
dleffler April 1st, 2013 @ 10:08 PM
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-... one a try though it requires static loading of helper widgets.

This may likely have to wait until a future version?
expNinja April 2nd, 2013 @ 07:23 PM
(from [792b849820498750bff563a7b4351d7613a352e6]) Changes input size for range/number simple controls in min/max/step since they can be + or - and decimals [#885] https://github.com/exponentcms/exponent-cms/commit/792b849820498750...
expNinja April 3rd, 2013 @ 01:06 AM
(from [d08fb57dd941e7197f7908f04a7bd44cf240ceba]) 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] https://github.com/exponentcms/exponent-cms/commit/d08fb57dd941e719...
expNinja April 9th, 2013 @ 11:24 AM
(from [9d36917c435c6eeb681e9be4fd6f49b07c9d1f61]) 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] https://github.com/exponentcms/exponent-cms/commit/9d36917c435c6eeb...
expNinja April 12th, 2013 @ 06:52 PM
(from [36a125dd3f8bf96fd3ad850930ec0eefdb300a99]) Updated forms styles (based on new YUI forms styles [#885] https://github.com/exponentcms/exponent-cms/commit/36a125dd3f8bf96f...
dleffler April 12th, 2013 @ 07:09 PM
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
dleffler April 20th, 2013 @ 10:17 AM
- Milestone changed from “2.2.0beta3” to “2.2.0release-candidate”
[bulk edit]
dleffler May 1st, 2013 @ 10:22 AM
- Milestone changed from “2.2.0release-candidate” to “2.2.1”
[bulk edit]
dleffler May 9th, 2013 @ 06:57 PM
- Milestone cleared.
[bulk edit]
dleffler December 12th, 2013 @ 12:58 PM
- State changed from “new” to “resolved”
- Milestone set to “2.2.4”
This has been implemented as intended

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.