HTML forms. HTML Forms I. Manual Data Entry

The form itself is usually intended to receive information from the user for further sending it to the server, where the form data is received by the handler program. Such a program can be written in any server-side programming language like PHP, Perl, etc. The program address is indicated in the action attribute of the tag

, as shown in example 1.

Example 1: Submitting form data

HTML5 IE Cr Op Sa Fx

Form data

In this example, the form data indicated by the name attribute (login and password) will be passed to the file at /example/handler.php. If the action attribute is not specified, then the transfer occurs to the address of the current page.

Transfer to the server occurs in two different methods: GET and POST, to set the method in the tag

The method attribute is used, and its values ​​are the get and post keywords. If the method attribute is not specified, then by default the data is sent to the server using the GET method. In table Figure 1 shows the differences between these methods.

Which method is used can be easily determined by the address bar of the browser. If a question mark appears in it and the address looks like this, then this is definitely a GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

A unique combination of parameters in the address bar uniquely identifies a page, so pages with addresses ?q=node/add and ?q=node are considered different. This feature is used by content management systems (CMS, Content management system) to create many website pages. In reality, a single file is used that receives a GET request and, according to it, generates the contents of the document.

Listed below are typical applications of these methods on sites.

GET

Transferring small text data to the server; Site search.

Search engines and site search forms are always sent using the GET method, this allows you to share search results with friends, send a link by mail or post it on a forum.

POST

Transferring files (photos, archives, programs, etc.); sending comments; adding and editing messages on the forum, blog.

By default, the form is processed in the current browser tab; however, when submitting the form, you can change this parameter and open the form handler in a new tab or frame. This behavior is specified through the “context name”, which is the value of the target attribute of the tag . Popular values ​​are _blank to open the form in a new window or tab, and the name of the frame, which is specified by the name attribute of the tag

In this example, when you click the Submit button, the form submission result opens in a frame called area .

Form elements are traditionally placed inside a tag

, thereby determining the data that will be transmitted to the server. At the same time, HTML5 has the ability to separate a form from its elements. This is done for convenience and versatility, so a complex layout may contain several forms that should not intersect with each other, or, for example, some elements are displayed using scripts in one place on the page, and the form itself is located in another. The connection between the form and its elements occurs in this case through the form identifier, and the form attribute with a value equal to this identifier should be added to the elements (example 3).

Example 3: Linking a form to fields

HTML5 IE Cr Op Sa Fx

Form

In this example the tag

is uniquely identified through the auth identifier, and form="auth" is added to fields that should be submitted via the form. In this case, the behavior of the elements does not change; when the button is clicked, the login and password are sent to the handler.php handler.

Although form transfer parameters are traditionally specified in the tag , they can also be transferred to the form submit buttons ( , between which formatted text is placed. So, for creating the button shown in Fig. 9.4, the following HTML code responds (example 9.3).

Example 9.3. Creating a BUTTON