HTML Text Input Box Basics
By Stephen Bucaro
The most common way to receive information from a visitor to your website is to
let them type it into a text box. A text box is actually one of the form INPUT
controls. Other form INPUT controls are the checkbox and radio button.
In order to receive the contents of the text box you'll need the user to submit
the form, usually by clicking on a [Submit] button, and you'll need a program or
script on your web server to accept the contents of the text box.
Shown below is the most rudimentary code for a text input box.
Name: <input type="text" />
This code will display a text input box on your webpage. Because it is not within
<form> </form> tags, it will, by default be a control belonging to form.
Normally a form tag has an action attribute which defines the program or
script on your web server that will accept the contents of the text box, but with
this rudimentary code, the contents of the text box are going nowhere.
You can however access the contents of the text box with Java Script on your
webpage and use the information in the text box to make dynamic changes to your
webpage. This is known as DHTML (Dynamic HTML). To access the contents of the
text box you can call a Java Script function with the text boxes onchange event,
or put a button next to the text box and use the button's onclick event.
There are actually three types of text box controls, as shown below:
<input type="text" />
<input type="password" />
<input type="hidden" />
The password type input control is similar to the text type input
control except a dot appears as the user types each letter so that someone standing
behind the user cannot see the what's being typed into the text box. The hidden
type input control is not visible on the webpage. It can be used to submit
information to the web server or a Java Script function that is not visible to the user.
The focus of this article is on the html attributes of the text input control,
so I will not be going into Java Script or Cascading Style Sheets, however the code
shown below demonstrates how to use the text input control with a button and
use Java Script on your webpage to access the contents of the text box.
<input type="text" name="myText" />
<input type="button" value="Display Text"
size and maxLength Attributes
The text input control's size attribute sets the width of the text box
and the maxLength attribute sets the maximum number of characters that
the user can type into the text box. You can use these attributes singly or combined.
The size attribute does not limit the number of characters that the
user can type into the text box. If the user types in more characters than size,
the text will scroll. It's a good idea to make the size of the text box at least
as long as the length of what the user might be expected to type in, otherwise
the scrolling might annoy the user, however size is often set in order to
format the form containing the text box.