HTML Text Box Code

You can use the following code as a basis for adding a text box to your website. This will enable your users to provide multi-line comments. Most browsers will render scroll bars on the text box as soon as its contents are too big for it.

To make this text box do something, simply place it within a form that submits the contents to the server for processing.

Basic Text Box

<textarea name="text" cols="25" rows="5">
Add multiple lines of text here and watch the scrollbars grow...
</textarea>

Customizing your Text Box

You can change the color, add borders, and add a background picture to your text box. Here are some examples.

Color

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:96%;height:90px;background-color:gold;color:olive;border:none;padding:2%;font:22px/30px sans-serif;">
Need background colors on your text box?
</textarea>
<input type="submit" value="Submit" style="background-color:yellowgreen;color:white;padding:5px;font-size:18px;border:none;padding:8px;">
</form>

More Comment Box Colors →

Background Image

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="text" id="text" style="width:96%;padding:2%;height:180px;font:36px/44px sans-serif;color:white;text-shadow:1px 1px 5px black; background:url('/pix/samples/bubble2.gif');">
Or how about a background picture?
</textarea>
<input type="submit" value="Submit">
</form>

More Comment Box Pictures →

Borders

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:92%;padding:2%;height:150px;font:36px/44px cursive;border:10px double yellowgreen;">
Oh... you'd rather add some borders around your text box?
Hey... why not try all three!
</textarea><br>
<input type="submit" value="Submit">
</form>

More Comment Box Borders →

Scrollbars

<!DOCTYPE html>
<html>
<head>
<title>My Example</title>

<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}

/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px olivedrab;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
background: yellowgreen; 
box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:hover {
background: #7bac10;
}
</style>
</head>
<body>

<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>

</body>
</html>

More Scrollbars →

Text Box Templates

You can also change things about your text box such as the size, how many rows/columns it has, and much more.

You modify your text box by changing the value of the attributes. Attributes are the bit that look something like someattribute="somevalue" (for example, cols="40" ).

You can use the following templates as a basis for your HTML text box codes. Simply fill in the blanks or remove uneeded attributes.

1. The Text Box Tag

For an explanation of all the attributes, see the textarea.

2. The HTML Form Tag

Note that text boxes are part of an HTML form. The HTML form tag also accepts its own attributes, as follows:

For an explanation of all the attributes, see form.

Web.QHMIT.com