HTML Form: All You Need to Know

Introduction

Forms are ways of providing information, and so is an HTML form, but rather on a web page, using a browser. As much as a normal paper form contains fields to fill in your details, and after that, you can submit to someone in charge, so HTML forms also provide HTML form inputs which serve as fields that allow you to fill in your data and submit to the server for some processing and back to the person-in-charge (the developer).

However, the above things are not new to a web developer, as millions of forms are being filled on websites daily. But whether you are new to the game or a professional, this tutorial tells all that you need to know about HTML Forms, including HTML form action, name attributes, HTML form methods, HTML form encoding types, and HTML form handling.

Let's dive into this in detail!

HTML Form Action

HTML Form actions point to where the form should be submitted. This is done with the action attribute. The value of the action attribute is typically a URL to an external or internal page.

Example

<form action="https://lyty.dev" method="GET"></form>

The Name Attributes

The name attribute helps to identify each element in an HTML form, by a given name. This name will be sent to the server for handling. Just by naming any other thing, this name will be attributed to the values provided by the user before submitting the form.

<form action="search.php">
     <input name="firstname" type="text" />
    <input name="lastname" type="text" />
    <input name="email" type="email" />
     <input type="submit" value="Submit" name="submit">
</form>

Let's assume the user provides these data:

Once the user submits the form, the browser sends a URL that looks like this: /search.php?firstname=olasheni&lastname=erisan&[email protected]&submit=Submit

You can see how the user's data is represented with the name attributes and the data input by the user.  The name attribute is therefore important in HTML form handling.

HTML Form Method

Form method tells the browser how to send the users' data, and in other ways tells the server how to process or handle the sent data. This is possible in HTML form by using the method attribute. This attribute can either be "GET" or "POST" depending on the purpose of the form.

The GET Method

The GET method is the default way by which the browser processes a form data. This is done by adding method="GET" to  the <form> element or by not adding a method attribute. It tells the browser to include all the form data in the URL after submitting. Each piece of data appears by sending the URL in the action attribute, followed by ? followed by key=value pair. This method should be used to process less-sensitive data, such as name search or getting content per user (/?username=Bob), and should not be used to process sensitive information such as passwords. We will discuss a method suitable for processing sensitive data in the next section. Let's see an example.

Example: GET Method

<form method="GET" action="search.php">
    <input type="search" name="mysearch" />
    <input type="submit" value="Search" name="submit" />
</form>

See live example

When this form is submitted, the target URL will result in something like /search.php?mysearch=hello&submit=Search. You can see that all users' information is displayed on the URL in the format of key=value and joined with &. This example stands as a good reason for you to know why it is bad and not advisable to include sensitive information on a GET form. Let's look into a bad way of using the GET method.

Wrong Use of GET Method

Take a look at the example above, so for example, assuming the user enters the username ola and password and clicks on login, this will result in a URL: /search.php?mysearch=hello&submit=Search, revealing sensitive information on the browser's URL, this can be used by hackers to get vital information, and get access to personal accounts.

The POST Method

The POST method tells the browser to send user information securely. This is done by adding method="POST" to the <form> element. Each data is appended inside the HTTP request body, which in this way, data is not shown in the URL. This method can be used to process sensitive data, such as user passwords, bank card details, and more. Please note that adding method="POST" to a form does not guarantee maximum security However, it serves as this base security layer for processing.

Example

<form method="POST" action="login.php"> 
    <input name="username" type="text" /> 
    <input name="password" type="password" /> 
    <input type="submit" value="Login" name="submit">
</form>

See live example

Information is thereby sent via the HTTP Request, in a format that looks like this:

POST /login.php HTTP/1.1

Host: example.com

Content-Type: application/x-www-form-urlencoded

Content-Length: 27

username=ola&password=mypassword&

Form Enctype (Encoding Types)

Enctype stands for encoding type. According to w3.org, it specifies the content type used to submit the form to the server. This is determined in HTML form by the enctype attribute. The attribute can have one of the three values:

1. application/x-www-form-urlencoded - Represents URL encoded form. This is the default value of the enctype attribute.
2. multipart/form-data - Represents a Multipart or binary form. This is the type of encoding needed if you want your users to upload files. NOTE: This encoding type should be used along with method="POST"
3. text/plain - Introduced in HTML5, it sends the data in plain text, without any encoding.

Example: Uploading a Form Using a Multipart Form

<form method="POST" enctype="multipart/form-data">   
    <input type="file" name="file" />   
    <input type="submit" name="upload" value="Upload">   
</form>

Interesting right? So let's move to a more interesting part, how forms are processed in the server.

HTML Forms Server Processing

Whether a form is been sent with the GET or POST method, the server receives a string that is parsed in the format of key=value pairs. The way you access strings depends on the server programming language you choose to use. There are tons of programming languages for a web server, popular examples are PHP, Python/Django, ASP.NET, NodeJS. For simplicity and tutorial sake, we will be showing how the form is processed using PHP. PHP offers $_GET and $_POST global arrays that can be used to access forms submitted using the GET and POST methods.

PHP - Processing the GET Method

Processing a submitted form using the PHP $_GET global array. This assumes that the form is submitted with method="GET" and assumes action="search.php". The developer can either used it to fetch some information from the database, save it, or sends it as an email. The below code will then be placed on search.php  file to display the user's inputs.

<?php  
    // Code to be placed on search.php file  
    
    $search_string = htmlspecialchars($_GET['search']);  
    $gender = htmlspecialchars($_GET['gender']);  
    echo 'Hello!<br/>';  
    echo 'Your search is :', $search_string, '<br/>';  
    echo 'and it is ', strlen($search_string), ' characters.';  
?>

Example Explained

• $_POST - For storing user data coming from a POST method form
• htmlspecialchars() - A kind of security function to escape special characters from user inputs.

PHP - Processing POST Method

Processing a submitted form in PHP using the PHP $_POST global array. This assumes that the user has already submitted the form, (E.g to action="site.php"). The developer can either use it to fetch some information from the database, save it or send it as an email. The below code will then be placed on site.php to display the user's inputs.

<?php  
// Code to be placed on site.php file  

$email = htmlspecialchars($_POST['email']);  
$gender = htmlspecialchars($_POST['gender']);  
echo 'Hello!<br/>';  
echo 'Your email is :', $email, '<br/>';  
echo 'Your gender is: ', $gender;  
?>

Example Explained

• $_POST - For storing user data coming from a POST method form
• htmlspecialchars() - A kind of security function to escape special characters from user inputs.

More Reads

Here are more tutorials to read to sharpen your knowledge.

HTML Forms Introduction

HTML Form Rules

HTML Form Inputs

More HTML Forms Examples

HTML Form Method GET Example

HTML Form Textarea

You can play around with more HTML-related examples here.

Did you learn new things about HTML forms today? Do you have any improvements or suggestions, let me hear you in the comment section below.