Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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[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.