How to fill out a form with an html button. Creating HTML forms. Example: full registration form

Forms are designed to send data from the user to the web server. Forms in HTML can consist of text fields and text areas, checkboxes and radio buttons, and drop-down lists. All these are elements of form. Each element serves to convey some meaning to the site.
At its core, an HTML form is a web page on which you see areas for entering your information. After you fill out the form and click submit, the information from the form is packaged and sent to the web server for processing by a server-side script (handler file). After processing, another web page is returned to you as a response. The following figure clearly demonstrates how the form works:

There's nothing difficult about creating HTML forms. The easiest way to get an idea of ​​forms is to parse a little HTML code and then see how it works. IN following example The syntax for creating a simple HTML form is shown:

Example: Simple HTML Form

  • Try it yourself "

My first form:
Name:
Surname:



Simple form

My first form:
Name:
Surname:


Element

Forms are inserted into web pages using the element . It provides a container for all form content, including elements such as text fields and buttons, as well as any other tags HTML language. However, it cannot contain another element .
To send the form to the server, use the “Submit” button, the same result will be obtained if you press the “Enter” key within the form. If the "Submit" button is not present on the form, the "Enter" key can be used to submit.
Most element attributes affect the processing of the form, not its design. The most common of which are action And method. Attribute action contains the URL to which the information in the form will be sent for processing by the server. Attribute method is the HTTP method that browsers must use to submit form data.

Element

Almost all form fields are created using the element (from the English input - input). Appearance element change depending on the value of its attribute type:

Here are some attribute values type:

Entering text and password

One of the simplest types of form elements is a text field, designed for entering text on a single line. This type text input is set by default, and therefore it is the one-line field that will be displayed if you forget to specify the attribute type. To add a one-line text input field to a form, you should inside the element register the attribute type with text value:

The password input field is a type of regular text field. It supports the same attributes as a single-line text field. Attribute name sets the name of the password entry field that will be sent to the server along with the password entered by the user. To create a password field, you need to set the password attribute to type(password (English) - password):

An example of creating a form with a password field:

Example: Password field

  • Try it yourself "

Your login:

Password:




Your login:

Password:


You can use the attribute in conjunction with this attribute maxlenght, the value of which determines maximum amount characters that can be entered in this string. You can also set the length of the input field using the attribute size. By default, most browsers limit the width of a text field to 20 characters. To control the width of new form elements, instead of an attribute size, we recommend using Cascading Style Sheets (CSS).
Attribute value specifies the value that is displayed by default in the text field when the form is loaded. By entering a default value in the field, you can explain to the user exactly what data and in what format you want the user to enter here. This is like a sample, because it is much more convenient for the user to fill out the form, seeing an example in front of him.

Switches (radio)

Element type radio creates switches that use the logic "OR" principle, allowing you to select only one of several values: if you select one position, then all others become inactive. The basic syntax of a toggle element is:

Attribute name for switches is required and plays an important role in combining several switch elements into a group. To combine switches into a group, you must set same value attribute name And different meaning attribute value. Attribute value sets the value of the selected radio button to be sent to the server. The value of each radio button element must be unique within the group so that the server knows which response option the user chose.
Attribute presence checked(from English - installed) at the switch element indicates which of the proposed options should be selected by default when loading the page, if necessary. This attribute can be set only for one radio button element from the group:

  • Try it yourself "

How old are you?

  1. under 18
  2. from 18 to 24
  3. from 25 to 35
  4. more than 35




How old are you?

  1. under 18
  2. from 18 to 24
  3. from 25 to 35
  4. more than 35

Checkboxes

Element type checkbox creates checkboxes that are similar to radio buttons in that they give the user the ability to choose from the options you provide. The main difference from radio buttons is that the visitor can select several options at once, and the flags themselves are indicated by squares rather than circles. As with radio buttons, a group of checkboxes is created by assigning each item the same attribute value name, however, each checkbox has its own meaning. The basic syntax of a checkbox is:

