Interactive html forms. HTML Forms. What is a form and how does it function?

Forms represent the most important interactive HTML elements, allowing page developers to interact interactively with visitors. With their help, the user can return comments about visiting a specific node, forward requests, or register. The developer asks questions by creating a form, and the user answers them by filling it out. The contents of the form are either passed to a CGI script or via e-mail sent to the recipient. The process of creating a form itself consists of two stages. The first involves creating the form itself, and the second involves creating a CGI script on the server. A form is created using various tags and attributes paired together

:

Element

is a prerequisite for all forms. It can have the following attributes:

method This attribute specifies how data is passed to the CGI script. Here, the GET protocol is selected by default, but in most cases, developers use the POST protocol, which allows large amounts of data to be transferred.

action This attribute specifies the CGI script path or email address.

enctype This attribute specifies how the form content is encoded. In other words, it tells the browser how to encode information before sending it to the server. The default is x-www-form-encoded.

The syntax for the script form is:

Mail form syntax:

Element is the base for all form elements. It is used to embed buttons in a form, graphic images, checkboxes, radio buttons, passwords and text fields. Despite the external differences between the forms, they all send data to the CGI script in the form of name:value pairs. An element can have eight attributes, designated type:

TEXT A one-line text field used to enter information that cannot be entered in any other form element. Names, addresses, positions, telephone numbers, hobbies, and data of almost any type are entered here. An element can have the following attributes:

Syntax:

PASSWORD A one-line field that displays asterisks instead of entered characters. An element can have the following attributes:

maxlength. Sets the maximum allowed length of the entered value in characters.

size. Sets the maximum allowed field length in characters.

value. Sets a default value that can be changed.

Syntax:

HIDDENAnother type of hidden information input. Allows you to pass information to scripts that cannot be changed by the user. Some CGI programs use hidden fields to convey information from one page to another, such as a name or number. This approach greatly facilitates the user’s work, eliminating the need to re-enter data. For example, to send a file from source code HTML uses the following construction:

CHECKBOX Flags are used to allow the user to answer in monosyllables: yes/no true/false more/less, etc. It usually looks like a cross or a bird. An element can have the following attributes:

checked. Sets the default initial status of the checkbox.

value. Sets a default value that can be changed.

Syntax:

RADIO Switches are in many ways similar to checkboxes, differing only in their wider functionality choice. In a group of radio buttons, only one can be selected. For each switch it is indicated separate element INPUT.

SUBMIT Clicking this button causes the contents of the form to be submitted to the script that was specified by the action attribute on the element

. Using the buttons you can calculate the sum, load pages, send data, reset values. Syntax:

RESET The button is used to restore the default values. If a default value is not provided, it will simply be reset to zero. The width of the button may vary depending on other elements. It also has a value attribute.

Syntax:

IMAGE Much like the SUBMIT button, only it uses an image as a button. One advantage is the ability to transfer the coordinates of the user's click, which allows you to organize a map of images. An element can have the following attributes:

src. Specifies the URL of the image file.

align. Sets the alignment of the image relative to the text using the TOP, MIDDLE and BOTTOM values.

name. Sets the name of the map, which is also sent to the script along with the coordinates.

Syntax:

BUTTON Creates another button, user browsers can use the value attribute as the original filename.

Syntax:

FILE Creates a file selection control. Syntax:

ACCESSKEY Specifies the button that, when pressed, processes the field. Syntax:

SIZE Specifies the width of the element in pixels. Syntax:

DISABLED Disables the ability to change the contents of a field or the position of a button. Syntax:

Element

Element Syntax:

Has attributes:

selected. Specifies the initially selected word.

value. Sets the meaning of the selected word for the script.

Element used for logical grouping of elements

Element This is the simplest element that allows you to create something like a form and enter a line containing text and generate a request.

Example: Let's say that on the current page the base URL is set using the element then, if the user enters word1, word2, word3 in the search keyword field, the browser will generate and send a request to the server search engine in the form: http://www.name.domain/?word1+word2+word3 If the server search program supports standard query syntax using characters? and +, the search will be carried out.

