Sensitive form html. Form attributes - tag

All tips

Greetings, dear readers of the blog site. Today I want to talk about something like HTML forms. Whatever the engine of your site (cms), it will definitely use forms in one form or another, created using the Form and Input tags, as well as the attributes and parameters Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .

Well, you can also add to this elements for creating drop-down lists and text fields - Select, Option, Textarea, Label, Fieldset, Legend.

Why are forms needed and how do they work on modern websites?

The same site search string () is created using these tags, and a search will be required on your project. Therefore, understanding how they work and works will not hurt you at all. successful work over design, and even when self-promotion and promotion will not be superfluous.

So, having justified the need to study these elements, I think no more questions should arise, so it’s time to move directly to studying their possible options.

Yes, I would also like to remind you that we have already reviewed a lot of materials on the topic of language hypertext markup, for example, three) and .

At their core, forms consist of elements, for the creation of which various tags are inserted from Form tags inside the main container - Checked, Value, Checkbox, Radio, Checkbox, Submit, etc. We just need to place its code in any convenient place in the site template , indicating using tags and their attributes how it should look.

This could be a text field with a button to submit the entered query, selections with radio buttons (where you can leave only one of the provided buttons pressed), multiple text fields with a button to submit(), and much more.

For example, in the case of “search”, using the Value attribute you can specify what exactly will be written on the button located next to the field for entering a query. The data entered in the forms must be further processed in some way.

For example, in case feedback the user, after filling out the field with his name, entering his E-mail and the text of the message, and then clicking on the send button, will have the right to hope that the data from the form will be sent to the E-mail of the site author. But, unfortunately, it is not possible to implement this using only one hypertext markup language ().

For these purposes you will need special program a handler that, after the user clicks on the submit button, will take all the data from the feedback fields and send it by email to the owner of the resource. You must specify which program will do this yourself using the Action attribute.

Usually the processing program is a script written in PHP language. Therefore in Action attribute In the Form tag, you will need to specify the path to the file of this script located on your hosting server. Let me give you an example of a subscription to RSS feed my blog via E-mail:

It may seem a little unclear at first, but I think everything will become clearer as the story continues.

Form and Input tags for creating buttons, checkboxes and radio buttons

Any form must be enclosed in opening and closing tags Form. This is a kind of container for their creation. This tag has a number of required and optional attributes:

Name – a unique name that must be specified if the Html file where you are doing something will use several web forms
Action – a required attribute indicating the path to the script to which the data from it will be transferred for further processing
Method – with it you can change the method of transferring data from this webform to the handler file script. If you do not specify it, then the Get method will be used by default, which, in fact, is intended mainly for variables and short messages, and also openly transmitting data through the browser address bar. To transfer form data to the handler script, it is still better to use POST method, designed specifically for the transmission of text messages in a private way

Let's look at the remaining tags that allow you to create a variety of web forms. The most versatile is Input. The Type attribute must be written inside it, which determines what exactly the HTML form created using this tag will be.

Using Input and Type you can create the following elements:

