The <input> tag in HTML is used to add input boxes to a web page for users to enter text or other information. There are different types of input boxes like text boxes, submit buttons, textareas, select dropdowns, radio buttons, and checkboxes. Examples show how to add these different input fields and customize them with attributes like size, color, and layout. The <input> tag allows users to interact with forms and submit data to a web server.

1. HTML Tags
<input>
(input field)
By: Jeffrey C. Johnson III

2. <input>
<input> is the HTML
for adding an input
box to a web page.

3. Function
The function of the tag
<input> is to add an
input box for text on a
web page.

4. Function
This allows users to type and
submit some type of
information or a comment
on a web page.

5. Attributes
When you use the tag <input> it
adds a boxed area designated
for users to type information
to add to the page.

6. Examples
There are different types of input boxes that
can be added.
Example 1:
<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 1 add a small text box
Example 2: with a submit button
<form method=post action="/cgi-bin/example.cgi">
<input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold;
font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form> Example 2 does same as
Example 1, but adds
color to the box

7. Example 3:
<form method=post action="/cgi-bin/example.cgi">
<table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff">
<input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff"
valign="Middle"> <input type="image" name="submit" src="yourimage.gif">
</td></tr> </table>
</form>
Example 3, like 1&3 adds a box with
submit button but adds more color
Example 4: and style to the input box
<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example 4 adds a bigger text box for
more characters, and give users the
option to clear text.

8. Example 5:
<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option> Example 5 adds an option box
<option>option 3</option> that lets users choose from
<option>option 4</option> different options.
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>

9. Example 6:
<form method=post action="/cgi-bin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<br>
<br>
Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Example 6 give you options with bubbles or
check-boxes to make selections.

10. Screenshots
Examples of input boxes on various
websites.
Left: Screenshot of multiple input
boxes on one page from Yahoo.com