III. Metodología
3.4 Técnicas e Instrumentos de recolección de datos
Input fields can have the following attributes. The attributes required will depend on the type of input being used – specified by the TYPE attribute.
ALIGN= If the input type is an image, this is used the same as for an IMG tag.
CHECKED For checkbox and radio input types, this attribute will cause the option to be pre-selected by default.
MAXLENGTH= Determines the maximum number of characters that can be typed into this field.
NAME= Provides a name for the field. This is used to identify the contents of this field in the form results.
SIZE= Sets the width of the field in characters.
SRC= If the input type is an image, this specifies the location of the image file the same as the SRC attribute in an<IMG> tag.
TYPE= Specifies the type of the input field. The choices are text, password, checkbox, radio, submit, image, reset, file and hidden.
VALUE= For text fields, an optional attribute that sets an initial value for the field (if you want it to already be filled in).
For check boxes and radio buttons, this specifies what to send with the form results if the option is selected.
Each of the various input types is described below.
TYPE="text"
A text input element is for entering a small amount of text. It uses an <INPUT> tag with a
TYPE=”text” attribute. It uses the NAME=, SIZE=, MAXLENGTH= and VALUE= attributes.
3.2 Example
Name: <INPUT TYPE="text" NAME="name" SIZE="40" MAXLENGTH="80" VALUE=”Joe Bloggs”>
TYPE="password"
This is the same as a text field except that any characters entered will appear as * as they are typed. It has all the same attributes as a text input field except that there is no VALUE attribute.
3.3 Example
Password: <INPUT TYPE="password" NAME="password" SIZE="40" MAXLENGTH="80">
© Steve O’Neil 2005 Page 2 of 10 http://www.oneil.com.au/pc/
HTML Exercises 07 Forms
TYPE="checkbox"
A checkbox input can be used for boolean fields where there are only two choices. It can use the NAME=, VALUE= and CHECKED attributes. When several checkbox inputs share the same name, their results will be put into the same field. This allows users to select more than one value for a category.
3.4 Example
Member: <INPUT TYPE="checkbox" CHECKED NAME="member" VALUE="yes">
TYPE="radio"
Radio inputs allow a user to select from several options where only one can be selected. Each option in a list has its own <INPUT> tag and each must have the same name. One option can be pre-selected with the CHECKED attribute.
Example
Note that the < and > special characters have been used to display the less than < and greater than > symbol.
<BR>Age <=20: <INPUT TYPE="radio" NAME="age" VALUE="20">
<BR>Age 21-30: <INPUT TYPE="radio" NAME="age" VALUE="21-30" CHECKED>
<BR>Age 31-40: <INPUT TYPE="radio" NAME="age" VALUE="31-40">
<BR>Age >40: <INPUT TYPE="radio" NAME="age" VALUE="40">
TYPE="file"
This field allows a user to specify the name of a file to be sent as an attachment with the form results. Normally a browse button will appear next to the field to allow the user to browse for the location of the file on their computer. The NAME=, SIZE= and MAXLENGTH= attributes may be used. File inputs are not widely supported in browsers.
3.5 Example
File to send: <INPUT TYPE="file" NAME="file" SIZE="40">
TYPE="hidden"
Some CGI scripts make use of hidden fields within the form to accept additional parameter information (such as an email address to send the results to or a subject for the email). These are passed to the server when the form is submitted. Normally they will contain a NAME= and
VALUE= attribute.
3.6 Example
<INPUT TYPE=”hidden” NAME=”subject” VALUE=”feedback”>
This might be used to provide a subject for the form results when they are sent to an email address. Forms may also have hidden fields to do things like specify an email address to send the results to or specify an html file to display once the results are submitted (confirmation page).
© Steve O’Neil 2005 Page 3 of 10 http://www.oneil.com.au/pc/
HTML Exercises 07 Forms
TYPE="submit" and TYPE="reset"
These inputs both provide buttons that affect the results of the form. Both have a VALUE=
attribute which determines the text to appear on the button. A submit button can also have a
NAME= attribute. When a user clicks a submit button, the results of the form will be sent.
When a user clicks a reset button, the contents of the form’s fields are set to their initial state.
Example
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">
<INPUT TYPE="RESET" NAME="Reset" VALUE="Reset">
TYPE="image"
This type of input can be used in place of a submit button. Instead of a button, it will show an image, which will submit the form results when it is clicked. This type of input typically has a
NAME= and SRC= attribute but it can also include attributes common to IMG tags such as
ALIGN=. Although an image can look a lot better than a plain submit button, image inputs can cause difficulties with text browsers.
Example
<INPUT TYPE="image" NAME="Submit" SRC="submit.gif" WIDTH="70" HEIGHT="20">
Note Netscape Navigator 4 will typically treat an image button as an image link by putting a blue border around the image. To prevent this, include BORDER=”0” as you would for an <IMG> tag.
3.7
Tip You can’t use an image in place of a reset button but there is a workaround. Have an image that is a link to the page the form is on. When a user clicks the image, it will cause the browser to reload the page, which in turn clears the form.
© Steve O’Neil 2005 Page 4 of 10 http://www.oneil.com.au/pc/
HTML Exercises 07 Forms