Attribute checked, as with radio buttons, specifies that the checkbox should be checked by default when the page loads. This attribute can be set simultaneously for several group checkboxes.
The following example of using checkboxes has several default answer choices:

Example: Using radio buttons

  • Try it yourself "
  1. Jazz
  2. Blues
  3. Rock
  4. Chanson
  5. Country




What genres of music do you like?

  1. Jazz
  2. Blues
  3. Rock
  4. Chanson
  5. Country

Submit and reset buttons

Element type submit creates a button that, when clicked, sends the browser to a server script to process the data entered by the user into the form. If we create a button that clears the form, then we assign the attribute type"reset" value. element type submit an optional attribute may be assigned name. Attribute value used in this element to specify text indicating the label on the button. By default, browsers have “Submit” written on the button; if you are not satisfied with this inscription, enter it yourself. Since the styles of confirmation buttons may differ in different browsers, it is better to customize the style of the button yourself using CSS tools or use graphical buttons.
Creating confirmation and clear buttons:

Example: Using submit and reset

  • Try it yourself "

Clicking the Reset button resets any user-entered data.





The action attribute.

Main for element

is an attribute action, which specifies the data handler for the form. A data handler is a file that describes what to do with form data. The result of this processing is a new HTML page that is returned to the browser. In other words, in the attribute action specifies the URL path to a handler file on the server (sometimes called a script page) for processing the form. The syntax is as follows:

…

The processing file is located on the server mytestserver.com in folder namefolder and the name of the server script that will process the data - obrabotchik.php. All the data you entered into the form on the web page will be transferred to him. The .php extension indicates that the specified form is processed by a script written in PHP. The handler itself can be written in another language, for example it could be the scripting language Python, Ruby, etc.
It is advisable to always set the attribute value action. If the form should pass values ​​to the same page where it is located, provide an empty string as the value of the action attribute: action="".

method attribute

Attribute method specifies how information should be transferred to the server. The form submission method you choose depends on the data you want to submit with the form. The volume of this data plays a major role here. The most popular are two methods of transferring your form's source data from the browser to the server: GET And POST. The method can be set to any one you choose, and if you do not specify it, the default will be used GET. Let's consider the use of each of them.

POST method

Method POST packages form data and sends it to the server without the user noticing, since the data is contained in the body of the message. Web browser, when using the method POST sends a request to the server consisting of special headers followed by form data. Since the contents of this request are only available to the server, the method POST used to transmit confidential data such as passwords, bank card details and other personal information of users. Method POST also suitable for sending large volumes of information, since unlike the method GET, it has no restrictions on the number of transmitted characters.

GET method

As you already know, the main job of a browser is to receive web pages from the server. So when you use the method GET, your browser simply retrieves the web page as it always does. Method GET also wraps form data, but appends it to the end of the URL before sending the request to the server. To understand how the method works GET, let's see it in action. Open the first example from this lesson (Example: Simple HTML Form) in Notepad (for example Notepad++) and make a small change to the HTML code:

those. replace POST on GET.
Save the file under the name file_name.html and refresh the browser page (F5), then fill out the form, for example Vasya Pupkin, and click the “Submit” button. In the address bar of your browser you will see something like this:

File_name.html?firstname=Vasya&lastname=Pupkin

Now you can see the name of each form element, as well as its value, right here in the URL.
The URL is separated from the rest of the form data by a question mark, and variable names and values ​​are separated by an ampersand (&) .
This method should be used if you are not transferring large amounts of information.
This method will not work if the data in your form is sensitive, such as storing a bank card number or password.
In addition, the method GET is unsuitable if you want to send files to the server along with the form.

Grouping form elements

Form elements that are related in meaning can be grouped between tags

And
. The browser will display
in the form of a frame around a group of form elements. The appearance of the frame can be changed using Cascading Style Sheets (CSS).
To add a title for each group, you will need an element , which specifies the group title text to be embedded in the frame.

