Working With and Creating Input Boxes

An input box is a single-line box into which the user can enter text or numbers. To create input boxes, you need to use the <INPUT> tag, which you will see later is also used for other types of fields. The general syntax of the <INPUT> tag is:

<INPUT TYPE=Option NAME=Text>

where Option is the type of input field, and Text is the name assigned to the input field.

The Type property can have the following values:

  • Button
  • Checkbox
  • Hidden
  • Image
  • Password
  • Radio
  • Reset
  • Submit
  • Text
  • Textarea

The input field you will first use is Text as the value for the Type property. The NAME property is required with the <INPUT> tag. When information is sent to the CGI script, field names are used to identify what values have been entered in each field.

 

Creating an Input Box

To create an input box, use the following tag:

<INPUT NAME=text VALUE=value SIZE=value MAXLENGTH=value>

where the NAME property set the field name, the VALUE property assigns a default value to the input box, the SIZE property defines the width of the input box in number of characters, and the MAXLENGTH property defines the maximum number of characters allowed in the field.

The first part of the registration form deals with contact information for the customer. Each of the field in this section is an input box. Because input boxes are blank boxes without any accompanying text, you have to insert a text description next to each box so that the user knows what to enter. The form you will create, will also using a table to control the form's layout, so you'll have to add the appropriate row and cell tags as well.

Return to your text editor and enter the following lines between the <TABLE> and </TABLE> tags (indenting the lines will make it easier to read):

<TR>

 

<TD>First Name:</TD>

<TD><INPUT NAME=FirstName>

Last Name: <INPUT NAME=Lastname></TD>

</TR>

<TR>

 

<TD>Address:</TD>

<TD><INPUT NAME=Address></TD>

</TR>

 

<TR>

<TD>City:</TD>

<TD><INPUT NAME=City> State: <INPUT NAME=State>

Zip: <INPUT NAME=Zip></TD>

</TR>

<TR>

 

<TD>Country:</TD>

<TD><INPUT NAME=Country></TD>

</TR>

Save your changes and view it in a browser.