Mobile friendly form elements

Make your contact forms more user friendly and elegant

Use HTML5 input types to trigger a useful keyboard

** Website URL keyboard **

<label for="website">Website:</label>
<input type="url" name="website" placeholder="www.yourwebsite.com" />

** Telephone keyboard **

<label for="tel">Tel:</label>
<input type="tel" name="tel" placeholder="Your telephone number" />

** Email keyboard **

<label for="email">Email:</label>
<input type="email" name="email" placeholder="you@yourwebsite.com" />

** Time keyboard **

<label for="time">Time:</label>
<input type="time" name="time" placeholder="9:00 AM" />

** Date keyboard **

<label for="date">Date:</label>
<input type="date" name="date" placeholder="DD/MM/YYYY" />

Turn off phone number detection because any number on-screen can be mis-determined by the browser.

<meta name="format-detection" content="telephone=no" />

Instead, you can control real phone number detection directly where they might be listed.

Tel: <a href="tel:14085555555">1 408 555 5555</a>

Additional textual formatting.

<input type="text" name="username" autocorrect="off" autocapitalize="off" />
<input type="text" name="first-name" autocapitalize="words" />
<input type="text" name="last-name" autocapitalize="words" />
<input type="text" name="state" autocapitalize="characters" />
<textarea name="comment" autocapitalize="sentences"></textarea>

Hope this helps someone else out there.