Form Element in HTML

Forms are used to collect information from users and vary widely in size and purpose. For example, it could contain just a single text field for the input of a search term to search the Web, two fields for taking the username and password to login to a site, or many types of inputs for collecting information about a user during registration. Every form, no matter how basic or complex, includes a button for the user to use to submit the form to the Web server for the processing of the entered information. The way the process works is illustrated in Figure 5.1.

The <form> element is the element that is used to hold all the various elements that are used to describe the features of a form. The elements used to collect input are known as form controls. A control must have a name. The information entered by the user is associated with this name, and both are sent by the browser to the Web server as a name-value pair. For example, in the illustration in Figure 5.1, if the names given to the controls are fname, lname, and email, respectively, then the name-value pairs sent would be fname=Joe, lname=Bloggs, and email= joe@example.com . The <form> element allows these pairs to be sent to the Web server through the use of the action and method attributes. The action attribute allows you to specify the URF of the script to use by Web server to process the data, and the method attribute allows you to specify how the data should be packaged and sent to the Web server. The two possible methods are GET and POST, each of which is suitable for different situations.

With the GET method, the pairs are added to the end of the URL specified in the action attribute, separated by “?,” with the pairs joined using “&.”   Therefore, if, for example, the specified URL is “http://www.test.com/register.php,” then what is sent will be: http://www. test.com/register. php?fname=Joe&lname=Bloggs& email=joe@example.com

Situations for which the GET method is well suited include when the amount of collected data is small and is going to be used for searching a database. It is not suitable for a lot of data, because it supports only 1024 characters. It should also not be used for sensitive information, because people can easily hack into it. It also does not support binary data, such as image files and Word documents.

With the POST method, the pairs are sent via what are called HTTP headers. The pairs are joined in the same way as in the GET method, that is, by using The method is suitable for all the uses described above, for which the GET method is unsuitable. Figure 5.2 shows how the action and method attributes are used with the <form> element.

In addition to the action and method attributes, the <form> element supports other attributes that are commonly used. Table 5.1 lists them, starting with the two already mentioned.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *