Forms and Client-Server Interaction

HTML Forms

Learning Objectives

  • You know how to create HTML forms with input fields and can use labels for input fields.
  • You know of different input types and know that browsers can do client-side data validation.

So far, we’ve used individual input fields for entering data. However, we often wish to collect multiple pieces of data at once, such as name, email address, and password when registering to a service. For this purpose, HTML provides forms.

Forms are created using the HTML form element, which can contain from zero to a nearly unlimited amount of input fields.

Form element

The form element has two attributes: method and action. The method attribute describes the used HTTP method (either POST or GET), while the action describes the address to which the data is sent.

  • If the method attribute is missing, GET is used by default.
  • If the action attribute is missing, the current address is used by default.

The example below has a form element that uses the POST method to send data to the current address. The form has no input elements, however — when you click the “View content in browser window button”, you’ll see an empty page.
Loading Exercise...

Input elements

Input elements are created using the input element. The input element has a number of attributes, of which the most important ones are type, id, and name.

  • The type attribute describes the type of the input field.
  • The id attribute is used for referring to the input field from other elements.
  • The name attribute is used for identifying the data entered to the input field.

The example below creates a form that contains an input field for entering text (the value of the type attribute is text). The name of the input field is address. The form also has an input element for submitting the form with the type submit, which creates a button. The value attribute provides the text for the button.

When the button is pressed, the browser sends the data using an HTTP POST request to the current address (as the action attribute is missing).

Loading Exercise...

Input labels

The label element is used for referring to an input field within the form and for adding a textual description for the input field.

There are two ways to use the label element: (1) nesting the input element in the label element and (2) referring to the input element from the label element using an attribute for.

Nesting input in label

In the first method, the input element is nested inside the label element. This way, the label is automatically associated with the input field, and clicking the label will focus the input field.

Referring to input with for attribute

In the second method, the label element refers to the input element using the for attribute. The for attribute must match the id attribute of the input element. This way, clicking the label will also focus the input field.

Try modifying the above code by removing the for attribute from the label, and trying to click the label. You will notice that the input field is not focused anymore, as the label is not associated with the input field.

Loading Exercise...

In our case, we will use the nested input element method, as it is simpler to use. The for attribute method has its own benefits, as it e.g. allows placing the label in any location on the page.

Loading Exercise...

Multiple input fields

Forms may have multiple input fields. In the example below, there is both a text input field and a checkbox.

The form also contains a <br/> element, which is used for creating line breaks.

Input types

The type of the input field is controlled using the type attribute. There are over 20 different input types, some of which are shown in the next example.

Some input types also support placeholders, which are shown in the input field when it is empty. The placeholder is added using the placeholder attribute, as shown in the example below.

For some input types, such as checkbox and radio, the field is included in the submitted data only if it is selected.

Input validation in the browser

Some input types such as number and email may do data validation on the browser, depending on the browser. Try, for example, to type in an invalid email to the below email input field and then click the submit button. The browser will not allow you to submit the form until you have entered a valid email address.
Client-side data validation

Data validation done in the browser cannot — and should not — be trusted as the interactions can also be done using JavaScript or tools like curl. Client-side data validation is primarily used to improve user experience by providing immediate feedback on the data entered into the form.


Loading Exercise...

Summary

In summary:

  • Forms are created using the form element.
  • Forms contain input elements for entering data.
  • The label element is used for describing input fields.
  • There are many different input types, such as text, email, password, checkbox, and number.
  • Some input types provide client-side data validation.
  • Client-side data validation should not be trusted as the only form of validation as it can be bypassed.
Loading Exercise...
← Overview
Forms and Form Events →