Creating Forms: Text and Password Fields
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.