Forms are one of the most important parts of the web. Without them, there wouldn’t be an easy
way to collect data, search for resources, or sign up to receive valuable information.
You can embed forms on websites with the HTML form element. Inside the form element,
several inputs are nested. These inputs are also known as form controls.
In this tutorial, we will explore the HTML form element, the various input types it takes, and
how to create a submit button with which data is submitted.
By the end, you will know how forms work and you’ll be able to make them with confidence.
Basic HTML Form Syntax
HTML Form Input Types
You use the tag to create various form controls in HTML. It is an inline element and
takes attributes such as type, name, minlength, maxlength, placeholder, and so on. Each of
these has specific values they take.
The placeholder attribute is important as it helps the user understand the purpose of the input
field before they type anything in.
There are 20 different input types, and we will look at them one by one.
Type Text
This type of input takes a value of “text”, so it creates a single line of text input.
Type Password
As the name implies, an input with a type of password creates a password. It is automatically
invisible to the user, unless it is manipulated by JavaScript.
Type Email
Any input with the type of email defines a field for entering an email address.
Type Number
This type of input lets the user insert numbers only.
Type Radio
Sometimes, users will need to pick one out of numerous options. An input field with its type
attributes set to “radio” lets you do this.
Type Checkbox
So, with an input type of radio, users will be allowed to pick one out of numerous options. What
if you want them to pick as many options as possible? That’s what an input with a type attribute
set to checkbox does.
Type Submit
You use this type to add a submit button to forms. When a user clicks it, it automatically submits
the form. It takes a value attribute, which defines the text that appears inside the button.
Type Button
An input with a type set to button creates a button, which can be manipulated by JavaScript’s
onClick event listener type. It creates a button just like an input type of submit, but with the
exception that the value is empty by default, so it has to be specified.
Type File
This defines a field for file submission. When a user clicks it, they are prompted to insert the
desired file type, which might be an image, PDF, document file, and so on.
Type Color
This is a fancy input type introduced by HTML5. With it, the user can submit their favourite
color for example. Black (#000000) is the default value, but can be overridden by setting the
value to a desired color.
Many developers have used it as a trick to get to select different color shades available in RGB,
HSL and alphanumeric formats.
Type Search
Input with the type of search defines a text field just like an input type of text. But this time it has
the sole purpose of searching for info. It is different from type text in that, a cancel button
appears once the user starts typing.
Type URL
When the type attribute of an input tag is set to URL, it displays a field where users can enter a
URL.
Type Tel
An input type of tel lets you collect telephone numbers from users.
Type Date
You might have registered on a website where you requested the date of a certain event. The site
probably used an input with the type value set to date to achieve this.
Type Datetime-local
This works like the input type date, but it also lets the user pick a date with a particular time.
Type Week
The input type of week lets a user select a specific week.
Type Month
The input with the type of month populates months for the user to pick from when clicked.
Textarea
There are times when a user will need to fill in multiple lines of text which wouldn’t be suitable
in an input type of text (as it specifies a one-line text field).
textarea lets the user do this as it defines multiple lines of text input. It takes its own attributes
such as cols – for the number of columns, and rows for the number of rows.
Multiple Select Box
This is like a radio button and checkbox in one package. It is embedded in the page with two
elements – a select element and an option, which is always nested inside select.
By default, the user can only pick one of the options. But with multiple attributes, you can let the
user select more than one of the options.
Select a Language HTML CSS JavaScript React
How to Label HTML Inputs
Assigning labels to form controls is important. When they’re properly connected to the input
field through them for attribute and the input’s id attribute, it’s easier for the user to use as they
can just click the label itself to access the input.
How HTML Forms Work
When a user fills in a form and submits it with the submit button, the data in the form controls
are sent to the server through GET or POST HTTP request methods.
So how is the server indicated? The form element takes an action attribute, which must have its
value specified to the URL of the server. It also takes a method attribute, where the HTTP
method it uses to convey the values to the server is specified.
This method could be GET or POST. With the GET method, the values entered by the user are
visible in the URL when the data is submitted. But with POST, the values are sent in HTTP
headers, so those values are not visible in the URL.
If a method attribute is not used in the form, it is automatically assumed that the user wants to
use the GET method, because it’s the default.
So when should you use the GET or POST method? Use the GET method for submitting non-
sensitive data or retrieving data from a server (for example, during searches). Use the POST
request when submitting files or sensitive data.