Login   Register  
PHP Classes
elePHPant
Icontem

support for html5 input types 'tel' and 'email'

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us

      Forms generation and validation  >  All threads  >  support for html5 input types 'tel' and 'email'  >  (Un) Subscribe thread alerts  
Subject:support for html5 input types 'tel' and 'email'
Summary:support for html5 input types 'tel' and 'email'
Messages:6
Author:clive Turner
Date:2013-03-06 15:38:03
Update:2013-04-16 21:11:57
 

  1. support for html5 input types 'tel' and 'email'   Reply   Report abuse  
Picture of clive Turner
clive Turner
2013-03-06 15:38:03
Hi Manuel,

I'm adopting a mobile first strategy and want to ensure that form input from mobiles and other devices with virtual keyboards is as easy as possible.

I note that many devices will automatically provide the required virtual keypad depending upon the input type of a form input.

eg. Number keypad if an input type is "tel" or
@ and .com keys if input type is 'email'

+ those devices which don't support html5 revert to behaviour of a text input

Are there any plans to support the html5 input types 'tel' and 'email'? / do you know of anyone who has written custom classes for them?

Thanks,


Clive

  2. Re: support for html5 input types 'tel' and 'email'   Reply   Report abuse  
Picture of Manuel Lemos
Manuel Lemos
2013-03-07 02:32:39 - In reply to message 1 from clive Turner
Adding support for those input types is not a big deal. The problem is that they would not work in non-HTML5 browsers.

It would probably fallback to a text input but the class could not do anything to assure consistent behavior across browsers.

Maybe it is safer for you to rely on regular text input and any custom validations you need.

Alternatively, you may want to try creating a custom input so you do not get stuck waiting on whether there will be support for those types of inputs.

  3. Re: support for html5 input types 'tel' and 'email'   Reply   Report abuse  
Picture of clive Turner
clive Turner
2013-03-07 10:22:47 - In reply to message 2 from Manuel Lemos
Hi Manuel,

I made a small alteration to the AddInput Method of the forms class. At around line 1190, I added the types 'tel' and 'email' to the switch statement - just under text. This little hack seems to work fine for my needs. (I extended the class first and created an override method - so not that bad!).

The information on the Internet suggests that all major browsers that are not html5 compatible do fall back to a text input and therefore this is an input type that can be fairly safely implemented straight away.

It means that users of most phones and tablets get the most appropriate virtual keyboard based upon the input type. I think 'tel' has been around for a while as it even works on my 2-3yr old nokia E71, and means I dont need the function key to enter phone numbers from the qwerty.

It does spring up some inconsistency though. E.g. for email, Html5 does some of its own validation (and pops up first), Its not therefore visually consistent with the other validation on the page.

Overall, I think having the ease of device choosing the most appropriate keyboard is more important than the inconsistent look in validation.

I would be cautious about adding other types e.g. Date without first having some classes to work out the type of device being used and therefore the content served. 'number' type should be fairly safe though, and again allow users to get the right keyboard for entering financials.

Clive

  4. Re: support for html5 input types 'tel' and 'email'   Reply   Report abuse  
Picture of Manuel Lemos
Manuel Lemos
2013-03-07 11:47:29 - In reply to message 3 from clive Turner
Right, as I said it would not be hard to add support to those more basic types of HTML5. The problem with be more to some of the more complex.

  5. Re: support for html5 input types 'tel' and 'email'   Reply   Report abuse  
Picture of clive Turner
clive Turner
2013-03-07 14:20:06 - In reply to message 3 from clive Turner
Addendum:

Needed to add
case "tel":
case "email":

to GetJavascriptConnectionAction, and OutputInput methods

to get focus and VALUE working respectively.

  6. Re: support for html5 input types 'tel' and 'email'   Reply   Report abuse  
Picture of sonia
sonia
2013-04-16 21:11:57 - In reply to message 3 from clive Turner
Hello,
my name is sonia,i am a young beautiful girl with a lovely heart . i saw your profile today and like to be your friend,You can write to me direct in my email (soniaibrahimma@yahoo.com) so that i will send more of my photo to you and tell you more about me. ( soniaibrahimma@yahoo.com)