HTML forms are complex interface elements. They include different functional elements: input fields And

The result of the code working with the text area is shown in the figure.

The next element of the forms are lists that allow you to make a choice from the presented set of values. Tags allow you to create a list form

In order for the element to be highlighted when the page loads, it is necessary in the tag

A similar selection method is the checkbox and radiobutton form elements. The difference between these elements is that a checkbox allows you to make multiple selections, while a radio button allows only a single selection.

Structure of a checkbox and radio button entry:

text

Radio button:

text

In elements specified in the structure, the checked attribute is used by default to highlight the checkbox and radio button. An example of using a checkbox, radio button, and HTML code is shown in the figure.

Another form element is a button, specified using the type tag attribute with the value button:

In the specified code for creating a button, there is an onclick parameter, which usually specifies code in a programming language to perform a particular action when this button is clicked:

To display a message in a special window, use the JavaScript command – aler. The result of the example is shown in the figure.

To insert an image into a button, use the code shown in the following example:

When registering and logging into websites, a field with a hidden test is used, displayed as stars. This is the password form element:

Registration on the site is often divided into several pages and each subsequent one must contain information from the previous one. In order to hide the transmitted information, the hidden form element is used:

The hidden form element will be invisible in the browser window.

To upload files to the server, forms have a file element. An example code for uploading files to the server is presented below:

So, in this topic we looked at form elements for creating various HTML pages, which, together with script handlers on a computer or server, allow you to develop full-fledged web applications.

26.02.2016


Hi all!
Let's continue learning the basics of HTML. In this lesson we will look at what's happenedHTML form and how it is created.
If you noticed, today not a single website can do without forms. These forms can be different, for example, a feedback form, an order form, a registration and login form, a form for sending comments, reviews, a search form, and many others.

I think now we need to show you examples of how HTML forms look visually.

○ Search form:

○ Site login form:

○ Feedback form:

○ Order form:

I think you have grasped the essence of creating HTML forms. So in today's lesson I will tell you, how to create a simpleHTMLform and what tags can be used to create different form fields.

From now on, I ask for your special attention, because the topic is complex and important.

HTMLform is a field in which the user enters some information. But this information must also be sent somehow. A kind of HTML form is like a motorcycle without gasoline, it seems to have everything, but for some reason it doesn’t move. So, in order for the form to work and send the information entered by the user, you need to create a form processor in the . But don’t bother with the handler, since you are now only taking a course for beginners. We will look at the topic of the form handler in the “PHP” section. So, somehow I got distracted from the main topic.

Learning to create HTML forms

Any HTML form will consist of a main tag

. Inside a tag
the remaining form elements are inserted and will be displayed on the web page.

The form must be placed between tags .
For tag

closing tag is required .

*attributes for the tag rm >

NAME – unique name of the form. It is used when there are several forms on one site.
ACTION – This attribute specifies the path to the form handler. Is required.
METHOD – sending method.

  • POST - data is transmitted in hidden form
  • GET (default) - data is transmitted in clear text through the browser line.

An example of what a tag looks like with the following attributes:

here will be various form elements that will be displayed on the web page.

Form elements

○ Taginput

Taginput– this part of the form field element is intended for entering small text and numbers.
For tag no closing tag needed .

*attributes for the tag< input >

  • name - element name
  • size - field size
  • required – required field
  • autofocus – the mouse pointer will immediately be on the field when loading a web page
  • maxlength – with this attribute you can specify the maximum number of characters to enter into the field. By default, without the maxlength attribute, an unlimited number of characters can be entered into the field
  • placeholder – a hint for the user that will be displayed directly inside the field form (previously the value attribute was used).
  • type - element type

Example of fillings:

Element type type

Text field

○ Text field "text":

Result:

○ Password field:

Result:

○ Email field "email":

Result:

○ Button for selecting a file from the computer “file”:

Result:

○ Phone input field “tel”:

