![\"Apex42ItemType0011\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType0011.jpg\")
<\/p>\nIn this blog, I will explore the HTML 5 new item type features of Oracle APEX 4.2. The objective is to use the new number, e-mail, phone number and url html 5 item type and the native browser validation capability.<\/p>\n
I have created a new database application with the theme 25 which fatures responsive design principles (auto adjusts to the screen dimensions and works well on desktop, tablet and mobile devices).<\/p>\n
Nice Themes!<\/p>\n
<\/p>\n
To continue my html 5 item\u00a0type test, I tried to add a new item on the home page previously created.
\nI went to the item type selection such as number, e-mail, telephone and URL, but unfortunately, there are not displayed! Where are they?<\/p>\n
![\"Apex42ItemType001\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType001.jpg\")
<\/p>\n
I\u2019m surprised that all item types are not already supported.<\/p>\n
At the bottom of the item type page selection, a drop down list is present to show or not the unsupported item type such as date picker (html5)(unsupported), slider (unsupported).<\/p>\n
So in this blog, I tried it. What would be the effect?
\nI added this new item type which works well and is display correctly. But it’s not supported by Oracle, to be used at your own risk.<\/p>\n
![\"Apex42ItemType002\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType002.jpg\")
<\/p>\n
On the sample below, date picker and slider use native html5 item type are displayed as wished
\nDate picker resulting html code is as follows:<\/p>\n
![\"Apex42ItemType003\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType003.jpg\")
<\/p>\n
Slider resulting html code is as follows:<\/p>\n
![\"Apex42ItemType004\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType004.jpg\")
<\/p>\n
When I change the values, the value of each html5 type is correctly set.<\/p>\n
Let\u2019s have a look at the unsupported item type and see the difference using database application with jQuery Mobile Smartphone User interface and associated themes.<\/p>\n
I tried to create a JQuery Mobile database application for testing purposes.<\/p>\n
On the homepage, I added a new item and when the selection page of the item type appears, I was suprised that there are other items than the desktop user interface.<\/p>\n
![\"Apex42ItemType005\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType005.jpg\")
<\/p>\n
Note that the html5 date picker and slider are supported. Some other item type such as shuttle, text field with autocomplete, list manager, rich text editor, date picker are not supported for this application type.<\/p>\n
At this stage, I understand that depending on the context (database desktop and mobile user interface) the supported and unsupported item type are not the same.<\/p>\n
For this blog posting, I wanted to use the item type such as native HTML 5 input type number, phone number, e-mail, etc.<\/p>\n
To add this new item type, you just have to create a new text field:<\/p>\n
![\"Apex42ItemType006\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType006.jpg\")
<\/p>\n
These Html 5 types have been categorized as a subtype of the standard text field. It can be set in the properties.
\nThe following picture shows a text field e-mail subtype creation:<\/p>\n
![\"Apex42ItemType007\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType007.jpg\")
<\/p>\n
On the page rendering, you will find the code generated by the APEX Engine and interpreted by Google Chrome.<\/p>\n
![\"Apex42ItemType008\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType008.jpg\")
<\/p>\n
The required code is correctly generated.<\/p>\n
So let\u2019s try the native browser user input validation. Surprise! No validation is performed by the browser before submitting the form.
\nSo, unfortunately, and prematurely, this new type is not ready. It is not compliant with the W3C standard and not ready to be validated correctly in this APEX version.<\/p>\n
The fact is that the html form attribute has the “novalidate” properties which restrict the HTML 5 items type features.<\/p>\n
![\"Apex42ItemType009\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Apex42ItemType009.jpg\")
<\/p>\n
The “novalidate” attribute specifies that the input form-data should not be validated when submitted and therefore restricts the usage.<\/p>\n
Let\u2019s have a quick look on the used template. The #FORM_OPEN# substitution string for all templates is not customizable and is part of the internal APEX engine. The html tag property is not customizable yet.
\nTo conclude, this new release of Oracle APEX 4.2 seems quite pretty with its HTML5 support, but it is not yet usable.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, I will explore the HTML 5 new item type features of Oracle APEX 4.2. The objective is to use the new number, e-mail, phone number and url html 5 item type and the native browser validation capability. I have created a new database application with the theme 25 which fatures responsive design […]<\/p>\n","protected":false},"author":12,"featured_media":2834,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[304,354,334],"type_dbi":[],"class_list":["post-2833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-integration-middleware","tag-apex","tag-html-5","tag-middleware"],"acf":[],"yoast_head":"\n