This page has been robot translated, sorry for typos if any. Original content here.

Multimedia insert

Working with forms

To betray elements of interactivity to your site, you need to use forms. Feedback from visitors is an important area in the development and effectiveness of your site. Forms can be divided into four categories:

  1. To survey visitors . Gives you the opportunity to answer pre-prepared questions with answers to them or free text fields that are filled in by them independently. With their help, you will get the information you need in real time.
  2. Form for reviews . This could include for example the popular "guest book". It gives visitors the opportunity to express their opinions, write about their problems and questions, make suggestions and comments, or bring thanks.
  3. To collect data . Serve mainly as an element when registering a site visitor. It has the form of a normal questionnaire.
  4. Various input fields (search, password entry, etc.).

All data specified in the form is processed and transmitted through scripts written in Perl programming languages (file extension .cgi ) and PHP (with extension .php ).

To place a form on a web page, use the <FORM> tag with attributes:

  • ACTION - activates the script file applied to the form.
  • NAME - identifies the form.
  • METHOD - form data transfer method. Values: "post" (sending by e-mail) and get (per domain).

But all this will not be enough for a form to appear on the page. Additional information is needed in the HTML code that describes the various form elements. They can be various fields for input , buttons , switches , etc. We will consider them in order.

Input fields

Designed to enter a small text or characters (password). They are framed plots of the page, limited in height by font size and a number written by the information application. In technical terms, this is done in the following way. A universal <INPUT> tag is taken when forms are compiled, to which attributes are then assigned:

  • TYPE - indicates the type of information entered. Values: text (text), password (asterisks) and hidder (information will not be shown).
  • NAME - assigns a name to a field.
  • SIZE - field length. (value is indicated in the number of characters)
  • MAXLENGHT - limit on the number of characters entered.
  • VALUE - used in cases where you need to fill in the fields to enter any information at the time of loading the page.

Note: The information application to the field can be recorded in the code, both before and after the <INPUT> tag . An example of creating a password field:

<INPUT TYPE = "text" NAME = "login" SIZE = "12" VALUE = "your login"> Login

Password <INPUT TYPE = "password" NAME = "pass" SIZE = "25" MAXLENGHT = "24" VALUE "Maximum 24 characters">

After compiling this code, you will see the form in the browser, but you will not find the usual buttons in it. Speech about them goes on.

Text fields

Such fields differ from input fields in that they can be entered unlimited text. Therefore, they are provided with a scroll bar. To place text fields on a page in the HTML language, the <TEXTAREA> tag is intended, which can be assigned the following attributes:

  • COLS - width of the window (in the number of characters).
  • ROWS - height of the window (in the number of characters).
  • NAME - information for identification.
  • VALUE - information in the window at the time of loading.

File transfer fields

They are used to send any file along with the data entered in the form. In order to do this, you need to create the form itself using the <INPUT> tag and the TYPE attribute with the value "file" . Then we activate the script file via the ACTION attribute and everything is ready.

Buttons

The buttons are mainly intended for sending data recorded in a form, or for resetting information in a form. In the first case, the TYPE attribute of the <INPUT> tag indicates the value of submit , in the second - the reset . To display the buttons on the page, you need to add the familiar attributes of VALUE AND NAME to the <INPUT> tag . The forms also use other more complex and feature-rich buttons that already work directly with JavaScript scripts .

Toggles and Flags

In this area, they are used to survey site visitors by selecting pre-prepared options. When placing switches on a page, all the same <INPUT> tag and TYPE attribute are used, the value of which will be:

  • radio - the designation of the switch in the language of HTML.
  • name - the identifier of the switch. (For all switches of the same group, the same values ​​must be assigned).
  • value - the identifier of the switch that was selected by the visitor. (values ​​for each switch in the same group should be different values.
  • selected cheked - shows which switch will be enabled at boot time.

Flags, according to the principle of action, differ from the switches in that with the help of them it is possible to select both one element from the list and all or not one. In the TYPE attribute, they are denoted by the checkbox value. In addition to the above attribute in the tag <INPUT> attributes NAME and CHECKED . In the first, an element name is assigned. The second one is set at will, it will determine which element will be checked by default.

Drop-down list and

Such lists are often found not only on web pages, but also in various other computer programs, where one should be chosen from the list. For example, the name of the font in a text editor.

Compiled drop-down lists in the HTML code as follows. <OPTION> containers are inserted into the <SELECT> container, where each <OPTION> container will be one element from the list. At the same time, the familiar attributes NAM E and SIZE are assigned to the <SELECT> tag , and the VALUE and SELECTED tags (< default list item selection) are assigned to the <OPTION> tag .

All of the above forms in practice are used mainly in conjunction with JavaScript scripts, which the browser needs to report in the <HEAD> container.

If the application of forms is carried out by a complex, then when compiling them on the page it is most convenient to use the table method.