HTML Form Text Boxes

One of the most common HTML form input types available is the text input. These will accept a single line of text, and are ideal for things like names, usernames and so on. To use a text input you must use the HTML input tag, and then use the type attribute to specify the text input type. In addition, you must give your input a name. This is necessary for all inputs, because otherwise the browser would have no way of distinguishing between them when it comes to processing the form data on the next page.

Here is a typical use of HTML text inputs. Note that the method and action attributes have been omitted; this means that the form data will not be sent anywhere, which is fine for our example.

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

This will display the following input fields, which the user can fill out:

First name:

Last name:

We can control the behavior of text fields even more with the size and maxlength attributes, specified in number of characters. These will set the width of the text box and the maximum amount of data that can be entered. For example, we could make our input 30 characters wide but limit the user to entering only 20 by using the following HTML:

<input type="text" size="30" maxlength="20" />

We can also assign a default value to our text boxes by using the value attribute, like so:

<input type="text" value="username" />

The Password form input

The password HTML input is almost identical to the text input; in fact there is only one small difference - with a password input, the browser will obscure what you type by replacing the characters with symbols such as asterisks or dots, depending on your browser. This means that it cannot be read by anyone who might be looking over your shoulder at the time. Obviously, these were specifically designed for inputting passwords, although you can use them any time you want to obscure text from view. A typical user login form might look like this:

<form>
Username:
<input type="text" name="username" />
<br />
Password:
<input type="password" name="password" />
</form>

Try it out, and see that when you type in the password field, the letters are replaced by obscuring characters:

Username:

Password: