 |
| The functionality of forms in HTML |
This tutorial will look at the functionality of forms, focusing on a small set of basic controls that website authors can use to collect information entered by the user.
CONCEPT
HTML forms serve the purpose of collecting information provided by site visitors, which is then sent back to the server. For its correct functioning it is important that the form provided in HTML is accompanied by a code on the server side, which we will call "processing agent", which will be in charge of receiving and processing the information as the author sees fit. This processing may consist of, for example, storing the information or sending it via email.
A form ( form) is basically a container for controls. Each control in a form is intended to collect information entered by users, in ways that can range from lines of text to uploading files, through options, dates, passwords and much more. Once users have filled out the form with the data, they can send it back to the server for the processing agent to manage the collected information.
The following code shows the structure of a form, with its opening and closing tags enclosing a set of controls.
<form> [Conjunto de controles] </form>
But this model says nothing about how and where the form will be processed. Such information can be specified with attributes such as action:, which indicates the location of the processing agent; methodwhich determines the method used to package the form before it is sent to the processing agent; and target, which indicates where the results of the process will be displayed. Here we will only talk about the attribute action, leaving the other two to be analyzed in the elementform reference.
The following form has been declared with the URI of a processor agent that I have prepared for learning purposes, in the attribute action. You can see the processing agent taking control of the process in a new window when you submit the form.
<form action="../form-result.php" target="_blank"> <input type="submit" value="Enviar el formulario"> </form>
The submission of the form has been carried out by a submit button.
This particular type of control will be covered later in this tutorial.
TEXT CONTROLS
Text controls provide the necessary means to collect textual information, such as names, addresses, phrases, messages, passwords, etc. In the following sections, we will discuss two of the most basic and widely used text controls.
SINGLE LINE TEXT FIELDS
A single-line text field, allowing the entry of a single line of text, is one of many controls that are declared with the elementinput . In this case, the elementinput must have the value "text" in its attribute type.
When the key ENTERis pressed in these types of fields, browsers usually send the form that contains them, instead of going to a new line of the control. This is due to the nature of the control that only accepts one line of text.
With only this, the control is already visible, but a name is needed (in the attribute name) if there is an intention to collect the information entered by the user in this control. The value of the attribute will nameidentify, on the server-side, the data entered by the user in the control. The following example shows a basic implementation of a single line text control. Additionally, we will be enclosing the control and its label in a paragraph, since these two can be considered as a unit with an idea that separates them from the rest.
<form action="../form-result.php" target="_blank"> <p> Ingresa tu nombre completo: <input type="text" name="nombrecompleto"> <input type="submit" value="Enviar la información"> </p> </form>
Once the form is submitted you can clearly see in the information displayed by the processing agent, how the information is received from the server-side. There you can also see that the name ( name) declared for the control is associated with the information entered by the user.
MULTI-LINE TEXT FIELD
This type of control is very similar to the previous one but has the particularity of allowing the entry of multiple lines of text. A multi-line text field is usually represented as a box, tall enough to hold more than one line of text at a time. This representation usually provides a scrolling mechanism to allow users to see all the text entered, especially when it is long enough to exceed the limits of the box.
A multi-line text field is inserted with the elementtextarea . As before, the attribute nameprovides a name for the control that will help the processing agent to identify the information sent by the user.
In the following example, we will improve the previous form to allow the user to enter both types of text strings (single line and multi-line). In the proposed example, each control is better adapted to the type of information it must collect.
<form action="../form-result.php" target="_blank"> <p>Ingresa tu nombre completo: <input type="text" name="nombrecompleto"></p> <p> Deja un mensaje:<br> <textarea name="mensaje"></textarea> </p> <input type="submit" value="Enviar la información"> </form>
Must Read, HTML Articles
0 Comments