Tutorial: HTML forms - Text fields and text areas
Level: Intermediate. Published on 28 November 2001 in HTML forms
Learn how to use text fields and text areas within HTML forms.
In this tutorial you explore two HTML form fields that allow visitors to enter text: text fields, suitable for short, single-line text, and text areas, which are suited to longer paragraphs of text.
Find out how to create HTML forms in our Building forms tutorial.
Text fields
Possibly the most widely used form field is the text entry field. This is a simple box into which the user can enter small amounts of text data, such as their name or email address. It takes the format:
<input type="text" name="xxxx"
value="xxxx" size="xxxx" maxlength="xxxx">
The name attribute is the name of the field (for example, "email_address" or "age"). The value attribute allows you to provide a default value that will appear in the box (the user can change the value if they want). This is optional - to leave the field blank, use value="" or miss out the value attribute altogether.
The size attribute specifies the physical size (width) of the form field, in characters. You can miss out this value in which case the browser's default field size will be used.
Finally, the maxlength attribute allows you to limit the amount of characters the user can enter. If you leave this value out, then the user can enter as much as they like.
Example:
Email Address: <input type="text" name="email_address"
value="" size="30" maxlength="50">
Text Areas
If you need the user to input a large amount of text (more than a single line), use the textarea field. It takes the format:
<textarea name="xxxx" rows="xxxx" cols="xxxx" wrap="xxxx">
(default text here)
</textarea>
The name attribute is the name of the field (for example, "comments"). The rows attribute specifies the height of the text area in characters, while the cols attribute specifies the width.
The wrap attribute controls how the text is wrapped when it reaches the right-hand edge of the textarea box. Possible values are:
- off
- The text will not wrap, and will be submitted exactly as it was entered by the user.
- soft
- The text as displayed in the textarea box will wrap, but it will be submitted exactly as it was entered by the user (i.e. with no wrapping).
- hard
- The text in the textarea box will wrap, and it will be submitted with line breaks inserted where the text wraps (i.e. exactly as it appears in the box).
Inside the <textarea></textarea> element, you can place some text that will be displayed in the text area when the form loads. The user can then change or delete this text as appropriate.
Example:
Please enter your comments below:<br>
<textarea name="comments" rows="5" cols="50" wrap="soft">
I love this site!
</textarea>
Other types of form fields
Now that you understand text fields and text areas, find out about:
- Checkboxes, radio buttons and menus
- Hidden fields, password fields and file upload fields
- Form buttons
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!