Unprofitable form html. Forms in HTML
Good day, fans of web development and those who want to create their own website. Before that, all my publications were devoted to the basic elements of language, methods of creating various objects content, their formatting, structuring, etc. Having mastered the previous topics, you can already create a fairly good website. However, it will be incomplete without today’s topic: “Creating forms in html.”
This section of the language is very important. So take the time to study it. Special attention, otherwise the web resource you created will not be released into production. Thus, after reading the article, you will learn what you need to use forms for, what tags they are used to create, and you will also be able to try specific examples on practice. Let's get started!
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 feedback with 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 the information that the user enters into the fields provided for this refers 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 |
|
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 confirmation of shipment 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 website page is written with 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 functioning of the site, I would like to add that on the server, work with data is already performed using other languages. So, server-side languages considered: Python, php, C-like languages (C#, C, etc.), Java and others.
Now I would like to stop and talk more about the element . If you explain in simple language, That 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 language element hypertext markup 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 previous paragraph all requests on one page. | Each page can be cached separately. |
| Purpose | Used for forwarding 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.
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 style css markup and checking 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 |
|
I advise you to save this code programs 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.
Start filling out the fields, leaving one unchanged, and click the “Register” button. As you already noticed, the form will not be submitted, since each element < input> attribute specified required. It sets the marked fields as mandatory.
One more interesting point is a type indication type="email", which appeared in . When using this type of field, the entered information is automatically checked for correctness. In case of errors, the form is not sent to the server.
So the publication has come to an end. In it I tried to collect maximum amount important and relevant knowledge regarding forms. I hope it was useful to you! I would be very grateful if you join the ranks of my subscribers and tell your friends about the blog.
Bye bye!
Best regards, Roman Chueshov
Read: 333 times
An HTML form is a part of a document that allows the user to enter information of interest, which can subsequently be accepted and processed on the server side. In other words, forms are used to collect information entered by users.
To determine which form element the current label belongs to, you must use the for attribute of the tag
Let's look at an example of use:
Yes
In this example we:
- Inside first forms:
- Posted two radio buttons ( ) to select one of limited number options. Note again that for radio buttons within the same form the same name must be specified, we indicated different values. For first checked , which specifies that the element should be preselected when the page loads (in in this case radio button with the value yes ). In addition, we have specified global attributes for radio buttons that define unique identificator for the element.
- Placed two elements
- Inside second forms:
- Posted two radio buttons ( ) to select one of a limited number of options. For second For radio buttons, we have specified a checked attribute, which indicates that the element should be pre-selected when the page loads (in this case, a radio button with the value no ). In addition, we specified unique values for the radio buttons within the form and the same names.
- Placed two elements
In the browser, both options (methods) for using text labels look identical:
Tooltip for input fields
Let's look at an example of use:
IN in this example we specified for the element with type text (a single-line text field) and type password (password field), a text prompt for the user (the placeholder attribute) that describes the expected value for the input.
The result of our example:
Questions and tasks on the topic
Before you start studying next topic take the practical task:
- Using the knowledge you have gained, create the following order form:
A nuance: in fields where selection is expected, it should be possible to select by clicking on the text, and not just on the element itself.
After you complete the exercise, inspect the page code by opening the example in a separate window to make sure you did everything correctly.
Tag (from English form- form) installs a form on a web page.
The form is intended for data exchange between the user and the server. The scope of application of forms is not limited to sending data to the server; using client scripts, you can access any element of the form, change it and apply it at your discretion.
A document can contain any number of forms, but only one form can be submitted to the server at a time. For this reason, form data must be independent of each other.
To submit the form to the server, use the Submit button, the same can be achieved by pressing the Enter key within the form. If the Submit button is missing on the form, Enter key imitates its use.
When the form is submitted to the server, control of the data is transferred to the program specified by the attribute action element
The closing tag is required.
WAI ARIA
Default role value: form
Valid role values:
- none
- presentation
- search
Attributes
- accept-charset - Sets the encoding in which the server can accept and process data.
- action - The address of the program or document that processes the form data.
- autocomplete - Enables autocomplete of form fields.
- enctype - The way the form data is encoded.
- method - HTTP protocol method.
- name - The name of the form.
- novalidate - Cancels the built-in validation of form data for correctness of input.
- target - The name of the window or frame where the handler will load the returned result.
accept-charset
Sets the encoding in which the server can accept and process form data.
Syntax
Values
Encoding name, for example Windows-1251, UTF-8, etc.
Default value
The encoding set for the page.
action
Specifies the handler that form data is accessed when it is submitted to the server. Can act as a handler server program or an HTML document that includes server-side scripts (eg Parser). After the handler performs actions on the form data, it returns a new HTML document.
If action attribute absent, current page reloads, returning all form elements to their default values.
Syntax
Values
The value is taken as full or relative path to the server file.
Default value
autocomplete
Controls auto-filling of form fields. The value can be overridden by the autocomplete attribute on specific form elements.
Autofill is performed by the browser, which remembers the values written the first time you enter it, and then substitutes them when you type it again into the form fields. In this case, autocomplete can be disabled in the browser settings and cannot be changed in this case using the autocomplete attribute.
When you enter the first letters of the text, a list of previously saved values is displayed, from which you can select what you need.
Syntax
Values
- on - Enables form autofill.
- off - Disables autofill. This value is usually used to prevent the browser from saving important data (passwords, numbers bank cards), as well as rarely entered or unique data (captcha).
Default value
enctype
Determines how form data is encoded when it is submitted to the server. Usually there is no need to set the enctype attribute; the data is understood quite correctly on the server side. However, if you are using a file submission field (input type="file"), you should define the enctype attribute as multipart/form-data .
Syntax
Values
- application/x-www-form-urlencoded - Instead of spaces, put + , symbols like Russian letters are encoded by them hexadecimal values(for example, %D0%90%D0%BD%D1%8F instead of Anya).
- multipart/form-data - Data is not encoded. This value is used when sending files.
- text/plain - Spaces are replaced with a + sign, letters and other characters are not encoded.
Default value
application/x-www-form-urlencoded
method
The method attribute tells the server about the request method.
Syntax
Values
The value of the method attribute is case-insensitive. There are two methods - get and post.
- get - This method is one of the most common and is designed to obtain the required information and transfer data to address bar. Name=value pairs are then appended to the address after the question mark and separated by an ampersand (& symbol). The convenience of using the get method is that the address with all the parameters can be used repeatedly, saving it, for example, in your browser bookmarks, and you can also change the parameter values directly in the address bar.
- post - The post method sends data to the server in a browser request. This allows you to send large quantity data than is available to the get method, since post does not have a 4 KB limit. Large volumes of data are used in forums, mail services, filling databases, sending files, etc.
Default value
name
Defines unique name forms. Typically, the name of the form is used to access its elements through scripts.
Syntax
Values
The name is a set of characters, including numbers and letters. JavaScript is case sensitive, so when accessing a form by name through scripts, use the same spelling as the name attribute.
Default value
novalidate
Cancels the built-in verification of data entered by the user in the form for correctness. This check is carried out automatically by the browser when the form is sent to the server and occurs for fields , , as well as if there is a pattern or required attribute.
Syntax
Values
Default value
By default this attribute is disabled.
target
After the form handler receives the data, it returns the result as an HTML document. You can define the frame into which the resulting web page will load. For this it is used target attribute, its value is the name of the frame. If target is not set, the returned result is shown in the current tab.
Syntax
Values
The value is the name of the frame specified by the element's name attribute