Welcome to ITM Web100 Training Program

The Text Field Widget

• The most common interface widget is the Text Field. A Text Field allows a user to type in a line of text and looks like the following:

  Try it out...type in some text.

  Behind the scenes, the above text field was created with the following HTML code

  <FORM ACTION = "">
  <INPUT	TYPE = "TEXT" 
  	NAME = "demo"
  	>
  </FORM>
  

• Notice that the Text Field widget is specified as an input TYPE of "TEXT". Also notice that if you hit return after typing in some text, you will be returned to this page. This is because we have not specified an ACTION in the FORM tag. I did this so you can focus on the widget instead of a CGI script.

• The Text Field also has several other attributes that affect how it works. The following table outlines them:

• Let's take a closer look at each of these attributes.

The VALUE attribute

• The VALUE attribute allows you to specify default text. Here is an example:

  And here is the code that we used to make that text field.

      <FORM ACTION = "">
      <INPUT 	TYPE 	= "TEXT"
  		NAME 	= "demo"
  		VALUE 	= "default text"
  		>
      </FORM>
      

The MAXLENGTH attribute

• The MAXLENGTH attribute allows you to specify the maximum number of characters allowed for input. Here is an example that only allows you to type in 5 characters. Try it out for yourself:

  And here is the code that we used to make that text field.

      <FORM ACTION = "">
      <INPUT 	TYPE 	 = "TEXT"
  		NAME 	 = "demo"
  		MAXLENGTH= "5"
  		>
      </FORM>
      

The SIZE attribute

• The SIZE attribute allows you to specify the width of the text field itself. Here are two examples that show the attribute being used:

  And here is the code that we used to make the text fields.

      <FORM ACTION = "">
      <INPUT 	TYPE = "TEXT"
  			NAME = "demo"
  			SIZE = "30"
  			>
      <INPUT 	TYPE = "TEXT"
  			NAME = "demo"
  			SIZE = "20"
  			>
      </FORM>