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

Multimedia Insertion

Working with forms

To betray your site interactivity elements, you must apply forms. Feedback from visitors is the most important area in the development and effectiveness of your website. Forms can be conditionally divided into four categories:

  1. To poll the visitors . It gives an opportunity to answer pre-prepared questions with answers to them or free text fields that are filled by them independently. With their help you in real time get the information you need.
  2. Form for feedback . This can include, for example, a popular "guest book." It allows visitors to express their opinions, write about their problems and issues, make suggestions and comments or give thanks.
  3. For data collection . They serve mainly as an element when registering a site visitor. It looks like a regular questionnaire.
  4. Various input fields (search, password entry, etc.).

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

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

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

But all this will not be enough to form a page on the page. Need additional information in the HTML-code, which would describe the various elements of the form. They can be different fields for input , buttons , switches , etc. We will consider them in order.

Input fields

Are intended for input of the small text or characters (input of the password). They are frame-separated sections of the page, limited in height by the font size and a number of written information applications. In technical terms, this is done as follows. A generic <INPUT> tag is used , which is then assigned attributes:

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

Note: The information application to the field can be written in the code, both before and after the <INPUT> tag . 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 a form in the browser, but you will not find the usual buttons in it. We will talk about them further.

Text fields

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

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

Fields for transferring files

Served to send a 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 through the ACTION attribute and everything is ready.


Buttons are mainly used to send data written to the form, or to reset the information in the form. In the first case, the attribute TYPE of the <INPUT> tag specifies the value of submit , in the second - reset . To display the buttons on the page, you need to add the already familiar VALUE AND NAME attributes to the <INPUT> tag . Forms also use other more complex and "heaped" buttons that work directly with JavaScript scripts .

Switches and flags

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

  • radio - the designation of a switch in HTML.
  • name is 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. (the values ​​for each switch in one group must be different.
  • selected cheked - shows which switch will be enabled at boot time.

Flags, according to the principle of operation, differ from the switches in that they can be used to select one element from the list, or all or not one. In the TYPE attribute, they are indicated by the value of the checkbox. In addition to the above attribute in the <INPUT> tag, the NAME and CHECKED attributes . In the first, the name of the element is assigned. The second is set at will, it will determine which element will be flagged by default.

Drop-down lists and

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

Drop-down lists are created in the HTML code as follows. Containers <OPTION > are inserted into the <SELECT> container, where each <OPTION> container will be one item from the list. In this case, the familiar attributes of NAM E and SIZE are assigned to the <SELECT> tag , and to the <OPTION> tag - VALUE and SELECTED (selecting the default list item).

All of the above forms in practice find applications mostly in conjunction with JavaScript scripts, which the browser needs to report in the <HEAD> container.

If the application forms are complex, then when you link them on a page, it is most convenient to use the tabular method.