HTML Message Box Styles

You can use HTML to embed three different kinds of message boxes on a Web page. The type of message box you use depends on the type of site you're creating: comment or login pages use message boxes designed to retrieve visitor data, while information-dense pages use message boxes designed to save space.

DIV Boxes

DIV elements are most often used to organize a website into different sections, but can also function as a message box if overflow -- a cascading style sheets attribute -- is set to "scroll." Overflow defines what happens to an element if text or other objects flow outside of the element's boundaries. Changing "overflow" to "scroll" adds scroll bars to the DIV element. Visitors can't change the contents of a DIV element, so Web designers must add the desired text in between the "<div>" and "</div>" tags to populate the message box.

Text Areas

Text areas can contain an unlimited number of characters. Unlike DIV elements, which are locked, visitors can enter or remove text contained within a text area, although the changes won't go live -- in other words, other visitors who come to the site won't see the changes to the text area. Most Web designers use text areas as comment fields. "Cols" and "rows" change the default dimensions of the text area; "cols," or columns, determines the width of the message box, while "rows" determines the height.

Text Fields

Text fields are similar to text areas in that visitors can change the contents of the box, but unlike text areas and DIV elements, text fields are limited to one line. Text fields are form elements used to obtain information from a visitor; for example, most websites use text fields labeled "Email" and "Password" to retrieve login credentials. You can lock text fields with the "readonly" attribute, a function often used in combination with JavaScript to prevent visitors from entering text into the message box without first completing a set of preliminary instructions.

Usage

Use "<div>" and "</div>" to add DIV elements to a page, "<textarea>" and "</textarea>" to add text areas, and "<input type="text">" to add text fields. When adding password fields to a page, use "<input type="password">" instead of "<input type="text">." To obtain data from a user via a message box, enclose the box in the "<form>" and "</form>" tags.

References

• W3Schools: HTML Forms and Input
• W3Schools: HTML Textarea Tag
• W3Schools: CSS Overflow Property
• HTML, XHTML, and CSS: Your Visual Blueprint for Designing Effective Web Pages; Rob Huddleston