It refers to the operations which occur after the form is submitted by usually clicking the ‘submit’ button. These details are given in the opening <form> tag by the action attribute (which is required), the method and enctype attributes (which are optional). Each is discussed
action Attribute – It specifies the location or program to which the form’s information is sent and it can be in the form of either an e-mail address or the URL of a script or program as shown
<form action=”[email protected]”>
<form action=”login.php “>
The e-mail is not used as there is no official specification and output vary with browsers.
The program transports the form data to the server for processing and is called as Common Gateway Interface (CGI) which is written in different scripting languages like ASP .Net, PHP, or Python.
method Attribute – It is used in the opening <form> tag. It tells web browser how to send the data to the server by using two values which are
get – It takes all the data submitted with the form and sends it to the server attached at the end of the URL like
http://www.vskills.in /response.php?name=abhay
This method is used to transfer small amounts of information to the server like text to search. In it form data is to encoded by a browser into a URL.
post – It is used to transfer comprehensive data or lots of data. In it the form data is to appear within a message body. This allows for arbitrary length data of any type to be sent to the server.
enctype Attribute – It stands for encoding type which indicates the web browser how to format the data when the method attribute is set to post. Its default value is ‘application/x-wwwform-urlencoded’ which works on most forms. Values for this attribute are
application/x-www-form-urlencoded – It s the default method used by most forms. It converts spaces to the plus sign and non-alphanumeric characters into the hexadecimal code for that character in ASCII text.
mutlipart/form-data – It allows the data to be sent in parts, with each consecutive part corresponding the a form control, in the order they appear in the form. Each part can have an optional content-type header of its own indicating the type of data for that form control.
Formatting Forms – Few formatting techniques are illustrated for formatting forms.
Tab Order and Keyboard Shortcuts
As illustrated earlier, for changing the tab order and adding keyboard shortcuts for links is accomplished using the tabindex and accesskey attributes. Even input controls can be formatted by these attributes in a form.
Grouping Controls – The <fieldset> tag groups sets of labels and controls by enclosing the controls in its opening and closing tags. In most browsers the <fieldset> tag adds boxes around each such controls which are enclosed in it and place the caption with the <legend> tag in the outline of the box as a headline as shown
Tables – Usually the text fields are scattered in the web page. All the text fields and controls can be lined up in a column by putting them in a table where in each individual element is place in its own cell in the table. Label for each control is placed in a cell before it.
Thus, getting a uniform looking form by using a table as all the controls line up vertically irrespective of their text length as shown in the example, with and without a table
Disable Form Elements – Controls can be disabled for any input from the user by using two attributes which are
readonly – As per its name it makes the input control as read only and value assigned to the input control cannot be changed. If user try to edit the content then an alert is displayed and no change is accepted. Its usage is shown
<input type=”text” value=”VS-1027″ name=”HTML” readonly=”readonly” />
disabled – It is similar to readonly as it disables the input control but input controls appear in gray or faded text. They cannot be clicked and their usage is shown
<input type=”text” value=”ww1234″ name=”UserName” disabled=”disabled” />
