HTML - Text Fields
Text fields offer a small rectangular box that's always ready to receive information from viewers. Users will notice that when they click these fields, the cursor will change from the typical arrow to a pipe character ( | ), allowing for text entries to be typed inside each input field.
A text field is placed on a web page using the <input> tag, with the type attribute set with a value of "text".
HTML Text Field Code
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" />
<input type="submit" value="SUBMIT" />
</form>
HTML Text Fields
First: Last:
Text fields are designed to capture single words or phrases from the user. That information may then be processed through some kind of client/server side script (PHP, PERL, JavaScript, Asp). If you do plan on processing the data, be sure to include the name and id attributes. A descriptive title is also a great visual aid for providing a tool-tip display for your web elements.
HTML - Text Fields: Size Attribute
To modify the visual presentation of a text field, one needs to pass an integer value to the size attribute. The value represents how many characters a text field can display within the text field window.
As the web designer, it is your job to analyze and predict the average length of characters that will be entered into each field by your users. First and last names may generally vary from 8-24 characters in length, while a typical email address may range from 12-36 digits.
HTML Text Field Size:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" /><br />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" /><br />
<input type="submit" value="SUBMIT" />
</form>
HTML Text Field Size
First:
Last:
If the user happens to enter more digits than the size attribute value, these characters will not be discarded; it just means that the user will not be able to see all of their input at once. Instead, they will be forced to scroll to the beginning and end of the input element, which tends to discourage user interaction.
HTML - Text Fields: Maxlength Attribute
Maxlength is an optional attribute that accepts an integer value. It allows the developer to restrict the number of characters a user can type in a specific text field.
HTML Text Field Maxlength:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="3" value="David" /><br />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="3" value="Smith" /><br />
<input type="submit" value="SUBMIT" />
</form>
