How to Create Custom Text Boxes in HTML
A text box is used on an Internet form to provide your visitor with an area to enter his information. These boxes initially display with a white background and black text, but consider changing these characteristics to meet your needs. For example, style the text box to match the rest of your page layout, or design this feature to call attention to a particular box. Using HyperText Markup Language (HTML) in conjunction with Cascading Style Sheets (CSS), create your own custom text boxes.
Other People Are Reading
Instructions
-
-
1
Launch your text editor and create a new page. Enter the following code to create a basic text area:
<textarea cols="50" rows="6">
This is the text that displays inside your text box.
</textarea> -
2
Enter “style=” in the “<textarea>” tag, type the “background-color” identifier and follow this with the desired background shade. Use a name of a color, such as “blue,” and type your background color as follows:
<textarea cols="50" rows="6" style=”background-color:blue;”> -
-
3
Type in a “border” identifier to assign an outline style for your text box. Select a line style, such as “solid” or “dotted,” pick a line size in pixels (px) and choose a color for this feature. For instance, create a dotted border that is two pixels and red:
<text area cols="50" rows="6" style=”background-color: blue; border: dotted 2px red;”> -
4
Enter a “font” identifier to assign the size of the content that appears inside your text box. This text gives the visitor a hint about what you are asking for (for example, "Enter your comments here."). To illustrate, make the font 14 pixels:
<text area style=”background-color: blue; border: dotted 2 px red; font: 14px;”> -
5
Save your document with the “HTML” ending (extension).
-
1
References
Resources
- Photo Credit Ciaran Griffin/Lifesize/Getty Images
