HTML Forms

Forms provide the backbone to any website with communication between client and server. We use forms everyday on the websites we interact with, comments are submitted through forms, Facebook posts, Twitter Tweets , every time you upload a picture, you're posting data through a form. Forms provide a variety of functionality to collect various types of data.

To make our forms functional we need a backend or server-side language like PHP or Python. These server-side languages along with the databases helps us to receive, process and store the information.

The form tag

To start adding a form to our HTML page we start by adding the <form></form> tag. Form is a paired tag and any information we want to collect using this form will be added inside the opening <form> and closing </form> form tags.

<form action="thanks.html" method="post">

</form>

Form Attributes The two most important attributes we add to the form tag are action and method

action attribute is used to add the URL or file path where the form will be sending it's information.
method attribute defines how the information is sent. There are two values used for this attribute. get and post
- get is used when the information being sent is not sensitive and can benefit to be added to the URL when sending over to the action page. Example: Product search on Amazon or search form on Google
- post is used when the information needs to be hidden from the user when sent to the action page. Example login credentials.

Inputs and Labels

Inside the <form></form> tag we use different input types to allow user to input the data. Each input is linked to a label to tell the user what information they need to add to the input field.

Each input must have a label attached to it for accessibility.
We add an id attribute to the input which matches with the for attribute of label, to connect an input with the label
It is important to use unique value for the id attribute of each input in one form.

<form action="thanks.html" method="post">
  <label for="fullname">Name</label>
  <input id="fullname">
</form>

Input Types with type attribute

There are different types of inputs used in HTML forms. These inputs allow the browser to style the inputs accordingly and in some cases validate the data of the input.

Using the specific input type also helps with improving the user experience on mobile devices by changing the keyboard based on the input type.

We define the type of an input by using the type attribute in the <input> tag. If not type attribute is set then by default the input type is set to text. Which is a single line of text.

<form action="thanks.html" method="post">
  <label for="fullname">Name</label>
  <input id="fullname" type="text">
</form>

text - for generic single line text.
number - for accepting number, browser will validate the data to be number
email - for email address, this will be validated to contain the @ symbol in the email
url - for accepting a URL, the browser will validate the URL to start with http:// or https://
password - for allowing user to type in passwords, the input filed will hide the entered data with dots
tel - for telephone numbers
time - for accepting time in hours, minutes, seconds
date - for accepting date, browsers will display a calendar picker
range - for selecting from a range of numbers, this will need the min and max attributes
color - for picking color, shows a colour picker tool
file - for allowing file uploads

Name of the input

Just like the type it is important to add the name attribute to an input field. the name attribute is defined to give a name to the data that is being submitted. The value of name attribute is then used by the receiving page to understand the content.

It is important to use unique value for the name attribute of each input in one form.

<form action="thanks.html" method="post">
  <label for="fullname">Name</label>
  <input id="fullname" type="text" name="fullname">
</form>

Other attributes

We can use some additional attributes in our input fields for different purposes

Placeholder

The placeholder attribute is used to display placeholder text inside an input field.

<form action="thanks.html" method="post">
  <label for="fullname">Name</label>
  <input id="fullname" type="text" name="fullname" placeholder="John Doe">
</form>

Value

The value attribute is used to pre-fill the value of an input field. This is useful when we are getting the previously saved information by the used from the database and then displaying it to the user for editing in a form.

<form action="thanks.html" method="post">
  <label for="fullname">Name</label>
  <input id="fullname" type="text" name="fullname" placeholder="John Doe" value="Mr. ">
</form>

Required

Required field is used for making an input field required.

Required is a boolean attribute, which means we do not need to give it a value. It is either set or unset.

If the required attribute is added to an input field the browser will not allow the form to submit if that field is empty.

<form action="thanks.html" method="post">
  <label for="fullname">Name</label>
  <input id="fullname" type="text" name="fullname" placeholder="John Doe" required>
</form>

Min, Max and Step

min and max attributes are used to specify the minimum number required and maximum number allowed in the numeric fields.