Result:

○ Search field:

Result:

○ Color selection field "color":

Result:

○ Field for entering and selecting numbers “number”:

  • min – minimum value
  • max – maximum value
  • step - step.

Result:

○ Date selection field "date":

Result:

○ Field for selecting date and local time in the format (05/05/2015 00:00):

Result:

○ Display a drop-down calendar.
Field for selecting the year and month in the format (July 2015):

Result:

○ Time selection field "time":

Result:

○ Range slider:

Result:

○ Checkbox:

checked – this attribute specifies which checkbox should be enabled by default

Result:

○ Radio switch:

checked – this attribute specifies which radio switch should be enabled by default

Result:

Buttons

○ Button:

value - label on the button

Result:

○ Button for sending data “submit”:

value - label on the button

Result:

○ Reset button:

value - label on the button

Result:

○ Button with picture:

Result:

○ Hidden field

○ select tag

Tagselect– this is part of a form element intended for entering a drop-down list.
For tag closing tag is required .
Tag And

  • Name is the name of the entire list. Set only for tag .
  • Value – set for each list item for the tag
  • disabled - blocks selection of an element in the drop-down list. Set only for tag

Result:

Not urgent Urgent By courier

Or like this:

Result:

Not urgent Urgent By courier

Now let’s block it from the “Urgent” list with the “disabled” attribute:

Result:

Not urgent Urgent By courier

○ drop-down list by group:

To create a group list, use the tag

Result:

Option Textarea
Label Fieldset Legend

○ for multiple selection:

In the tag

*attributes for the tag< textarea >

  • name – field name
  • cols – field width
  • rows – field height
  • placeholder – a hint for the user that will be displayed directly inside the field form.

Result:

Or like this:

Result:

Enter text

Or like this:

Result:

Design “Frame” (fieldset)

○ Fieldset tag

Fieldset tag– using this tag you can draw a frame around an object.
Closing tag is required.

Additional tags
Legend tag – indicates the title.
Closing tag is required.

Heading Text inside frame.

Result:

That's all I wanted to tell you about the topic "HTML forms". Now let’s summarize and in practice we will try to create a simple form, using the knowledge that you have gleaned from this article.

Here's my form:

Form for a resume for an employee of the pilot plant of PJSC "KMZ"



What job do you want to be?


What salary do you want to receive (per month)?
10$ 11$



Result:

Previous post
Next entry

HTML form is a tool with which an HTML document can send some information to some predetermined point in the outside world, where the information will be processed in some way.

It is quite difficult to talk about forms in a tutorial dedicated to HTML. The reason is very simple: creating an HTML form is much easier than creating the "point in the outside world" to which the HTML form will send information. In most cases, such a “point” is a program written in Perl or C.

Programs that process data submitted by forms are often called CGI scripts. The acronym CGI stands for Common Gateways Interface. Writing CGI scripts in most cases requires a good knowledge of the corresponding programming language and the capabilities of the Unix operating system.

Currently, the PHP/FI language has become somewhat widespread, the instructions of which can be embedded directly into HTML documents (the documents are saved as files with the extension *.pht or *.php).

HTML forms pass information to handler programs in the form of [variable name]=[variable value] pairs. Variable names should be specified in Latin letters. Variable values ​​are treated as strings by handlers, even if they contain only numbers.

How the HTML form works

The form is opened with the tag

and ends with the tag
. An HTML document can contain several forms, but the forms should not be located one inside the other. HTML text, including tags, can be placed inside forms without restrictions.

Tag

may contain three attributes, one of which is required. These are the attributes:

Required attribute. Determines where the form handler is located.

Determines how (in other words, using which hypertext transfer protocol method) data from the form will be transferred to the handler. Valid values ​​are METHOD=POST and METHOD=GET . If the attribute value is not set, METHOD=GET is assumed by default.

Determines how data from the HTML form will be encoded for transmission to the handler. If the attribute value is not set, the default is ENCTYPE=application/x-www-form-urlencoded .

