HTML forms are a very powerful tool for interacting with users, but for technical reasons it is not always obvious how to use them to their full potential. Simply sending data in this case is not enough - you also need to make sure that the data that users fill in the forms will be sent in the correct format, which is necessary for their successful processing, and that this will not break existing applications. It is also important to help users fill out the forms correctly and not be disappointed when trying to use applications.
To create an HTML form, use the <form> tag. It does not actually create a field, but is used as the parent container for elements such as <input> and <textarea>. If you want to make a simple subscription form, with regular verification and payment, or interactive web applications, for work you will need to use HTML element tags, the most important of which is <form>.
How standard HTML forms work
HTML forms were invented and basically standardized before the advent of asynchronous JavaScript and complex web applications. Today, forms input, buttons, and other interaction mechanisms are used, but this is based on a system based on the HTTP request and response paradigm.
When the user loads the page, an http request is sent (usually this is the so-called GET request). It is sent by your browser to the server, and usually the server responds with the web page that the user is looking for. This interaction is one of the most fundamental concepts of the Internet. And that explains how HTML forms work.
The process of exchanging information with the server
Each <input>, including elements such as <select>, is located inside the <form> and has the attribute name (name), as well as its value. The value is determined in different ways. For text <input>, this will be the value that was entered into the field by the site user. For radio buttons, the value of the selected parameter. The user can customize the value, but more often than not, the name attribute cannot be configured. This creates a set of name-value pairs in which the values are determined by user input.
The main difference between a form and a regular HTML document is that in most cases the data collected by the form is sent to the web server. In this case, you must configure the web server to receive and process data. The action attribute of the <form> tag defines the location (URL) where the collected data should be sent.
What does the server response look like
When the form is submitted, the name-value pairs and all fields inside the <form> element are included in HTTP. A request is made to the URL defined in the form of the action attribute. The request type (GET or POST) will be in the method attribute. This means that all the data provided by the user is sent to the server immediately in the process of submitting the form, and the server can do whatever it wants with this data. When the server receives the submit form, it perceives it like any other HTTP request. The server does everything it needs to do with the included data and issues a response back to the browser.
If you recall that page loading is the answer, you will notice that the same thing happens here. In a typical form created using the <form> tag, the answer is a new page loaded by the browser. Typically, a new page replaces the current content, but this can be overridden with the target attribute. The vast majority of online forms work this way, and that’s why the user gets sent to the “Thank you” page when filling out the email subscription form.
Web applications and forms without the <form> tag
Modern interactive web applications use JavaScript code to run asynchronous http requests. These are calls to the server that do not cause the page to reload. They do not rely on the <form> tag, an HTML element embedded in the behavior. They do not combine all user data into a single whole and do not send them immediately. For this reason, many HTML + JS typesetters in web applications do not use the <form> tag on all forms. More often they just use it as a kind of container for various types of input fields and elements. In this case, the used method and action attributes will not be visible.
More about forms
HTML forms are one of the main points of user interaction with a website or application. They allow users to send data to the site. Most of the time, data is sent to the web server, but the web page can also intercept it for use by itself. There are many elements associated with the form - various types of buttons, selectors for various types, feedback mechanisms. Therefore, difficulties may arise in the process of deciding which values should be assigned to the attributes of the <form> tag. When it comes to creating forms, you need to make them work on different screen sizes. It is important to make them accessible to people with disabilities. Because forms and the <form> tag with attributes are probably the most complex aspect in HTML.
What the form consists of
An HTML form consists of one or more widgets. They can be single-line or multi-line text fields, selection fields, buttons or radio buttons. Most often, they are associated with the <label> attribute, which describes their purpose - correctly implemented <label> can clearly instruct both sighted and blind users how to get into the input form. The <label> attribute is correctly associated with <input> using their for and id attributes, respectively. In this case, the for label refers to the id attribute of the corresponding widget, and the screen reader, using it, will read out what is written in it.
In addition to the structures specific to the <form> tag, it is important to remember that forms are just HTML code. This means that you can use the full power of HTML to structure your forms. It is common practice to use the <div> tag to wrap elements with the <p> tag. HTML lists are also widely used; multiple checkboxes or radio buttons are used for structuring. After creating the input fields, it remains to add a button using the <button> tag and check the result. The flexibility of HTML forms makes them one of the most complex structures in HTML format. But with the help of the right structure when building an HTML form, you can guarantee that it will be both convenient and accessible.