Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 input type date, color, range support in Firefox and Internet Explorer

I've build all my website using many forms with HTML5 (using the input types date, color and range.)

Everything works fine in Google Chrome.

But when I turn on Internet Explorer and Firefox, all input fields become like input type text.

Is there a way or a script I can download to make forcing the displaying of this input correctly?

like image 321
Stanislas Piotrowski Avatar asked Sep 17 '12 08:09

Stanislas Piotrowski


People also ask

Does HTML5 support Internet Explorer?

Yes it does. Perhaps a better question is what modern web features IE8 supports.

Which HTML5 attributes can be used with HTML5 date input type to limit date selection?

The max attribute specifies the maximum value (date) for a date field. Tip: Use the max attribute together with the min attribute to create a range of legal values. Tip: To set or return the value of the min attribute, use the min property.

How can set input type date in mm/dd/yyyy format using HTML?

To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.

How do I use HTML5 in Internet Explorer?

On the search bar, type Internet Options, and click on Internet Options from the results. Click on the Advanced tab. Under Multimedia, check Enable alternative codecs in HTML5 media elements. Restart your computer.


2 Answers

Since HTML5 hasn't been completely standardized yet, not all browsers do support these input types. The intended behaviour is to fall back to <input type="text">.

↪ See here for more information on browser support for HTML5 input types.

You can test for support using the Modernizr library or with some custom JavaScript. If you detect a certain HTML5 feature isn't available, you can fall back to JavaScript-based alternatives.

like image 193
user2428118 Avatar answered Oct 04 '22 23:10

user2428118


All browsers fallback to input type text if special input is missing. Its all about widgets and validation.

Following support range widget

Firefox Desktop 23

Firefox 29

Opera Desktop

Opaera

Chrome Desktop

chrome desktop

Chrome Mobile

Chrome mobile

IOS safari 5

IOS Safari 5

.

.

.

Following browsers now supports color widget

Firefox Desktop 29

Firefox 29 color input Ubuntu

Opera Desktop 11

Opera desktop color input

Chrome Desktop 20:

chrome input type color Ubuntu

Android 4.4 / Chrome Mobile :

chrome mobile color input

Opera mobile:

opera mobile color input

Blackberry:

blackberry color input

Firefox os 1.3

Firefox os now supports color input but i still don't have a screen shot

If u want u can use this http://www.eyecon.ro/colorpicker/

like image 20
aWebDeveloper Avatar answered Oct 05 '22 00:10

aWebDeveloper