<INPUT> Tags

The <INPUT> tag defines a basic form element. This tag takes at least two attributes, namely TYPE and NAME. TYPE indicates what kind of element should appear on the form. An example would be: <INPUT TYPE="TEXT">. NAME assigns a value to go with the input that corresponds to the <INPUT> tag. An example would be: <INPUT TYPE="TEXT" NAME="email">

You use NAME to identify the contents of a field in the form, information that is ultimately uploaded to the input-handling Web server. In fact, what the server receives is a series of name/value pairs.

If you are asking for someone's email address, you would use something like this: <INPUT TYPE="TEXT" NAME="email"> and on your form it would appears as:

What is your email address?

The results you would get back would look like this:
(email) fred@geocities.com

The TYPE attribute can take any of the following values:

  • <INPUT TYPE="CHECKBOX"> produces an on-screen check box for users to make multiple selections.

     Go ahead, select them all.

  • <INPUT TYPE="HIDDEN"> produces no visible input area; use this to pass data needed for other uses through the form.

  • <INPUT TYPE="IMAGE"> lets you designate a graphic as a selectable item in a form. You can use this to include icons or other graphical symbols.

  • <INPUT TYPE="RADIO"> creates a radio button for a range of selections, from which the user may select only one.

     Go ahead, try and select more than one.

  • <INPUT TYPE="RESET"> creates a button labelled "reset" in your form. Include this so that users can clear a form's contents and start over. Be sure to place it well away from other controls, you don't want them to clear the form by accident! 

  • <INPUT TYPE="SUBMIT"> creates a button labelled "submit." The TYPE="SUBMIT" tells the browser to bundle the form data and pass it all to the CGI script indicated by the ACTION attribute. In plain English (remember that??), SUBMIT is the button readers use to send in the filled out form. 

  • <INPUT TYPE="TEXT"> provides a one line area for text entry. Use this for short fields only. For longer text fields, use the <TEXTAREA>...</TEXTAREA> tags instead. 

  • <INPUT TYPE="BUTTON"> creates a button which you can label as you like.

Other <INPUT> Attributes

Most remanding attributes exist to modify <INPUT> tag.

  • VALUE=" " supplies a default value for a TEXT or HIDDEN element or supplies the corresponding value for a radio button or check box selection. You can use this to determine the label of a submit or reset button, like VALUE="Submit to Admin" for a submit button
    or VALUE="Clear Form" for a reset button.

  • SRC="URL": Provides a pointer to the graphic for an IMAGE.

  • CHECKED: Makes sure that a certain radio button or check box is checked when the form is visited for the first time or reset.

  • SIZE="number": Sets the number of characters that a TEXT element can display without scrolling.

  • MAXLENGTH="number": Sets the maximum number of characters that a value in a TEXT element can contain.

  • ALIGN=(TOP|MIDDLE|BOTTOM|LEFT|RIGHT): For IMAGE elements, determines how the graphic is aligned on the form and the accompanying text

That's it for the<INPUT> tag. Now let's put some of this together and make a form.


[Back to last page]   [Next Page]