HTML Form Tags – Engineering Technology Services

Form Tags

Unlike most other HTML tags, these are interactive. They allow your visitor to send email, give feedback and comments and many other possibilities. To do this, however, you must also have a CGI program that will accept the form’s data. Think of these HTML tags as the “front end” of your CGI application.

<form>

All forms on a web page must begin and end with the <form> tag. And all form tags must be placed within the form tags to work correctly on your page. Other HTML tags are allowed within the form tags to assist in presentation and formatting. It is possible to have more than one set of form tags on a web page, but each one will be submitted separately from each other.

Attributes for the <form> tag:
- accept - This is only used when you have an <input> tag with a "file" attribute. It restricts the type of files uploaded to the server when the form is submitted. The values for this attribute should be one or more MIME types. For example: class="example"accept="text/html, image/gif" would only allow an HTML file or a GIF file to be uploaded.
- action - This tells the form where the CGI application is located. If you are using cgiwrap, then this attribute value should be action="http://www.engr.colostate.edu/usr-bin/cgiwrap/your username/your script name"
- enctype - This sets the MIME type for the data being submitted. This is only relevant when the method attribute is "POST". The default is "application/x-www-form-urlencoded" and you will rarely need to change it. You will, however, want to set this to "multipart/form-data" if you are uploading files via your form.
- method - Form are submitted with two possible methods: GET and POST. The default is GET. There are some CGI programs that require that the form be submitted via only the POST or only the GET method. So what's the difference?
  - GET - The data is submitted and encoded into the URL of the resulting web page. The URL takes the value of the "action" attribute, appends a "?" to it and then appends the form data set, such as name=arthur&color=red&quest=grail You are limited to a total of 256 bytes with this method and the result of your submission is visible in the browser's URL location bar.
  - POST - This method submits the data "behind the scenes" via standard input. There is no limit to the amount of bytes submitted as there is with the GET method and the data is not displayed in the browser's URL location bar.
- name & id - These assign an identifier name to the form for reference within a CGI application. Newer browsers support the preferred "id" attribute, but the "name" attribute is still needed with a few older CGI programs.
- target - This specifies which browser window the resultant information will be displayed. You can use a value of "_blank" to open a new browser window.
Example: <form id="emailform" action="http://www.engr.colostate.edu/usr-bin/cgiwrap/joesmith/email.pl" method="post"> This tag creates a form with the id of "emailform" that will submit to the program "email.pl" with a "post" method.

<input>

This is the most common tag that is placed within a form. An <input> tag creates an area on the web page to allow for a user to enter text, click buttons and make selections. This tag will display and act differently on the browser's window depending upon the value of the "type" attribute as explained below. The input tag does not have an ending tag.

Attributes for the <input> tag:
- accept - This is identical to the "accept" for the <form> tag as shown above.
- checked - This only used if the "type" attribute is set to "checkbox" or "radio". There is no value associated with this attribute. For example: <input type="checkbox" checked> This forces the checkbox to be checked or "on". The default is that the checkbox or radio button is turned off.
- name & id - These create an identifier for the input tag. The name attribute is required, but the id attribute is a unique identifier that should be used with Cascading Style Sheets. The name is the identifier that is associated with the submitted data that your CGI application will need to read.
- maxlength - This restricts the maximum number of characters that may be typed into a text field.
- size - This changes the width of a text element. The default is 20 characters.
- code - This tells the browser which type of input should be rendered to the browser's screen. The default is "text". You should choose carefully which type you need in your form dependant upon the data you need to acquire. The values of this attribute are:
  - button - This creates a clickable button and can be used instead of the "reset" or "submit" values to create a unique button.
  - checkbox - This creates a small box with two states: off/not checked and on/checked. Each checkbox is meant to be independent from each other, unlike the "radio" button below.
  - file - This creates a button and an associated text field that lets the user select the location of a file on his or her computer to upload to the server. If the button is clicked, a "file dialog box" will open allowing the user to find the path and file. The CGI script must be able to accept this data for the file to be uploaded successfully.
  - hidden - This creates an invisible field that is not shown on the browser's window. You can use this to carry over data from one form to another, or to automatically submit data with a form (the current date for example).
  - image - This creates a graphical button. You can use this to replace the "button", "reset" or "submit" values if you wish to create your own look and feel for your form. If the "image" value is used for the <input> tag's type, then you can also include other attributes that are associated with images such as src, width, height, alt, border, and so on within the <input> tag.
  - password - This creates a text field identical to the "text" value except that any character typed into the field is represented a bullets or asterisks. This ensures that you can protect a person's password from being viewed on a computer screen.
  - radio - This creates a small circle on/off button. It is similar to the "checkbox" value, but it is meant to be used in a related group of items of which only one can be selected. When you give multiple radio buttons the same "name" attribute, then only one of the buttons will be able to be selected at a time.
  - reset - This creates a button that reverts the form fields back to their original condition.
  - submit - This creates a button that submits the form to the CGI application when it is clicked.
  - text - This creates a one-line text field for typing text into.
- value - This assigns a value to the <input> tag. If the tag is a text box, the value will appear in the text field. With a radio or checkbox, the value attribute is required because it is associated with that tag when the form is submitted. For button, submit and reset <input> tags, the value attribute alters the text shown in the button.
Example: <input name="pass" maxlength="10" size="10" type="password"> This creates a password text box with a size or length of 10 characters and only 10 characters can be entered.

<textarea>

This tag is much like the <input type="text"> tag, except that you can specify multiple lines for your input. You would want to use this for a suggestion or comments box in your form because it allows for a nearly unlimited number of lines of text to be entered.

Attributes for the <textarea> tag:
- cols - Determines the width of the textbox in number of characters. The default depends on the browser and operating system of the computer being used.
- name - This is a required attribute that is associated with the submitted data entered in the textarea.
- rows - Determines the height in number of lines of text that can be displayed without scrolling. The default depends on the browser and operating system of the computer being used.
Example: <textarea cols="30" name="comments" rows="5"></textarea> This tag will create a textarea that is 30 characters in width and 5 lines in height. Notice that there is nothing between the beginning and ending tags. If you would like the textarea to default with text already placed within it, then you can place that text between the starting and ending tags.

<select>

The select tag allows you to display either a pulldown menu or a scrolling list that your users can choose from. For the select tag to be usable, there must be one or more <option> tags within it. The option tags determine what within the select tag is available for choosing.

Attributes for the <select> tag:
- multiple - This tells the browser how many elements within the select tag can be chosen at the same time. There is no value associated with this attribute. The default is one element if the multiple attribute is not included in the <select> tag. If the multiple attribute is included, then the user can select multiple elements from the list box. This attribute only make sense if used with a size attribute of 2 or more.
- name - This is a required field that is submitted in association with the data that is submitted by this tag.
- size - This determines how the <select> tag is shown on the browser. The default is 1. If not used or if given a value of 1, then the tag is shown as a pulldown menu. If size is used and given a value of 2 or more, then the tag is shown as a list box. The value of the size attribute determines how many lines of height the list box will have.
Example: <select name="color" size="5" multiple> This tag will create a list box showing five elements and will allow the user to choose more than one element in the list.

<option>

This tag defines what will appear within the <select> tag. The option tags must be within the select tag to work correctly. You need to create one option tag for each element within the select tag.

Attributes for the <option> tag:
- selected - This attribute pre-selects an element within the select tag. The default is the topmost element within the select tag. With this attribute, you can set pulldown or list box to automatically select any of the elements. If the "multiple" attribute is set in the select tag, you can have more than one option with this attribute. There is no value associated with this attribute.
- value - This associates a value with the specific option. The default is whatever text is within the option tag's starting and ending tags. This is the value that will be sent with the select tag's name value when the form is submitted.
Example: <select name="color"><option>Blue</option><option value="r" selected>Red</option></select> These series of tags will create a drop down menu with two elements: Blue and Red. Even though it is the second element in the select tag, the Red element will be pre-selected because of the "selected" attribute. When submitted, either "Blue" or "r" will be associated with the name "color" in the form's data. Notice that the value submitted for the first element is the text within the option tags.

On thing to remember when using the radio, checkbox input tags or the select tag is that if the user does not select any of the buttons or elements, no data for that tag will be submitted to the CGI application. This may cause problems with some CGI scripts. If you need to ensure that these tags submit data, either use the “checked” or “selected” attributes for the respective tags.