Basic HTML forms
This tutorial will analize the functionality of forms, focusing on a small set of basic controls authors can use to collect data from user input.
Concept
HTML forms serve the purpose of collecting information provided by the visitors, which is later sent back to the server. For proper operation, it's important that the form provided in HTML is paired with some server-side code, usually called "processing agent", that will be responsible for receiving and processing the information as the author sees fit. This processing may consist of, for example, saving the information received or sending it by e-mail.
A form
is basically a container for controls. Each control in a form
is thought to collect information input by users, in ways that go from text lines to file uploads, through options, dates, passwords and many more. Once users have filled the form with data, they can submit it back to the server in order to let the processing agent administrate the gathered information.
The following code shows the basic structure of a form, with its opening and closing tags wrapping a set of controls.
<form>
[Set of controls]
</form>
But this model says nothing about how the form is going to be processed and where. Such information can be provided with attributes like: action
, which indicates the location of the processing agent; method
which determines the method used to pack form data before it's sent to the processing agent; and target
, which indicates where the processing results will be displayed. Here we'll talk about the action
attribute alone, leaving the other two to be analized in the reference of form
.
The following form
has been declared with the URI of a processing agent I prepared for teaching purposes, in the action
attribute. You can see the processing agent taking over in a new window when you submit the form.
<form action="../form-result.php" target="_blank">
<input type="submit" value="Submit the form">
</form>
Text controls
Text input controls provide the means to collect textual data, like names, directions, phrases, messages, passwords, etc. In the following sections we'll analyze the two most used and basic text controls.
Single-line text input
A single-line text input, which allows only one line of text to be entered, is one of the many controls that's declared with the input
element. In this case, the input
element should present the value "text" in the type
attribute.
With this alone, the control is already visible, but a name
is needed if there's an intention to gather the data entered by the user in this control. The value of the name
attribute will identify, server-side, the user's input in the control. The following example shows a basic implementation of a text input. Additionally, we're enclosing the control and its label in a paragraph, as these two can be considered to conform a unit with an idea that separates it from the rest.
<form action="../form-result.php" target="_blank">
<p>
Enter your full name: <input type="text" name="fullname">
<input type="submit" value="Send data">
</p>
</form>
After sending the form's data you can see clearly in the information displayed by the processing agent, how the data is received server-side. There you can also see that the name
declared for the control is associated to the data entered by the user.
Multi-line text input
This type of control is very similar to the previous, but it has the particularity of allowing multiple lines of text to be entered. A multi-line text control is usually rendered as a box, tall enough to contain more than one line of text at the same time. This representation, usually provides a scrollbar mechanism to allow users to see all entered text, particularly when it's long enough to exceed the box boundaries.
A multi-line text input is inserted with the textarea
element. Like before, the name
attribute provides a name for the control that will help processing agents to identify the data submitted by the user.
In the following example we're improving the previous form
to allow both types of text strings (single-line and multi-line) to be entered. In the example proposed, each control adapts better to the type of data it's supposed to collect.
<form action="../form-result.php" target="_blank">
<p>Enter your full name: <input type="text" name="fullname"></p>
<p>
Leave a message:<br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Send data">
</form>