single-line text fields (Type="Text")
fields for entering a password (Type="Password")
checkboxes (Type="Checkbox")
radio buttons (Type="Radio")
hidden fields (Type="Hidden")
regular buttons (Type="Button")
buttons for sending data to the handler (Type="Submit")
buttons for bringing the web form to its original state (Type="Reset")
fields for uploading files to the server (Type="File)
buttons with an image (Type="Image")

Input does not have a closing tag. What exactly a web form created using it will look like depends entirely on the parameter specified in the Type attribute. If Type is not specified, a text field will be created by default.

Examples of forms created on Input with different values for Type

Other Input tag attributes and examples of their use

Let's look at what the other attributes are needed for:

Name – if the data must be sent to the handler program script, then you must specify a parameter for the Name attribute. Under this name, the data sent from the form will appear in the information processor program.
Size - this is used to set the size of the field of the web form being created. The value is indicated in the number of characters that can fit in this field. If Size is not specified, the width will default to 24 characters
Maxlength - by default, the number of characters that can be entered into an Html form is not limited, but using Maxlength you can set this limitation. You will not be able to enter more characters than are indicated in the field.
Value - you can use it to specify what exactly will be written by default in the field or on the data submit button
Checked is a flag attribute that can be inserted into the Input for radio buttons or checkboxes. In this case, this radio button or checkbox will be active when the page with the web form is loaded (they will already have a check mark)

Now let's look at everything examples of forms with Input. The appearance of the text field is similar to the appearance of the password entry field, so let’s consider only the option of creating a Text, for example, to enter an email address:

Now let's look at creating a web form with radio buttons (Radio):

Notice that this form uses the Input tag twice, once to create each of the two radio buttons. Moreover, each of them contains the Name attribute with the same value (resultat), and the Value value is different (YES and NO).

This means that when processing it, if any of the switches is selected, a variable will be sent, the name of which is written in Name, but the value of this variable will depend on which switch was selected.

Let's look at an example of creating a web form with checkboxes:

Checkboxes differ from radio buttons by allowing you to select multiple options at once. Name is used to determine in the handler file which checkbox the checkboxes are placed in, and Value specifies the value that will be sent to the handler (if Value is not specified, then the text located next to this checkbox will be sent to the handler).

Select, Option, Textarea, Label, Fieldset, Legend - drop-down lists, text areas and other web form elements

To begin with, I would like to remind you a little about what web forms actually are and why they are needed on website pages. They are primarily designed to replicate elements found in any operating system in a user-friendly form: buttons, text input fields, drop-down lists, checkboxes, switches, and the like.

All users, without any additional explanation, understand the purpose of these elements and if they see an HTML form button, they understand that they need to click on it.

Moreover, all its constituent elements (like Select, Option, Textarea, Label, Fieldset, Legend) are already completed blanks (containers), to insert which you just need to use the desired tag with the necessary attributes and parameters.

Browsers themselves know how to display this or that web form element. True, the display options for the same element in different browsers may differ slightly from each other, but, as a rule, not significantly.

That. it turns out that web forms in Html are an attempt to transfer key elements used in any operating system, to the website pages. But why might they be needed on site pages?

In principle, for the same purpose that similar elements are used in operating systems - transferring data from the user. In the case of forms, data from the user is transferred to the server, where it is processed by a special program (hypertext markup language, unfortunately, does not allow data processing).

Although, data can be sent not only to the server, but also, for example, by email to the address specified in the Action attribute of the Form tag. When sending data from Html to E-mail, the user filling out the fields, after clicking the send data button, will launch the default mail program used on his computer.

The opening Form tag in this case should look something like this:

Select and Option - dropdown list tags

All web form elements that create drop-down list fields are formed in the same way. First, the container of the combo box is set using the opening and closing Html Select tag. And then, inside this container, separate containers are created with the items (elements) of this list. This is done using opening and closing Option tags.

It turns out something like this:

But this is a simplified design, because Select and Option have a number of attributes, which define the properties and appearance of the created drop-down list field.

Name - You must specify a unique name for this web form element created using Select. This name will be passed to the server to the data handler program as a name for the variable. The value of this variable will be the value of the Value attribute (set in Option for each item) of the drop-down list item that the user selects.
Size—you can use it to set the number of items displayed. In other words, using Size you can set the height of the list, measured in the number of lines displayed. If you do not explicitly specify the Size value in the Select tag, the default height of the dropdown list will be used, and it will be different if the Select attribute is absent or present in the Select attribute:
1. If Multiple is present in Select, then the height of the drop-down list in the web form will by default be equal to the number of its elements. Those. All the multiple selection dropdown list items will be shown. See example plural below. If the Size attribute in Select is set to less than the number of items, a scroll bar will appear on the right.
2. If Multiple is absent in Select, then the height of the drop-down list in the web form will be equal to one line by default. Those. Only one line will be visible, and the remaining items will only be accessible by pressing the elevator button (on the right). See example below
Multiple - assigning this attribute to the Select tag will allow you to create a drop-down list with the ability to select several items at the same time. Read more about this attribute below.

Forms with drop-down lists can be divided into two options. In the first option, you can select only one element (line) of the field with a drop-down list; in the second option, holding Ctrl or Shift you can simultaneously select several of the available items.

In this case, in the second option, data about all selected items will be sent to the server. Which drop-down list will be created is determined by the presence or absence of the Multiple attribute in the Select tag.

Multiple is specified in Select without a parameter, because It's simply written Multiple and that's it. If it is present, a drop-down list webform will be created with multiple selection capabilities (holding Ctrl or Shift).

A variant of a field with a drop-down list in which there will be multiple choice possible, will look something like this:

On the right is an example of a multiple selection dropdown webform that is based on the code above. As you can see, by holding Ctrl or Shift you can select several items at the same time.

If there is no Multiple attribute in the Select tag, then only one element of this drop-down list (row) can be selected.

An example in which you can select only one item can be seen here:

Label Select SelectED site Legend

Option Tag Attributes

In the created drop-down list (using Select and Option), you can add something like separators with group headings, which will differ from the rest of the menu items in font style.

To create a group from drop-down list items, you need to enclose them in the opening and closing tags of the Optgroup form, and in the opening Optgroup tag, add the Label attribute, as a parameter of which you will need to enter the desired name of the group.

For example like this:

Label Select
SelectED website Legend

Textarea - creating a text field on a form

There is one more element of web forms that we have not considered - Textarea (a field with the ability to enter multi-line text). It is created using the paired Html tag Textarea. Moreover, you can wrap text in it to a new line and it will be transmitted to the server taking into account the translations made.

So, to create a multiline text field, you need to specify an opening and closing Textarea, and between them you can add text that will be visible when the page with the web form is loaded. The user can then erase this text and write his own.

The following attributes can be used with Textarea:

Name - you specify a name for this web form element. It will be transmitted to the server to the data processor program
Cols - you can use it to set the width of the created multiline field in characters.
Rows — set the height of the multi-line field to be created (in rows). If the text entered by the user has more lines than the height of a multiline text field, a scroll bar will appear to the right of the field in the web form.
Readonly—prevents users from changing or adding their text to this field (read-only).
Disabled - the user, as in the case of the Readonly attribute, will not be able to change the contents of the text field in the web form, but it will change its color to gray, indicating its inactivity.

Label - what is this Html tag in the form for?

The Html Label tag allows you to implement one very interesting feature in forms that is available in operating systems. There, if you remember, in order to activate an element, it is not necessary to click on it; you can also click on the name of this element - it will still be activated.

This does not happen in web forms by default - you need to click on the Html element of the form itself to activate it. For example, you need to click on a checkbox in order to put a tick in it. Clicking on the text next to the flag will not bring any results. Try it yourself:

As you can see, clicking on the text to activate this element is useless - you need to click on it itself. This is exactly the state of affairs that the Label tag is designed to correct. It allows you to make the text next to the web form element clickable, which is undoubtedly will improve usability.

But how to connect the Html form element and text? To do this, you need to add an ID with a unique parameter to the attribute, and the text needs to be surrounded by opening and closing Label tags. And that is not all. In the opening Label tag you need to include the For attribute, the parameter of which must be exactly the same as that of the ID attribute in the Html tag of the form element. It turns out something like this:

As you can see, now, thanks to the use of Label, web form elements can be activated not only by clicking on it itself, but also by clicking on the text located next to it.

Fieldset and Legend - breaking the form into parts

You've probably often seen that large forms in Html are divided into groups (Fieldset), which are surrounded by a frame and each such group has its own title (Legend). This is implemented using just two tags: Fieldset and Legend. They are paired, i.e. They must have an opening and a closing one.

So, to create a group of component parts, you need to enclose all these parts in the opening and closing Fieldset tags. And in order to set a title (Legend) for this group, you need to immediately after the opening Fieldset write a construction consisting of an opening and closing Legend, between which you need to insert the text of the group title.

Here is an example of creating groups using Fieldset and Legend:

Good luck to you! See you soon on the pages of the blog site

You can watch more videos by going to

");">

What is a form and how does it function?

Form– this is one of the most important objects, which is intended for the exchange of information data between the server and the user.

Simply put, if you want to create an online store with the ability to order products on the website, request registration on a web resource and work with accounts, or provide customers with feedback from company managers, then you cannot do without forms.

The form is specified using a special element of the html language
.

Note that the code document may contain several tag declarations , however, only one request can be sent to the server to process the data. That is why information that is entered by the user into the fields provided for this and relates to different forms should not be dependent. Also, it is not allowed to nest forms one within the other.

For those who are impatient and eager to take a quick look at the code representation, I have attached a simple example of using a panel with a text field for a password with a button:

1 2 3 4 5 6 7 8 9 10 11 12

Example

It may not be very clear now what and how interacts in this small program, but I guarantee that after reading the entire article you will be able to create applications that are much more complex.

Sending data to the server side

In order to send the typed (or selected) information in a dialog box, you must use the standard mechanism - Submit button.

The code for such a method looks like this:

When you run the presented line, a button will appear with the inscription: “Submit”.

Another way to send data to the server side is to press the Enter key within the dialog box.

After confirming the sending of the specified information, it does not immediately arrive on the server. First, it is processed by the browser, resulting in the form “name=value”.

The attribute parameter is responsible for the name type tag , and for the value - the data entered by the user. Next, the converted string is passed to the handler, which is most often specified in the attribute action element

The action parameter itself is not required, and in some cases it is not needed at all. For example, if a site page is written using php or js, then processing occurs on the current page and links are not needed.

For a better understanding of the whole picture of the site’s functioning, I would like to add that on the server, data is processed using other languages. Thus, server-side languages are considered to be: Python, php, C-like languages (C#, C, etc.), Java and others.

Now I would like to stop and talk more about the element . To explain it in simple terms, then needed to create text fields, radio buttons, various buttons, hidden fields, checkboxes and other objects.

The tag does not have to be paired with , however, if you need to process user records or enter them, for example, into a database, then you cannot do without a container.

The main attributes of this hypertext markup language element are:

Text– creates a text field;
Submit– creates a button for sending data to the server;
Image– is responsible for the button with the picture;
Reset– sets a button to clear the form;
Password– sets a text field specifically for passwords;
Checkbox– responsible for fields with checkboxes;
Radio– responsible for fields with the selection of one element;
Button– creates a button;
Hidden– used for hidden fields;
File– sets the field responsible for sending files.

Methods of transmitting information

There are 2 ways to transfer user data to the server side: Get And Post. These methods perform the same action, but they differ significantly from each other. Therefore, before mentioning any of them, let's get acquainted with their features.

	Post	Get
Size of transmitted documents	Limited to the server side.	Maximum – 4 KB.
How sent information is displayed	Available only when viewed through browser extensions or other special software products.	Immediately available to everyone.
Using bookmarks	There is no way to add to bookmarks, since requests are not repeated (all pages link to one address).	Any page with a request can be saved as bookmarks and returned to it later.
Caching	Based on the previous paragraph, all requests are on one page.	Each page can be cached separately.
Purpose	Used to send large files (books, images, videos, etc.), messages, comments.	Great for searching for requested values on a web resource or for sending short text messages.

In order to indicate which of the two data transfer methods the browser should use, in the element use the provided parameter method(For example, method="post").

Let's look at the second example. Let's create a form in which you need to enter your personal data (first and last name, date of birth) and create a password. Afterwards we send all this to the server using the method Post.

POST method

Enter your personal information!

For example, to enter a date, there are switches for the number of each parameter (day, month and year), as well as a drop-down panel with the calendar itself for convenience.

Creating a Registration Panel

Basic tags and attributes have been covered. That's why it's time to create a full-fledged registration form using css style markup and validating the entered data. Of course, we won’t be able to see the server work with them, but we will provide the design and important details.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Registration

I advise you to save this program code in a document with the .html extension and utf-8 encoding, and open the latter in a browser window. You will see a registration panel in all its glory with fields for entering your first name, last name, e-mail and repeated password. Notice that when you launch the page, the cursor is immediately positioned in the first text field. This technique is achieved through the attribute autofocus.

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, the following structure is used:

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:

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 with the following attributes: name – name of the area; cols – number of area columns; rows – number of rows; wrap – method of wrapping lines (on – wrap lines, off – do not wrap lines).</p><p>To the above code let's add a text area field:</p><p>A comment: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

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.

Hello, dear readers of the blog site. Continuing our study, we move on to consider the form and input tags with their attributes (), with which you can create a wide variety of forms for the site.

Whatever the topic and content of a particular web resource, it will most likely contain forms in one form or another: text fields, drop-down menus, various buttons or switches. By the way, in one of the publications I already talked about elements that help diversify forms.

What is the practical purpose of all the variety of possible forms? First of all, they are needed to send user-entered data to the server for the purpose of further processing using a specially created script (handler).

HTML forms - how they are created using form and input

As I said at the beginning, some kind of web form, or even several at once, must be present on any more or less developed website. To understand how important they are in the light of a web resource’s compliance with modern requirements, it is enough to give you offhand three objects that use forms based on the form and input tags, which, just by their name, leave no doubt about their necessity for a project of one direction or another:

If you follow, for example, a link to an article about creating feedback (allowing all users to send messages to the site administration), then the HTML code with a form that has an opening (

) Part:

This is where form plays a vital role as it initiates the installation of the webform. It does not itself display an area on a web page, but serves as a container containing other tags.

In our case (see screenshot above), these include several input(this HTML tag is single, in other words, does not have a closing component), and also textarea, with different sets of attributes. Each of them defines its own element included in the form.

16. Autofocus(no parameters) is a logical attribute that sets focus to the field immediately when the web page loads, as a result of which you can enter data without clicking on it. Cannot be applied to input type="hidden" only.

17. Disabled(without values) - disables for the user the form element to which it was added. Most often it is used in conjunction with scripts, where conditions are specified under which an inaccessible element will be activated.

18. Form— associates the element with the form when it is located outside the container

. To link, a global id attribute is added to the form tag, and a form attribute is added to the input tag, the values of which are the same (for example, id="data" and form="data").

19. Multiple(no parameters) - sets multiple choice option for the user and is only used in conjunction with type="file" and type="email".

If you use the file upload field, you can select several files from your computer at once by using the Ctrl or Shift keys. If a field for entering an email address is displayed (type="email"), then emails should be entered separated by commas.

20. Required(no values) – activates the requirement for the user to enter data. Therefore, the browser blocks the submission of the web form if a required field is left empty and displays a corresponding message about the need to fill it out.

This attribute is not used for graphic and standard buttons (type="button | image"), as well as for hidden input fields (type="hidden").

The next four attributes (22-25) for the input tag carry almost the same functionality as for , but for the sake of completeness I will briefly mention them too.

22. Maxlength— imposes a limit on the maximum number of characters that can be entered when filling out a text field. If you attempt to exceed this limit, further input will be blocked. This attribute is only applicable for text elements with type="email | password | search | tel | text | url".

23. Minlength— imposes a limit on the minimum number of characters required to be entered into the text area. If an attempt is made to send data containing fewer characters, a short message will appear indicating the need to supplement the contents of the form and information about the number of characters already entered will be provided. The terms of use are exactly the same as in the case of maxlength.

24. Placeholder— you can place a hint (it will serve as a parameter) directly in the text field, which will disappear the moment the user starts entering characters. Only for fields that are formed using parameters email, password, search, text, tel, url type attribute of the input tag.

25. Readonly(no parameters) - indicates that the text previously entered in the field is available for reading and copying only. It is usually used in conjunction with scripts, where conditions are specified that, when met, can activate this form element.

And finally, a few more attributes that complement the functionality of various form elements:

26. Pattern— as its value, reflects a regular expression on the basis of which the rules for entering information are set. In this case, it is recommended to additionally add a global title attribute, as a parameter of which you can add explanatory text to help users fill out the fields. Pattern is applied only to email, password, search, text, tel, url elements. Let's understand it with an example. Here is the code for a simplified registration form (with ):

Password

For the login field (type="text"), a regular expression (5,) is specified as the pattern value, which implies the use of Latin characters, and at least five characters must be entered.

In relation to the text area for the password (type="password"), the value is set to (8,), which specifies the entry of exclusively Latin characters in any case (upper and small letters), as well as numbers, while the total number of all characters should not be less than eight.

If the specified input conditions are violated, the browser will not allow you to send data and will display an appropriate warning:

27. Src— defines the path to the image (URL, which is its value) for displaying the graphic button “image” (see the table of input type parameters above).

It can take any integer or fractional number as a parameter. Default step="1". To set the final input range, you can again use the min and max attributes mentioned just above. For clarity, we will include 2 elements type="number" in the test form. For the first, set step="2", and for the second, step="0,1":

Enter a value from -10 to 10:

Enter a value between 0 and 1:

29. Value— sets the value of the form element that will be passed to the handler. A name-parameter pair is sent to the server, where the name is determined by the name attribute of the input tag, and the parameter is determined by the value attribute. Moreover, for various form elements value will play different roles:

for type="button | reset | submit" - sets the text label on the buttons;
for type="checkbox | radio | image" - identifies each checkbox, switch or graphic button when sending and processing data on the server;
for type="password | text" - immediately when loading the form, it displays preliminary text in the field, which can be changed or completely deleted by the user;
for type="file" (file upload) does not apply because it does not affect this element.

Example usage for each of the above options:

Select CMS: W.P. Joomla

Here value attribute value defines the following components of each element: displays a text fragment for the field type="text" ("Your name"), identifies each of the radio buttons ("1" and "2") set using type="radio", and also activates inscription on the button ("Submit").

An example of creating a beautiful HTML form

Next, I will try to present you with a sample web form, the code of which includes not only input type combinations with different values that form standard text fields and buttons, but also, for example, which allow you to initiate focusing on an element not only with a direct mouse click, but also by clicking on text.

Please note that to obtain a unique design, individual form components are placed in, each with sets of:

Back (max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- bottom:10px; width:100%).in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; background-position:10px 10px) .form-4 input (display:block; height:50px; font-size:24px; width:100%; cursor: pointer)

As a result, such a web form takes on the following outline:

More complete information on creating this specific form can be found at this page(by the way, there you can not only test the functionality of individual text areas by entering data into them, but also experiment with the web form by editing the HTML code and/or CSS properties, completely or partially changing its appearance).

My goal was to introduce you to the algorithm for using different values of the type attribute and the form tag to create various HTML forms on the site. I hope the task is completed. In any case, share your thoughts on this diverse topic in the comments.

Naturally, in subsequent publications I will continue to describe the main tags of hypertext markup, so do not forget to subscribe to blog updates via e-mail. Also, to reinforce this, look at another lesson by Evgeniy Popov on creating a contact form.

Forms in HTML are the most complex, but on the other hand, perhaps the most interesting topic in HTML.

Web forms allow site visitors to enter certain information into special fields, and the developer receives it in a form convenient for him.

An example of a form could be a guest book, a questionnaire, or an online test. Forms are filled out when registering on the website, when placing orders in an online store, etc.

Using HTML, you can create a form framework: text fields, menus, lists, buttons, checkboxes and radio buttons. That is, those elements with the help of which certain information is entered into the form.

Then the data entered into the form is sent to the server for processing. But HTML is powerless here - a program or script that is attached to it is already working on processing the form. Such programs are usually written in PHP or JavaScript.

Form attributes - tag

There can be several forms on a web page ( as much as the developer needs). Each of them begins with the tag and ends with a closing tag .

The action attribute is mandatory for any form - it specifies the address to the file that serves the form ( processes the data entered into it).

The method attribute specifies how the form content will be submitted. There are two methods - GET and POST. Now it makes no sense to delve into these parameters, since the topic of sending information using the GET and POST methods relates to data processing languages ( for example PHP). It is enough to know that it is the POST data transfer method that is used in most cases in forms.

Tag name attribute

is optional. But if there are several forms in the document, then each of them must be somehow identified by the handler. Therefore, the presence of the name attribute in this case is necessary - it specifies the unique name of the form.

You can also set the encoding for the input data - the accept-charset attribute is responsible for this, and also, using the target attribute, define the window in which the result of processing the submitted form will be displayed ( in a new or current window).

But the tag itself makes no sense, because the form transmits data that first needs to be entered somewhere!

Data input. Form fields - tag

Tag This is the most common tag found in forms. It is designed to create various elements that serve to enter data into a form: text fields, buttons, checkboxes, radio buttons.

type is the main attribute of the tag . It sets the field type ( element) forms:

Attribute value type="..."	Result	Description
		Single line text field for entering text. The size attribute specifies the width of the field in characters.
		Text field for entering a password. The maxlength attribute sets the maximum number of characters that can be entered
	1 2 3	Switch. You can select only one option from those offered. The checked attribute specifies a pre-checked field.
	1 2 3	Checkbox. There are several options to choose from. Attribute checked defines a pre-checked field.
		Button. The value attribute sets the label on the button.
		Reset button. Returns form fields to their original form. Reset entered data.
		Button for sending the entered data.
		Field for entering the name of the file being sent.
		Image button. It is also used to send data to the server. The src attribute specifies the address of the image file.
		Hidden field - invisible to the user.

Dropdown - Tags same as tag serves to collect information - it creates a list from which one or more elements can be selected. Each element corresponds to a value, which is sent to the server for processing.

The type of list created depends on the value of the size attribute: with size= "1" ( default value) the list will be drop-down.

A different value for the size attribute will correspond to the number of displayed list items. For example, with size="3" , three elements will be visible. To view other list items ( if there are any) you should use the vertical scroll bar, which is added automatically.

By default, only one list item can be selected. Adding the multiple attribute to a tag and creates each list item.

Using the tag's name attribute

7 Wonders of the World!

The cardinal direction is one of the four main directions:
North South West East
7 Wonders of the World!
Pyramid of Cheops Hanging Gardens of Babylon Statue of Zeus at Olympia Temple of Artemis at Ephesus Mausoleum at Halicarnassus Colossus of Rhodes Lighthouse of Alexandria

Multiline text field - tag </h3> <p>Tag <textarea>creates a multiline text field. It is permissible to make line breaks that are preserved when transmitting data to the handler.</p> <p>Tag name attribute <textarea>is mandatory - using it, the text field is given a name.</p> <p>The disabled attribute disables the field - the contents of the field cannot be changed and it is not accessible. The readonly attribute indicates that the field is read-only - the user does not have the ability to edit the content, but it is available - it can be selected and, for example, copied.</p> <p>You can set the width of the text field in characters and the height of the field in lines using the cols and rows attributes, respectively.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>If the contents of the field exceed its size, a slider will appear.</span>

If the contents of the field exceed its size, a slider will appear.

Example of using a form

Now let's see how the form works.

Educational video order form:

Sensitive form html. Form attributes - tag

Why are forms needed and how do they work on modern websites?

Form and Input tags for creating buttons, checkboxes and radio buttons

Examples of forms created on Input with different values for Type

Other Input tag attributes and examples of their use