One of the most important applications of HTML documents is to provide the web page equivalent of a paper data input form. In some cases, a form just helps to organize user input to a web page. For this book, the purpose of a form is to facilitate interaction between an HTML document and PHP code for processing user input.
HTML forms are defined by the form element, using start and end tags:<form>…</form> tags. The attributes of theform element are:
Cloud Type Chart Altitude Cloud Name
High Cirrus Cirrocumulus Cirrostratus Middle Altocumulus
Altostratus
Low
Cumulus nonprecipitating Altocumulus nonprecipitating Stratocumulus nonprecipitating Cumulonimbus precipitating Nimbostratus precipitating
action = "…"
Value: a programmer-supplied URL that identifies a processing script, PHP file name, or mailto: followed by an email address. For example, action="mailto:my_mail@my_univ.edu".
enctype="…"
Value: enctype="text/plain" is the usual value, but it is not needed when method="post" is used with PHP applications.
method = "…"
Values: "get", "post"
3.1 The table Element 41
Controls how data from a form is sent to the URL, PHP file, or email address identified in the action attribute. In this book, the "post" value is used because it is the easiest way to transmit form data in an easily usable format.
name = "…"
Value: a programmer-selected name that is used to identify the form.
The name attribute is needed only if a document contains more than one form.
Forms contain one or more input fields identified by <input /> tags.
Because theinputelement does not enclose content, it has no end tag, so it requires a closing slash for XHTML compliance. The most important attribute of input is its type. There are several field types that have well-defined default behaviors in HTML. The possible values are listed in Table 3.1.
There is no field type specifically for numerical values. In some cir- cumstances, this can be an issue, but as will be seen later, it presents no problem for sending values from aninput element to a PHP application.
Table 3.1 Values for theinputelement’stypeattribute
Field type Description
type = "button" Provides a programmer-defined action to be associated with the field through the use of an event handler such asonclick type ="checkbox" Allows selection of one or more values from a set of possible
values
type = "hidden" Allows the definition of textfields that can be accessed by a PHP script but are not displayed in a document
type = "password" Allows entry of character data but displays only asterisks type = "radio" Allows selection of one and only one value from a set of possible
values
type = "reset" Used to reset all formfields to their default values
type = "submit" Processes form contents according tomethodandaction type = "text" Allows entry of character data
Here is a list of attributes for the input element.
The form element typically contains a combination of text and input fields. The text can be used to explain to the user of the form what kind of input is expected. Document 3.4 gives a simple example that uses several inputfield types:
Document 3.4 (location.htm)
<html>
<head>
<title>Data Reporting Site Information</title>
</head>
<body>
checked Value: none
Applies to type="radio" and type="checkbox" only.
maxlength="…"
Value: Maximum number of characters that can be entered in the field.
This value can be greater than the value given for the size attribute.
name="…"
Value: A programmer-supplied name for the field. The name should follow the variable-naming conventions for PHP in order to facilitate its use in PHP scripts.
readonly Value: none
Prevents field values in type="text" or text="password" from being changed.
size="…"
Value: width of the displayed field, in characters.
type="…"
Values: See Table 3.1.
value="…"
Value: a programmer-supplied default value that will be displayed in the field. This value can be overridden by user input unless the readonly attribute is also specified.
3.2 The form and input Elements 43
<form>
Please enter your last name:
<inputtype="text"name="last_name"size="20"
maxlength="20" /><br />
Please enter your latitude:
<inputtype="text" name="lat" value="40" size="7"
maxlength="7" />
N<inputtype="radio" name="NS" value="N"checked/>
or S<input type="radio"name="NS"value="S" /><br />
Please enter your longitude:
<inputtype="text" name="lon" value="75" size="8"
maxlength="8" />
E<input type="radio"name="EW" value="E"/> or W
<inputtype="radio"name="EW" value="W"checked/><br />
Please enter your elevation:
<inputtype="text"name="elevation"size="8"maxlength="8"
/>meters<br />
Please indicate the seasons during which your site reports data:<br />
Winter:<inputtype="checkbox"name="seasons"
value="Winter" />
Spring:<inputtype="checkbox"name="seasons"
value="Spring" />
Summer:<inputtype="checkbox"name="seasons"
value="Summer" />
Fall:<inputtype="checkbox"name="seasons"
value="Fall" />
</form>
</body>
</html>
Please enter your last name:
Please enter your latitude: N or S Please enter your longitude: E or W Please enter your elevation: meters
Please indicate the seasons during which your site reports data:
Winter: Spring: Summer: Fall:
40 75
Note that some of the text fields are blank because no default value attribute has been specified. These require user input, and there is no way to establish ahead of time what this input might be. However, it may still be worthwhile in some cases to provide a default value if that would help the user to understand what is required. When the allowed input choices can be limited ahead of time by the creator of the document, it is appropriate to use
radio buttons and checkboxes. You can create as many different combina- tions of these kinds offield as your application needs.
Each group ofradio andcheckbox buttons has its own uniquefield name and, within each group, each button should have its own value. In Document 3.4, there are tworadio button groups, namedNSandEW. It is important to specify a value for each button, because the value of the checked button will be captured when the contents of the form are submitted to a PHP application. Default values for the radiofield can be specified by using the checked attribute. When you access the document, the button with thecheckedattribute will be“on.” You can change it by clicking on another of the buttons in the group.
The same basic rules apply to checkbox fields. You can have more than one group of checkboxes, each with its unique name. The only dif- ference is that you can select as many boxes as you like within each group, rather than just one value withradio fields.