Render HTML 5 aware input element types

For example, given:

    email: {type: Types.Email},

Then the Admin UI rendered input field should be:

<input autocomplete="off" name="fieldA" value="" type="email" class="FormInput" data-reactid=".1.$=10.0.0.3.1:$fieldA.1:0.0">

Where it is currently:

<input autocomplete="off" name="fieldA" value="" type="text" class="FormInput" data-reactid=".1.$=10.0.0.3.1:$fieldA.1:0.0">

This issue should probably enumerate all other fields that should be HTML 5 type aware and handle them all. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

DEV NOTE This should be pretty easy to do. Field types use the elemental’s FormInput component to render input fields. You can pass it the type as a prop. For example, for email inputs update EmailField.js as follows:

    <FormInput type="email" ...

[adamscybot]

This should be done, however you will want to add the novalidate attribute to each field as as mentioned above, you dont’ want the browsers native client side validation to kick in. a) Because its difficult to style consistently cross browser and b) because you probably wan to handle that logic within the client side app anyway.

Its advantageous to use these correct types though – for one, it brings up the best keyboard on mobile devices.

[pll33]

@webteckie Yeah no problem, I can take ownership on this. I’ll reference issues with the color and time fields later today.