How to create html forms. Creating forms in HTML

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

• POST - data is transmitted in a hidden form
• GET (default) - data is transferred to open form via the browser line.

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

here will be various elements forms to be displayed on the web page.

Form elements

○ Taginput

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

*attributes for the tag< input >

• name - the name of the element
• size - the size of the field
• required - required field
• autofocus - when loading a web page, the mouse pointer will immediately go to the field
• maxlength - this attribute can be used to specify maximum amount entering characters 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, which will be displayed right inside the field form (we used the value attribute earlier).
• type - the type of the element

Example of fillings:

Element type type

Text field

○ "text" text box:

Result:

○ Password field "password":

Result:

○ Email field:

Result:

○ Button for selecting a file from the computer "file":

Result:

○ Telephone field "tel":

Result:

○ Search field "search":

Result:

○ Color selection field:

Result:

○ Field for entering and selecting numbers "number":

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

Result:

○ Date selection field:

Result:

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

Result:

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

Result:

○ Time selection field:

Result:

○ "Range" slider:

Result:

○ Checkbox:

checked - this attribute specifies which checkbox should be checked by default

Result:

○ Radio switch "radio":

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

Result:

Buttons

○ Button "button":

value - the label on the button

Result:

○ Button for submitting data "submit":

value - the label on the button

Result:

○ Reset button "reset":

value - the label on the button

Result:

○ Picture button:

Result:

○ The hidden field "hidden"

○ Select tag

Tagselect- this is a part of the form element, intended for entering a drop-down list.
For tag an end tag is required .
Tag is the skeleton for the dropdown.

To create dropdown items there is a tag

.
For tag an end tag is required .

*attributes for the tag

and

• Name is the name of the entire list. Set only for the tag .
  multiple - for multiple selection, only when selecting you need to hold down the "CTRL" key. Set only for the tag
  .
• Value - set for each item in the list for the tag .
• disabled - blocks the selection of an element in the drop-down list. Set only for the tag .

Not urgent Urgent By courier

Result:

Not urgent Urgent Courier

Or like this:

Not urgent Urgent By courier

Result:

Not urgent Urgent Courier

Now we will block from the "Urgent" list with the "disabled" attribute:

Not urgent Urgent By courier

Result:

Not urgent Urgent Courier

○ drop-down list by group:

To create a group list, use the tag

Option Textarea Label Fieldset Legend

Result:

Option Textarea
Label Fieldset Legend

○ for multiple choice:

Option Textarea Label Fieldset Legend

In the tag the attribute "multiple" is used.

Result:

Option Textarea Label Fieldset Legend

Multiline text box

○ The textarea tag

Tagtextarea- this is a part of the form field element, intended for entering large text, numbers.
an end tag is required .

*attributes for the tag< textarea >

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

Result:

Or like this:

Enter text

Result:

Enter text

Or like this:

Result:

Border styling (fieldset)

○ Fieldset tag

Fieldset tag- using this tag, you can draw a frame around the object.
End tag required.

Additional tags

The legend tag - indicates the title.
End tag required.

Heading

Text within the frame.

Result:

That's all I wanted to tell you about HTML Forms. Now let's summarize and in practice we will try to create simple form using the knowledge that you have learned from this article.

Here is my form:

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

Who do you want to work with?
Director Engineer Welder

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

Result:

Previous post
Next post

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

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

Why are we needed and how do forms work on modern websites

The same site search string () is created using these tags, and then search on your project will be mandatory. Therefore, understanding how they are arranged and work will not hurt you at all for successful work over the design, and even with self-promotion and promotion will not be superfluous.

So, with the rationale for the need to study these elements, I think there should be no more questions, so it's time to move directly to the study of their possible options.

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

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

This could be a text box with a submit button for the query you entered, choices with radio buttons (where you can leave only one of the provided buttons pressed), multiple text boxes with a submit button (), and 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 the case of feedback, the user, after filling in the field with his name, enters his E-mail and the text of the message, and then clicks on the send button, will have the right to hope to send data from the form to the E-mail of the author of the site. 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 to the resource owner by E-mail. Which program will do this, you must specify yourself using the Action attribute.

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

