Spring.Into.HTML.and.CSS [Electronic resources]

Adding an Input Textbox

Input textboxes are used for a number of form needs, including any time you want someone to type out his name, address, and so forth. To create a textbox, you use the input element along with the type attribute and a value of text (see Example 5-2).

Example 5-2. Adding input textboxes

<form method="get" action="http://www.myserver.com/cgi-bin/mailscript/">
First Name: <input type="text" /><br />
Last Name: <input type="text" /><br />
Phone: <input type="text" />
</form>

As Figure 5-1 shows, using input with the type attribute for a text input generates a familiar-looking form.

Of course, you can see that this isn't exactly orderly or attractive. That we'll fix with CSS later in the book, but a few technical issues need to be dealt with long before we get to that. Most important is how to distinguish one form field from another. The input element creates the input textbox, but you'll want to identify each form field as well as modify them in terms of how they look and behave. To identify input fields, you use a combination of name and id with associated values. This ensures that the form will be backward compatible and enables you to identify specific input areas for styling, scripting, and accessibility purposes. Example 5-3 shows how this would work in our code sample so far.

Example 5-3. Identifying text input with name and id

<form method="get" action="http://www.myserver.com/cgi-bin/mailscript/">
First Name: <input type="text" name="firstname" id="firstname" /><br />
Last Name: <input type="text" name="lastname" id="lastname" /><br />
Phone: <input type="text" name="phone" id="phone" />
</form>

The next step is to set the size of the textbox. Using the size attribute, you can provide a width for each field. You can also set the number of characters that the text input will accept, and this is accomplished using the maxlength attribute (Example 5-4).

Example 5-4. Modifying text input with size and maxlength

<form method="get" action="http://www.myserver.com/cgi-bin/mailscript/">
First Name: <input type="text" name="firstname" id="firstname" size="25"
maxlength="40" /><br />
Last Name: <input type="text" name="lastname" id="lastname" size="25"
maxlength="40"/><br />
Phone: <input type="text" name="phone" id="phone" size="15" maxlength="0"  />
</form>

Wherever maxlength is set to 0, the number of characters that can be entered is not restricted; those that have specific integers will be limited to that number. Figure 5-2 shows the sized text fields, which are longer than those in 5-1.

Another input that works similarly to text input is the password field. This works the same exact way in all aspects, except that the results are echoed back using asterisks (see Figure 5-3).

<input type="password" name="password" id="password" size="15" />