The simplest HTML form

In order to start the process of transferring data from the form to the handler, some kind of control is needed. Creating such a control body is very simple:

Having encountered such a line inside the form, the browser will draw a button on the screen with the inscription Submit (read “submit” with an emphasis on the second syllable, from the English “submit”), when clicked, all data available in the form will be transferred to the handler defined in the tag .

The label on the button can be set to whatever you like by entering the attribute VALUE="[Label]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

Now we know enough to write a simple HTML form (example 11). It will not collect any data, but will simply return us to the text of this chapter.

Example 11

Simplest form

The inscription placed on the button can, if necessary, be passed to the handler by introducing the NAME=[name] attribute into the button definition (read “name”, from English “name”), for example:

When you click on such a button, the handler, along with all other data, will receive a button variable with the value Let's go! .

A form can have multiple submit buttons with different names and/or values. The handler can thus act differently depending on which submit button the user clicked.

How an HTML form collects data

There are other types of elements . Each element must include the NAME=[name] attribute, which specifies the name of the element (and, accordingly, the name of the variable that will be passed to the handler). The name must be specified only in Latin letters. Most items must include the attribute VALUE="[value]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} And , however, this attribute is optional because the value of the corresponding variable can be entered by the user using the keyboard.

Basic element types :

TYPE=text

Defines a window for entering a line of text. May contain additional attributes SIZE=[number] (width of the input window in characters) and MAXLENGTH=[number] (maximum allowed length of the input string in characters).

Example:

Defines a 20-character wide window for text entry. By default, the window contains the text Ivan, which the user can edit. The edited (or unedited) text is passed to the handler in the user variable.

TYPE=password

Defines a window for entering a password. Absolutely similar to the text type, only instead of symbols of the entered text it shows asterisks (*) on the screen. Example:

Defines a 20-character wide window for entering a password. The maximum allowed password length is 10 characters. The entered password is passed to the handler in the pw variable.

TYPE=radio

Defines a radio button. May contain an additional checked attribute (indicates that the button is checked). In a group of radio buttons with the same names, there can be only one labeled radio button.

Example:

9600 bps
14400 bps
28800 bps

Defines a group of three radio buttons labeled 9600 bps, 14400 bps, and 28800 bps. The first of the buttons is initially labeled. If the user does not check another button, the modem variable with the value 9600 will be passed to the handler. If the user checks another button, a modem variable with a value of 14400 or 28800 will be passed to the handler.

TYPE=checkbox

Defines a square in which a mark can be made. May contain an additional checked attribute (indicates that the square is checked). Unlike radio buttons, a group of squares with the same name can have multiple labeled squares.

Example:

Personal computers
Workstations
Local network servers
Internet Servers

Defines a group of four squares. The second and fourth squares are initially marked. If the user makes no changes, two variables will be passed to the handler: comp=WS and comp=IS .

TYPE=hidden

Defines a hidden data element that is not visible to the user when filling out the form and is passed to the handler unchanged. It is sometimes useful to have such an element on a form that is redesigned from time to time so that the handler knows which version of the form it is dealing with. You can easily come up with other possible uses yourself.

Example:

Defines a hidden version variable that is passed to the handler with the value 1.1.

TYPE=reset

Defines a button that, when clicked, returns the HTML form to its original state. Since no data is passed to the handler when using this button, a reset button may not have a name attribute.

Example:

Defines a Clear Form Fields button that, when clicked, returns the HTML form to its original state.

Besides the elements , HTML forms can contain menus

All attributes are required. The NAME attribute defines the name under which the contents of the window will be transferred to the handler (in the example - address). The ROWS attribute sets the height of the window in rows (5 in the example). The COLS attribute sets the width of the window in characters (50 in the example).

Text placed between tags , represents the default contents of the window. The user can edit it or simply erase it.

It is important to know that Russian letters are in the window