A bit incomprehensible, probably, it seems at the beginning, but I think that everything will become clear as the story progresses.

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:

1. Name - a unique name that must be specified if several web forms will be used in the Html file where you are doing something
2. Action - a required attribute indicating the path to the script, which will receive data from it for further processing
3. Method - using it you can change the method of transferring data from this web form to the script of the handler file. 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, moreover, by transferring data in an open way through the address bar of the browser. To pass form data to the handler script, it is still better to use POST method designed specifically for the transmission of text messages in a closed way

Let's consider the rest of the tags that allow you to create a variety of web forms. The most versatile is Input... Inside it, the Type attribute must be prescribed, which determines what exactly the HTML form created with this tag will be.

The following elements can be created using Input and Type:

1. single line text fields (Type = "Text")
2. fields for entering a password (Type = "Password")
3. checkboxes (Type = "Checkbox")
4. radio buttons (Type = "Radio")
5. hidden fields (Type = "Hidden")
6. regular buttons (Type = "Button")
7. buttons for sending data to the handler (Type = "Submit")
8. buttons for bringing the webform to its original state (Type = "Reset")
9. fields for uploading files to the server (Type = "File)
10. buttons with an image (Type = "Image")

Input has no end tag. What exactly the web form created with it will look like depends entirely on the parameter specified in the Type attribute. If Type is not specified, then a text field will be created by default.

Examples of forms created on Input with different values ​​for Type

Other attributes of the Input tag and examples of their use

Let's see what the rest of the attributes are for:

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

Now let's go over everything examples of a form with Input... The appearance of the text field is similar to the appearance of the field for entering a password, so we will only consider the option of creating a Text, for example, to enter an email address:

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

Note 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 (rezultat), and the Value value is different (YES and NO).

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

Let's consider an example of creating a web form with checkboxes (Checkbox):

Checkboxes differ from radio buttons by the ability to select several options at once. Name is used to define in the handler file which checkbox the checkboxes are in, and Value sets 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 elements of web forms

To begin with, I want to remind you a little of what, in fact, web forms are and why they are needed on the pages of the site. They are primarily designed to repeat the elements available in any operating system in a user-friendly way: buttons, text entry fields, drop-down lists, checkboxes, radio buttons, and the like.

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

Moreover, all its constituent elements (like Select, Option, Textarea, Label, Fieldset, Legend) are already finished workpieces (containers), to insert which it will be enough just to use the required tag with the necessary attributes and parameters.

Browsers themselves know how to display a particular element of a web form. True, the options for displaying the same element of it in different browsers may slightly differ from each other, but, as a rule, it is not essential.

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

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

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

In this case, the opening Form tag should look something like this:

Select and Option - dropdown tags

All elements of the web form that create fields with drop-down lists are formed in the same way. First, the container of the combo box is set using an 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 Option opening and closing tags.

It turns out something like this:

But this is a simplified construction, since Select and Option have a number of attributes that define the properties and appearance of the created drop-down list box.

1. Name - you must specify a unique name for this web form element created using Select. This name will be passed to the server in the data handler program as the name for the variable. The value of the Value attribute (set in Option for each item) of the drop-down list item that the user selects will be passed as the value of this variable.
2. Size - using it you can set the number of displayed items. In other words, with the help of Size, you can set the height of the list, measured in the number of displayed lines. If you do not explicitly specify the Size value in the Select tag, then the default value of the drop-down list height will be used, and it will be different in the absence or presence of the Multiple attribute in Select:
   1. If Multiple is present in Select, then the height of the drop-down list in the web form will be equal to the number of its elements by default. Those. all items in the multiple choice dropdown will be shown. See an example of a plural below. If the Size attribute in Select is set to less than the number of items, then a scroll bar will appear on the right.
   2. If there is no Multiple 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 rest of the items will be available only when you press the elevator button (on the right). See example below
3. Multiple - assigning this attribute in the Select tag will allow you to create a drop-down list with the ability to select multiple items at the same time. Read more about this attribute below.

Dropdown forms 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, while holding Ctrl or Shift, you can select several of the available items at the same time.

In this case, in the second option, data on 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, since it is written simply Multiple and that's it. If it is present, then a drop-down list webform will be created with the possibility of multiple selection (holding Ctrl or Shift).

A variant of the 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 web form for a multi-select dropdown list, which is based on the code above. As you can see, holding Ctrl or Shift, you can select several points at the same time.

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

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

Label Select SelectED Legend website

Option Tag Attributes

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

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

For example like this:

Label Select
SelectED Legend website

Textarea - creating a text field in 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, in it you can transfer text to a new line and it will be transmitted to the server taking into account the transfers made.

So, to create a multi-line text field, you need to register the 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:

1. Name - you set a name for this webform element. It will be passed to the server to the data handler program
2. Cols - you can use it to set the width of the created multi-line field in characters.
3. Rows - set the height of the created multi-line field (in rows). If the text entered by the user has more lines than the height of the multi-line text field, a scroll bar will appear to the right of the field in the web form.
4. Readonly - prohibits users from changing or adding their own text to this field (read-only).
5. Disabled - the user, as in the case of the Readonly attribute, will not be able to change the content of the text field in the web form, but it will change its color to gray, indicating that it is inactive.

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 any element, it is not necessary to click on it, you can click on the name of this element - it will still be activated.

In web forms, this does not happen by default - you need to click on the very element of the Html form to activate it. For example, you need to click on a checkbox in order to put a checkmark in it. Clicking on the text next to the checkbox will have no effect. Try it yourself:

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

But how to bind the Html element of the form and the text? To do this, add an ID with a unique parameter to the attribute, and surround the text with opening and closing Label tags. And that's not all. In the opening Label tag, you need to register the For attribute, the parameter of which must be exactly the same as 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, but also by clicking on the text located next to it.

Fieldset and Legend - breaking the shape into pieces

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 done with just two tags: Fieldset and Legend. They are paired, i.e. they must have an opening and closing without fail.

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

Here's 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

You may be interested

Select, Option, Textarea, Label, Fieldset, Legend - Html tags of the dropdown and textbox form
Lists in Html code - tags UL, OL, LI and DL
MailTo - what is it and how to create a link in Html for sending an Email
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex and other programs

Considering the basic HTML tags, we cannot but touch upon such an important element as forms. Feedback is often needed on web pages. For example, filling out a questionnaire on the site, registration, authorization, comments, etc. In all these cases, the user fills in 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 the student registration form on the website of the educational institution.

A container is used to create the form

The structure of the simplest form:

form elements ...

Each form also needs a submit button to submit data after the form has been completed.

Button structure:

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

There is a text parameter to create a textfield. In this case, 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

An example of a form entry with two text fields:

The result of the form is shown in the figure.

If a large amount of information needs to be entered into a text field, for example, a comment, the form of a textarea is used, which is created using the tag with the following attributes: name - the name of the area; cols - the number of columns in the area; rows - the number of rows; wrap - a way to wrap lines (on - wrap lines, off - do not wrap lines).</p><p>Add a text area field to the above code:</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, allowing you to make a choice from the presented set of values. Tags allow you to create a list form with the value parameter, which is responsible for the value of the element and with parameters name, which specifies the name of the list, size, which is responsible for the number of visible elements.

List entry structure:

<
text
text

In order for the element to be selected on page load, it is necessary in the tag add the selected attribute. Various possibilities of building a list item and its code are shown in the figure.

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

Checkbox and radio button entry structure:

text

Radio button:

text

Elements specified in the outline use the checked attribute to highlight the checkbox and radiobutton by default. 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 attribute of the tag with the value of button:

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

The javascript command alerted is used to display a message in a special window. 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 sites, a field with a hidden test displayed as asterisks is used. This is the password form element:

Registration on the site is often split into several pages and each subsequent one should 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.

Forms have a file element to upload files to the server. An example of code for uploading files to the server is shown 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.