How to Input Boxes in HTML
HTML consists of text that defines a Web page's controls and appearance. One frequently used element is the HTML input box. Input boxes allow you to retrieve input and feedback from site visitors. You can place input boxes inside forms or use them as standalone content gatherers. Alter their colors, sizes and behavior by applying CSS (Cascading Style Sheet) properties. Learning to use HTML input boxes enhances your ability to provide quality interaction between your site visitors and your Web pages.
Other People Are Reading
Instructions
-
-
1
Open Notepad. Paste the following HTML code into an empty document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Input Box Test</title>
</head>
<body>
<h1>Input Boxes</h1>
<form>
Name: <input type="text" name="inputBox1" size="50" class="textBox"/>
Password: <input type="password" name="passwordBox1" size="25" class="passwordBox" />
<br />
Comments:<br />
<textarea id="TextArea1" cols="50" rows="6" class="textareaBox" />
</form>
</body>
</html>
This creates a text box, a password box and a larger "text area" box that contains multiple lines. The "value" property in the "text" input box defines the box's text. Change the text value to anything you like. The "password" box masks text as users enter text. The two "input" tags and the "textarea" tag reference a unique CSS class.
-
2
Add the following CSS code below the "<title>" tag in the document:
<style type="text/css">
.textBox {color: #FFFFFF; background-color: #0000FF; border-width:2px; border-style: solid;}
.passwordBox {color: #000000; background-color: #FF0000; border-width: 2px; border-style: dotted;}
.textareaBox {color: #000000; background-color: #00FF00; border-width: 2px; border-style: dashed;}
</style>
These CSS classes define the appearance of the boxes. The "background-color" property sets the background color. The "border-style" property sets the border style, and the "color" property sets the font color. In this example, the "password" input box will have a white font, red background and dotted border that is two pixels wide.
-
-
3
Save the Notepad file with a file extension of "html." For example, to name the file "InputBoxes," save it as "InputBoxes.html."
-
4
Open the file in your browser and view the input boxes on the Web page.
-
1
Tips & Warnings
Use a "password" input box when you need to request a password from your site visitor. The "cols" property defines the number of visible characters in an input box. You can apply other CSS styling properties to all HTML elements. For example, you can set an input box's font by adding a CSS font property (see Resources). Experiment with different CSS values to create the style that suits your needs.
References
Resources
- Photo Credit Stockbyte/Stockbyte/Getty Images