<form action="thanks.html" method="post">
  <label for="quantity">Quantity</label>
  <input id="quantity" type="number" name="quantity" min="2" max="10">
</form>

step attribute is used to define the step in which the number should increment. Mainly used with the number and range fields.

<form action="thanks.html" method="post">
  <label for="quantity">Quantity</label>
  <input id="quantity" type="number" name="quantity" min="2" max="10" step="2">
</form>

Textarea

A larger area for multi-line text input, these are very common with varied content updates. Posts, tweets, ect.

Textarea is a paired tag
We add a label to textarea the same way as an input
We require the name attribute for the data processing on submission

<form action="thanks.html" method="post">
  <label for="message">Your Message</label>
  <textarea id="message"></textarea>
</form>

Select

A group of elements organized in a drop down container. Built in accessibility controls to expand and select options a select menu is the best way to organize a large list of selections like countries, states or provinces.

Select is a paired tag
Each dropdown option is added in its own <option></option> tag
Each option must have the value attribute which will be sent as the data when the option is selected
We add a label to select for accessibility
We require the name attribute for the data processing on submission

<form action="thanks.html" method="post">
  <label for="rock">Choose your Rock</label>
  <select id="rock" name="rock">
    <option value="mars">Mars</option>
    <option value="earth">Earth</option>
    <option value="venus">Venus</option>
  </select>
</form>

selected attribute

We can add the selected attribute to any option that we want to be pre-selected when the form loads.

Checkboxes

A small multi-selection grouping. More than one selection can apply.

Checkbox is a type of input element
Each checkbox input field must have its own label
Each checkbox must have its own name attribute vale

<h3>What music you like?</h3>
<form action="thanks.html" method="post">
  <label for="pop">Pop</label>
  <input type="checkbox" id="pop" name="pop">
  
  <label for="classic">Classic</label>
  <input type="checkbox" id="classic" name="classic">

  <label for="prog">Progressive</label>
  <input type="checkbox" id="prog" name="prog" checked>
</form>

What music you like?

checked attribute

We can add the checked attribute to any checkbox type input that we want to be pre-checked when the form loads.

Radio Buttons

A single choice in a grouping of elements. Commonly used for toggles, only one radio option can be selected for each grouping.

Radiobutton is a type of input element
Each radio input field must have its own label
All radio input fields must have the same name attribute value
Each radio input must have a unique value attribute, which will be sent as form submission

<h3>How many hours you listen to music?</h3>
<form action="thanks.html" method="post">
  <label for="little">0-1</label>
  <input type="radio" id="little" name="musictime" value="0-1">
  <label for="some">2-3</label>
  <input type="radio" id="some" name="musictime" value="2-3" checked>
  <label for="alot">4-5</label>
  <input type="radio" id="alot" name="musictime" value="4-5">
</form>

How many hours you listen to music?

checked attribute

We can add the checked attribute to any radio type input that we want to be pre-checked when the form loads.

Button

Buttons are used to allow the users to submit the form. The type attribute is added to the button to define its action.

<form action="thanks.html" method="post">
  <label for="fullname">Full Name</label>
  <input type="text" id="fullname" name="fullname" required>
  <button type="submit">Send</button>
</form>

Examples:

Form submission - Bonus

For having the form functional and submitting the information we need a server to receive and process the information.

We are creating a static website with HTML and CSS and do not have backend or server-side technology such as PHP to make our form functional we can use a third party service, mainly for sending emails.

The process these services use is as follows:

You create a form, that points to their service. Using the action attribute
The user submits the form.
The data is sent to the service’s website.
The service composes an email and sends it to you.
The service redirects the user back to your website to display a message.
The services work really well for simple information collection, but aren’t great for complex registration forms, etc.

# HTML Forms

# The form tag

# Inputs and Labels

# Input Types with type attribute

# Name of the input

# Other attributes

# Placeholder

# Value

# Required

# Min, Max and Step

# Textarea

# Select

# Checkboxes