Element

name specifies the name of the element.

value sets the value of the element.

type when used as a button takes the following values: button, submit and reset.

disabled makes the given element unavailable

tabindex determines the position in the sequence of navigation using the Tab key; disabled form fields do not participate in the order.

accesskey specifies the access key.

Element

Element

allows you to logically group form elements. Syntax:
Name

Element allows you to name logical groups of form elements. Syntax: Name

Considering the basic HTML tags, we cannot help but touch on such an important element as forms. Feedback is often needed on web pages. For example, filling out a form on the site, registration, authorization, comments, etc. In all these cases, the user fills out special areas (form fields) on the page, after which the data is sent to the server. Forms are used to create feedback. A form is a fragment of an HTML document intended for user input.

The figure shows a student registration form on the website of an educational institution.

A container is used to create a form

with the action attribute, which specifies the page on the server that will process the data sent by the form.

Structure in its simplest form:


form elements...

Each form must also have a submit button to submit data after filling out the form.

Button structure:

So, to record almost all form elements, the tag is used with the type attribute. To create a button that resets all data from forms, use the following structure:

To create a text field, there is a text parameter. The following parameters are used: name – field name; size – for the field in symbols; maxlength – the maximum possible number of characters in the field; value – information displayed in the form by default

Example of a form entry with two text fields:


Enter your name:



Enter last name:





The result of the form is shown in the figure.

If you need to enter a large amount of information into a text field, for example, a comment, use the text area form, which is created using a tag

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

I am absolutely sure that while running around the Internet, you have come across various forms, for example, a registration form, a login form, a feedback form and many, many others. HTML forms.

Actually, the form consists of various input elements: text fields, text areas, radio buttons, radio buttons, buttons, and so on.

And in this article you will learn how to create absolutely any .

First create a simple one HTML page, to which add a container (tag

), aligning its contents to the center. I hope you can cope with this without difficulty.

Now let's take a look at the form. The form starts with a tag

, accordingly, ends with the closing tag
. This tag has several attributes that are highly desirable to fill out. But first, let's create a simple form with tag attributes
so that you can understand the purpose of each of them more clearly:


Here we begin a description of the form, which has the following attributes:

1) Attribute " name". The value of this attribute means the name HTML forms. The question arises, why is this necessary? The answer is very simple: if you use not one form, but several, then in order to distinguish one form from another, you need to set different names. And the names themselves are needed in order to access forms, for example, through JavaScript. I’ll tell you a little secret, which I don’t advise you to use, but for the sake of honesty, I’ll tell you about it. In fact, forms can be easily distinguished without names, so, generally speaking, a form name is not necessary at all. But I STRONGLY I recommend giving the forms names, because it will be easier for you to understand what each form is responsible for.

2) Attribute " action". The value of this attribute is responsible for the path to the script file that will process the form. That is, it is not enough to enter data into the form, they still need to be processed accordingly, and this is exactly the path to this handler file and is found in the attribute value " action".

3) Attribute " method". It can have one of two very popular meanings: " post" And " get". This attribute determines the sending method. I will not go into details, I’ll just say that the first method is a hidden sending of data, and the second is an open one. To make it even clearer, let’s look at two transition addresses:

A) http://mysite.ru/scipt/request.php

b) http://mysite.ru/script/request.php?a=7&b=Michael

In the first case, the user does not see what he is sending (method " post"), and in the second he actually sees the names of the variables and their values ​​(method " get"). At the end of the article, you can try to submit the form using two different methods and make sure they are different. But for now I will say that MUCH the method is more often used post", that is, a hidden sending.

This was a description of the form itself, and now you can start adding elements to the form.

The first thing we'll add is a text field. Adding a text field using a tag , or rather using the attribute of this tag " type"with meaning" text". Also, before creating a text field, it is recommended to write what kind of field it is, for example, " your name". Inside the tag

write this line:

Your name:

Again, let's break down the attributes:

1) Attribute " type" is responsible for the type of the input element. In this case, we indicated that this is a regular text field. In the following elements we will change the value of this attribute.

