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 shows, using input with the type attribute for a text input generates a familiar-looking form.
Form inputs with text.
Of course, you can see that this isn't exactly orderly or attractive. That we'll fix with CSS later in the tutorial, 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. Following shows how this would work in our code sample so far.
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.
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 shows the sized text fields, which are longer than those in 5-1.
Sizing input fields and modifying character width.
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" />
The password input field echoes back asterisks.
