Input Box


The input box is probably the most common form element for collecting data. It is used primarily for the user to enter single words, short phrases, or numerals. It is an input tag with the type="TEXT" attribute placed within the opening and closing form tags. By default, the input box will display 20 characters. Remember that each form element should use the name="value" attribute where value is equal to a unique variable name that the script or executable will be looking for. The code for inputting this element is highlighted in the example below.

Example Code:

<form method="POST" action="scriptname.cgi">
Last Name: <input type="TEXT" name="lastName" />
   <input type="SUBMIT" value="Submit" />
   <input type="RESET" value="Reset" />
</form>


The Result:


Last Name:


Occasionally, you may wish to change the default size of the input box and even limit the user to only input a certain number of characters into the box. Examples of this might be the two letter state abbreviation, social security numbers, or telephone area codes. We can adjust the length (or size) of the input box by including the size="value" attribute where value is equal to the number of characters in length. If we wish to limit the number of characters the user can type in, we include the maxlength="value" attribute where value is equal to the maximum number of characters that can be typed into the input box. In the example below, try typing in more than three characters.

Example Code:

<form method="POST" action="scriptname.cgi">
Area Code: <input type="TEXT" name="areaCode" size="3" maxlength="3" />
   <input type="SUBMIT" value="Submit" />
   <input type="RESET" value="Reset" />
</form>


The Result:


Area Code: