An introduction to the InternetAdvanced HTML (2) [Archives:2003/663/Education]
Adnan A. Al-Harazi
Academic Head
NCC Education, Yemen Center
Referring to last week's lesson, the “method” attribute in the HTML form tag is used to determine the method through which the form's data is sent. The two methods available are “POST” and “GET”.
POST sends the data to the application program using standard input. This is the standard way in which a stream of data (a file) can be sent to a program as input. Since the stream of data is treated as a file, there is no practical limit to the amount of form data which is sent.
GET sends data to the application program through environment variables. In this method the browser sends the data to the web server as a simple string appended to the URL. The web server then sets up the variables to be ready for the application program. This method is easy to use for beginner programmers, but it does limit the amount of data that can be handled.
ENCTYPE Attribute
The last important attribute of the form tag is ENCTYPE (encoding type). This further defines how the data is returned when the POST method is used. There are two basic types of encoding:
– application/x-www-form-urlencoded
– multipart/form-data
The default is application/x-www-form-urlencoded
INPUT Tag
Every input text field is defined by an INPUT tag
There are many different types of input tags, all specified by the TYPE attribute.
Every INPUT should have a NAME. This is critically important because the browser returns the form data as a series of field names and values. Every NAME should be different. If not, there will be ambiguity in the decoding of the form data.
SIZE can be specified; it defines the size of the field as displayed on the form. If more data is entered than the width of the field, the field will scroll. It is useful to specify the size as part of the form design.
INPUT Attributes
– VALUE=”value”
A field can be given a default value. This will be displayed by the browser and if no other entry is made will be returned to the web server.
– MAXLENGTH=length
This defines the maximum length of input that the user can provide. The default is no limit.
– CHECKED
This attribute is used with radio buttons or checkboxes. It specifies that the button or checkbox should be selected or checked as default. This means that if the user makes no other selection, the checked state will be returned for that field.
-SRC=URL
It is possible to associate a graphical image with the button. In this way, the web site designer can use an icon instead of button text. The graphical image does not have to be on the same server.
Input types
The type attribute is used to define the style and behavior of the field. The TYPE is defined by the following keywords.
– TYPE=”text”: defines a single line, plain text field.
– TYPE=”password”: defines a password data entry field. The choice of the character is made by the browser. This type of protection provides very little security, since the data entered by the user is transmitted in a plain text form.
– TYPE=”hidden”: this type of field will not display on the user's screen. It is however very useful. The web server can give a VALUE to a hidden field. This field will not display, but the NAME and VALUE will be returned when the form data is sent back to the web server.
– TYPE=”submit” VALUE=”submit the form”:
There are a number of buttons that have predetermined functions and will be included in almost all HTML forms. The submit button type is recognized by the browser as the signal to put together the field data in the correct format as defined by the METHOD and ENCTYPE attributes and send it back to the web server and the program defined by ACTION using HTTP. All forms must have this button in order to return data. The submit button can be given a VALUE which will appear as text labeling the button. If no VALUE is given, a default label of “Submit” will be used. There can be several different submit buttons in an HTML form. All will return the form data.
– TYPE=”reset” VALUE=”clear data”:
When clicked, this button will clear all the data from the form, and reset any fields with default VALUEs to their default values. Most forms should also provide this button since it provides an easy way for users to start again after making a major error in data entry. No data is sent to the web server when this button is clicked.
– TYPE=”checkbox”:
Checkboxes are represented by the browser as a small rectangular area which the user can click on to select a choice. Checkboxes normally have an associated textual label. If a VALUE is supplied for the checkbox, this will be returned if the checkbox is selected. If the checkbox is not selected, the checkbox will return the value “off”. If no VALUE is specified and the checkbox is selected, it will return “on”.
– TYPE=”radio” NAME=”name_of_group” VALUE=”value_of_button”:
Radio buttons are always grouped together. When one button is selected, any other previously selected button in the group is de-selected. The group behavior must be managed by the form designer. All the buttons in the group must have the same NAME and different VALUE. If a common NAME is not used, the browser will not select buttons correctly. We should also group the controls physically so that the meaning is clear to the user.
Menus and Scrolling Lists
Menus are single line fields within which a series of different options can be displayed allowing the user to make a selection. They are similar to a dropdown list in Windows. The scrolling list displays more than one item at a time. It is possible for the user to select multiple choices from the scrolling list. The tags to create a scrolling list are as follow:
This scrolling list is empty. We have to add the items by adding the following tags in between of the SELECT tags:
Our scrolling list now has only two options where option 2 is the default as we can see in Fig1
Notice that MULTIPLE attribute was used to make the selection of multiple options possible.
If you have any questions about the lessons please send me an e-mail to [email protected].
Next week: More in Advanced HTML
——
[archive-e:663-v:13-y:2003-d:2003-08-28-p:education]
