HTML Forms the way they should be

Features

• Maxlength on form textarea
• Enter Key to Tab on all browsers
• Autofocus on first form entry
• Autocapitalize and autocorrect off
• Keyboard with Email @ symbol

This document consists of two javascript files and some helpful advice for creating html forms. dlc_b

Download

1. Download impose_max_length.js

   Downloaded 0 times.

2. Download stop_enterkey.js

   Downloaded 0 times.

Include the js files in your html document by adding the following lines near the top of your document:

<script type="text/javascript" src="impose_max_length.js"></script> <script type="text/javascript" src="stop_enterkey.js"></script>

How It Works

Impose Max Length

The file impose_max_length.js makes it possible to add a maxlength attribute to an html textarea (which normally does not support maxlength). If a user types or pastes more than the maxlength characters in the textarea then the input will stop. The function will also calculate the number of characters and put it in a span with id of "num_letters" if you include that span. Add a textarea to your document with the following attributes to call the function:
<!--The span is optional--><span id="num_letters"> </span> out of 100 max.<br> <textarea name="description" maxlength="100" onpaste="imposeMaxLength(this);" onkeyup="imposeMaxLength(this);"> </textarea>

Stop Enter Key

The javascript file stop_enterkey.js will stop an enter key on an input element from submitting a form. Instead it will advance to the next input form element, like the tab key. It has been tested to work in Internet Explorer, Firefox, Chrome and Safari. This function is easy to write for IE because we can simply change the keycode to a tab with window.event.keyCode=9;. But this is not possible with the other browsers. For the other browsers the function needs to first prevent the default form submission with ev.preventDefault(); (for Firefox) and then cycle through the form elements and find out which element is currently focused on and then focus on the next element (but it skips hidden, readonly and disabled inputs).

The function will allow the enter key to sumbit the form if it is on a type="submit" button or if you add the custom attribute data-allowsubmit="true" to an input element such as a login password. Example: <input data-allowsubmit="true" autocapitalize="off" type="password" name="password" size="50" maxlength="50">

The function also allows the enter key to act as a normal enter key (adding linebreaks) in a textarea.

Sample Form

<form name='fm' action='' method='post'>

Email: <input autocapitalize="off" autocorrect="off" spellcheck="false" type="email" autofocus id="first" name="email" size="50" maxlength="50">


Display Name: <input autocapitalize="off" autocorrect="off" spellcheck="false" type="text" name="name" size="25" maxlength="25">


<input type="hidden" name="test" value="123">



<span id="num_letters">   </span> out of 50 max.<br>
About You: <textarea name="description" maxlength="50" onpaste="imposeMaxLength(this);" onkeyup="imposeMaxLength(this);" cols="50" rows="3">
</textarea>

Password: <input autocapitalize="off" type="password" name="pw" size="50" maxlength="50">


Confirm Password: <input data-allowsubmit="true" autocapitalize="off" type="password" name="cpw" size="50" maxlength="50">


<input type="submit" name="submit_it" value="Submit">


</form>

Autofocus on first element

Notice that the first input element in the sample form has the autofocus attribute in it. This will cause the cursor to appear in this form element when the page loads so the user can start typing without having to click in the element. This works in Internet Explorer 10, Firefox, Opera, Chrome, and Safari. However in previous versions of Internet Explorer this will not work without an additional javascript command. Notice how we also gave this form input the id of id="first". The following javascript function which you should place at the end of your form will cause the element with id="first" to be focused on when the page loads:

<script type="text/javascript" language="JavaScript"> document.getElementById("first").focus(); </script>

iPhone and HTML5 autocapitalize, autocorrect, and spellcheck

On smartphones like iPhone and Android phones you will want to turn off autocaptialize for fields such as email fields and you will want to disable autocorrect on username or display name fields. You can do this by adding autocapitalize="off" autocorrect="off" attributes to the input tag. For HTML5 which Chrome and other browsers use you'll want to add spellcheck="false".

Keyboard with Email @ Symbol

On smartphones like iPhone and Android phones for email inputs change the type to type="email" instead of type="text". This will display a custom keyboard with both a . and @ symbol.

Last updated on
Created on