Creating Forms

Text and Password Fields

Text boxes, with a type attribute of "text," are ideal for letting users enter short words and phrases, like a first or last name, a login name or a password.

<input type="text" />

Which creates a text box like this:

Don't forget to label this textbox with a name attribute:

<input type="text" name="login" />

You can make the box longer or shorter by specifying its size attribute. In a text field, the number you provide in the size attribute is the number of letters or digits that will fit in the text box:

<input type="text" name="login" size="25" />

If you want to have some kind of text already in the text box when users first see it, you can specify that text with the value attribute:

<input type="text" name="login" size="25" value="Enter login name here" />

Your users can erase any value you've placed in a text field, and type in their own words. See for yourself:

Password Fields

To create an text field that automatically hides whatever information is typed into it, use "password" instead of "text" as your type attribute:

<input type="password" name="password" size="16" />

The result will look just like a text field, but anything typed into it will show up as asterisks (********). No one will be able to copy its contents and paste them somewhere else, either. Try typing in the box below:

Try it Yourself

Make your own tweaks or additions to the code in the left box below, then click "Show Changes" to see the results in the right box.