2) Attribute " name" is responsible for the name of the element. Here we indicated that the name of this field firstname.

3) Attribute " value" is responsible for the default value of this field.

As they say, it is better to see once than to hear a hundred times, so you better dial ( Moreover, just type it, and don’t copy it!) this text in the editor, and then look at the result in the browser.

Now let's create another similar field, but not for entering regular characters, but for entering a password. That is, everything should be the same, but only the text should be hidden behind asterisks. Therefore, moving to the next line (tag
), let's write the following code:

Your password:

As you can see, now the value of the attribute " type" is " password". The remaining attributes are the same as for a regular text field.

The next element is a dropdown list. It is created a little more complicated, since here it is necessary not only to declare the creation of a drop-down list, but also to add elements to this list. Let's write, moving to the next line (I won't mention this further) the following HTML code.

Select an option:

Tag . Attribute " name" is clear because I have already explained it several times. List items are created using the tag . Attribute value " value" means what value the variable will have choice(for example, in JavaScript), that is, either choice = 1, or choice = 2, or choice = 3. Immediately after the end of the tag description what the user sees in the drop-down list is put. Again, it’s better to look in the browser, and everything will immediately become clear to you.

Now let's add a text area using the tag

Here we are creating a text area with a height of 10 strings (attribute value " rows") and a width of 15 characters (attribute value " cols").

Within this paired tag, the text in the default text area is specified. Actually, there is nothing more to say here. Let's move on.

The next element is a radio button. A radio button is a set of such " circles", from which you can select only one. Radio buttons are created using HTML tag , or, more precisely, using the value " radio"attribute" type". Let's write something like this HTML code:

Choose one:
Option 1
Option 2
Option 3

Here I will focus on the attribute " name", because in addition to setting a name, it has another very important feature. If you NOT If you make the names of these three radio buttons the same, they will become independent, and, therefore, you can select several options at once. To make sure of this, change the names, and then try to select several options at once, and you will immediately be convinced of my words. Therefore, one group of radio buttons must have the same attribute value " name".attribute" value" means the value of the variable " choiceradio" (again, for example, in JavaScript). Immediately after the tag description there is a text that the user will see next to the corresponding radio button.

Another element of the form are switches ( checkbox). They are created again using the tag . Let's write the following lines:

You agree to our rules:

I think everything is transparent here, so I won’t explain. I advise you to just look at what it looks like in a browser. And I will say that if the checkbox is checked, then the value of the variable " terms" will " yes", if it does not stand, then the value of this variable will be "", that is, an empty string.

Another element is the file selection field. Surely, you have ever uploaded files to a server and you often had to use the file name insertion field to do this. This field is created using the already boring tag . Let's write it like this:

Select file to download:

Considering the basic HTML tags, we cannot help but touch on such an important element as forms. Feedback is often needed on web pages. For example, filling out a form on the site, registration, authorization, comments, etc. In all these cases, the user fills out special areas (form fields) on the page, after which the data is sent to the server. Forms are used to create feedback. A form is a fragment of an HTML document intended for user input.

The figure shows a student registration form on the website of an educational institution.

A container is used to create a form

with the action attribute, which specifies the page on the server that will process the data sent by the form.

Structure in its simplest form:


form elements...

Each form must also have a submit button to submit data after filling out the form.

Button structure:

So, to record almost all form elements, the tag is used with the type attribute. To create a button that resets all data from forms, use the following structure:

To create a text field, there is a text parameter. The following parameters are used: name – field name; size – for the field in symbols; maxlength – the maximum possible number of characters in the field; value – information displayed in the form by default

Example of a form entry with two text fields:


Enter your name:



Enter last name:





The result of the form is shown in the figure.

If you need to enter a large amount of information into a text field, for example, a comment, use the text area form, which is created using a tag

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.



Article rating:
1 Star2 Stars3 Stars4 Stars5 stars(No ratings yet)
Loading...
Share with friends:
Articles on a similar topic
Close
Find on the site
For example: types of drywall