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>

The submission of the form has been performed by a submit button. This particular type of control will be treated later in this tutorial.

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.

When the ENTER key is pressed in single-line text inputs, browsers usually submit the form that contains them, instead of passing to a new line in the control. This is due to the nature of this control that only accepts one line of text.

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>

Enter your full name:

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>

Enter your full name:

Leave a message:

1234Next

X

Are you looking for a place to host your next website? I can help you with that!