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[0]. 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.
<script type="text/javascript">
function displayText(text)
{
alert(text);
}
</script>
<form>
<label>Name: </label>
<input type="text" name="myText" />
<input type="button" value="Display Text"
onclick="displayText(this.form.myText.value)" />
</form>
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.
If you use the maxlength attribute, it's a good idea to set size less than maxlength, otherwise the user will see more space available, but the text box will not accept more characters than maxlength, leaving the user confused and frustrated.
<input type="text" size="10" maxLength="12" />
dir Attribute
The dir (direction) attribute sets the direction in which the text will flow as the user types characters into the text box. It also sets which side of the text box the input prompt appears initially. dir="rtl" sets characters to go from right-to-left. dir="ltr" is the default, but you may need to set dir="ltr" if you set the text boxes parent element to dir="rtl" in order to avoid inheritance.
<input type="text" dir="rtl" />
One common reason for using dir="rtl" is when using a text box in a calculator application. In a calculator when users enter numbers, they expect them to appear from right-to-left. Note that the data entered into a text box is always character data. There are several built-in Java Script functions that will convert the character data to numerical data (parseInt, ParseFloat), however you should use the Java Script built-in isNaN (is Not a Number) function to validate the users input before sending it to your calculator logic.
disabled Attribute
The disabled attribute prevents the user from entering input into the text box.
<input type="text" disabled />
The disabled attribute might be used to disable a certain textbox until after another form input element is set by the user, or it might be used to disable a text box until after the webpage has reached a certain state. After the requirement is met you can use Java Script to re-enable the text box as shown below.
<script type="text/javascript">
function enableText()
{
document.myForm.myText.disabled = false;
}
</script>
<form name="myForm">
<label>Name: </label>
<input type="text" name="myText" disabled />
<input type="button" value="Enable Text Box"
onclick="enableText()" />
</form>
readOnly Attribute
The readOnly attribute prevents the user from entering input into the text box.
<input type="text" value="Read Only Text" readOnly />
The readOnly attribute might be used for purposes similar to the disabled attribute, except in the case of the readOnly attribute you might set the contents of the text box to some initial text using the value attribute. Again, you can use Java Script to re-enable text entry into the text box as shown below.
<script type="text/javascript">
function allowWrite()
{
document.myForm.myText.readOnly = false;
}
</script>
<form name="myForm">
<label>Name: </label>
<input type="text" name="myText"
value="Enter Name Here" readOnly />
<input type="button" value="Allow Write"
onclick="allowWrite()" />
</form>
Input type password
The code shown below demonstrates that although a dot appears as the user types each letter into a password type text box, the actual password text can be inspected using Java Script.
<script type="text/javascript">
function displayText(text)
{
alert(text);
}
</script>
<form>
<label>Password: </label>
<input type="password" name="myPassword" />
<input type="button" value="Display Password"
onclick="displayText(this.form.myPassword.value)" />
</form>
Input type hidden
The code shown below demonstrates that although text in a hidden type text box is not visible on the webpage, the hidden text can be inspected using Java Script.
<script type="text/javascript">
function displayText(text)
{
alert(text);
}
</script>
<form>
<label>Name: </label>
<input type="text" name="myText" />
<input type="hidden" name="myHidden" value="My Hidden Text" />
<input type="button" value="Display Hidden Text"
onclick="displayText(this.form.myHidden.value)" />
</form>
The most common way to receive information from a visitor to your website is to let them type it into a text box. In this article you learned the basics of using text boxes on your webpages.
More HTML Code:
• HTML Bulleted or Unordered List
• HTML DIV Basics
• HTML Special Characters - Character Entities
• Text Features
• Form Input Labels
• Webpage DOCTYPE Declarations Explained
• HTML Textarea Basics
• HTML Definition List
• How to Make a Table Scroll
• How to Troubleshoot an HTML Table