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.

Leave a Comment