Forms

To insert a form in a document, the <form> tag is used with all its controllers inside to make it work.

A form requires three attributes in order to work:

• Action: document that is responsible for receiving and processing the data.
• Method: the way in which the information is sent. There are two methods: GET y POST.
• Enctype: how the content is encrypted.

Action

This attribute tells the document which is the file that receives and processes the data. That file has to be written in a different language (PHP/ASP/JSP). If a value is not indicated, by default Action will be the same file as where the form is.

Let's remember that HTML is not a programming language.

Method

Is the way in which data is sent. There are two ways in HTML:

• GET: The GET method sends the encoded user information appended to the page request. The information will travel through the browser URL.
• POST: The data sent by POST method goes through HTTP header so security depends on HTTP protocol. For example, by using HTTPS you can make sure that your information is secure.

If not indicated, by default the Method used will be GET.

Text Entry

There are three main controllers for text entry in a form:

• One line boxes (Enter key is not allowed).
• Boxes for passwords (the content is not visible).
• Multiline boxes.

“Name” attribute

All form controllers must have a name, indicated with the name attribute. You will use this name in order to access its value in the right file. A controller without a name cannot be sent.

“Value” attribute

The value attribute collects the information the user has entered when they leave the form field. Is the value that will be sent when the form is submitted.

Buttons

The buttons make the form actions work.

There are three types of buttons:

• The one that sends the data to the file indicated as Action.
• The one that erases the inputs and resets the fields.
• The one that does nothing and is meant to be used with Javascript.

The button must be inside the <form> in order to function.
All buttons are <input> tags with different “Type”:

• “submit” input sends the form.
• “reset” input resets the form.
• “button” input, by default, has no actions.

<form>
    <input type="submit" value="Send Form"/>
    <input type="reset" value="Clear Form"/>
    <input type="button" value="No action"/>
</form>

Note: If you have a <button> inside your form, that button will submit the form when you click it. The default value for the type attribute of a <button> elements is "submit". Set it to type="button" to produce a button that doesn't submit the form.

Controls

In this case, the user is not allowed to enter text freely. There are prefixed options to choose from. There are three types of controls:

• Radio buttons: from a list of options, the user can only choose one.
• Checkbox: from a list of options, the user can check one, all or none.
• Dropdown menu: from a list of options, only one option can be picked.

Radio Button

Defines an element in a list of multiple options where only one option can be chosen as an answer. We need to add the type “radio” inside the <input> tag. All options in the group must have the same name. We can add a descriptive text for each option inside the label tag. To relate the text to its own radio button, we need to put a unique name inside the for attribute in the label. The same unique name we must repeat inside the input radio's id.

<form>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
</form>

Email Phone Mail

Checkbox

This is a boolean type of controller that can be activated or not. It is also an <input> with the “checkbox” type. In this case you need a different name for each option.

<form>
  <input type="checkbox" id="scales" name="scales" checked>
  <label for="scales">Scales</label>

  <input type="checkbox" id="horns" name="horns">
  <label for="horns">Horns</label>
</form>

Scales Horns

Label Tag

As seen in radio buttons, the <label> tag formally defines each element of a form. This tag is very helpful to generate an accessible form. The main attribute of the label tag is "for" which references the "label" with its element in the form. The "for" attribute value must be the same to the attribute of the id or the name element.

<form >
    <label for="name_surname">Name and Surname:</label>	
    <input type="text" name="name_surname" />
</form>

Name and Surname:

Dropdown Menu

Inside the <select> tag, you need to list all the possible options inside the <option> tag. But only one can be selected. <select> has the “name” attribute (<option> doesn't) <option> has the “value” (<select> doesn't)

<form>
  <select name="sizes">
    <option value="L">Large</option>
    <option value="M">Medium</option>
    <option value="S">Small</option>
  </select>
</form>

Large Medium Small

Fieldset and Legend tags

The purpose of the <fieldset> tag is to create groups of elements within the form that have the same purpose. The <legend> tag defines the purpose of that group. It is structured like this:

<form>
  <fieldset>
    <legend>Shirt Sizes</legend>
      <!-- The form elements go here -->
  </fieldset>
</form>

Shirt Sizes

your form shows here

Other types of inputs and attributes

<form>
	<input type="email" required />
	<input type="password" required />
	<input type="submit" />
</form>

If we try to complete the fields, we will see that when writing in the password type, instead of text we will see points. The input with type="submit" will be a button and not a text field. If we try to press the submit button without having written the correct syntax for an email address (such as not writing the at symbol), we will see that the browser indicates an error on the field with the type=" email" field.

We have already seen examples of mandatory and optional attributes, within the optional ones there are what we call a Boolean attribute type. In this example we use required, it is written differently from the others because its values ​​can only be true or false. Its presence indicates that this condition must be met, in this case the email must be required. Let's try to submit the form without having completed the fields that we indicated as required and we will see that the browser indicates an error about them.

Another example used is the disabled attribute:

<form>
	<input type="text" placeholder="Josefina" disabled />
	<input type="text" placeholder="Perez" />
</form>

The disabled attribute will make our input neither editable nor clickable. In this last example we also use the placeholder attribute, a temporary text that disappears when the user clicks on the input. It can be useful to explain as examples of the type of information that the user must complete. Never use it as a label.

Complete structure of a Form

<form action="" method="post">
	<fieldset>
		<legend>Title</legend>
		<input type="radio" name="radio" id="radio" />
		<label for="radio">Click here</label>
	</fieldset>
</form>

Title

Click here

Good to read!

Recommended article (opens new window) How to build accessible forms.

Exercise:

Create a blog with a form inside.