Forms are essential components of any good website. A form makes it possible to collect user input. In this tutorial, we will learn how to create a form in HTML and we will also see how to process the form data.
The <form> element
The <form> element lets you create a form. Forms are used on a website to capture user inputs. In other words, forms are used to collect the values entered by the user on a web page.
A simple form
The following HTML code creates a form on a web page.
Code for designing the form:
<!doctype html>
<html>
<head>
<title>A Simple HTML Form</title>
</head>
<body>
<form>
<input type="text" name="username" placeholder="Enter your username."><br>
<input type="password" name="password" placeholder="Enter your password."><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Screenshot of the result:
Explanation of the code above:
See that there are three <input> elements inside the <form> element. These elements are known as ‘form elements’. These input elements create the input fields.
The ‘type’ attribute of the <input> element specifies the type of the input element. The attribute values “text”, “password”, and “submit” give a text field, a password field and a submit button respectively.
The ‘name’ attribute gives a name to the form element. The ‘placeholder’ attribute specifies a visible text that tells the user to enter a value, and the ‘value’ attribute specifies a value for the form element.
Form elements
The commonly used form elements are mentioned in this section.
The <input> element:
Based on the value of the ‘type’ attribute, we can get different types of input elements. For example, <input type=“radio”> gives a radio button. The input types are listed below.
Some Input types:
<input type=“text”>, <input type=“password”>, <input type=“submit”>, <input type=“radio”>, <input type=“reset”>, <input type=“checkbox”>, <input type=“button”>, <input type=“number”>, etc.
For a detailed list of form input elements, see: HTML form input examples
Other form elements:
<select>, <textarea>, <button>, <output>, <keygen>, etc.
A complete code sample
Examine the following code snippets to understand how we have designed a form and processed the form data.
<!doctype html>
<html>
<head>
<title>A Simple HTML Form</title>
</head>
<body>
<form action="display.php" method="post">
<input type="text" name="name" placeholder="Enter your name."><br>
<input type="text" name="email" placeholder="Enter your email address."><br>
<textarea name="hobbies" rows="8" cols="25" placeholder="Enter your hobbies"></textarea><br>
<input type="submit" value="Display">
</form>
</body>
</html>
Explanation of the code snippets above:
The <textarea> element creates a text field for entering a large amount of text. The ‘rows’ and ‘cols’ attributes specify the number of rows and columns in the <textarea> element.
The values entered by the user will be sent the script pointed to by the action attribute of the form.
If you do not use the ‘name’ attribute of a form element, the value of that particular form element will not be sent for processing.
The ‘action’ attribute: This attribute specifies the web page on the server that will process the form data. The values entered through the form will be posted to to this script when the ‘submit’ button is clicked.
The ‘method’ attribute: This attribute specifies the method that will be used for sending the form data. It can take one of these two values - “get” and “post”, for HTTP GET and HTTP POST methods respectively. The default value is “get”, which means that if you omit the ‘method’ attribute, the form data will be sent through the GET method.
Server side processing of the form
The HTML form is only one part of the form. Every form requires a server side script that receives the form data and does processing on the form data (for example, saving to database, sending email etc). There are different ways to create the server side script for the form. One is to use a scripting language like PHP (that is available on most of hosting services)
Here is a simple PHP script that just displays the form data:
<!doctype html>
<html>
<head>
<title>Show info</title>
</head>
<body>
Name: <?php echo $_POST["name"]; ?><br>
Email address: <?php echo $_POST["email"]; ?><br>
Hobbies: <?php echo $_POST["hobbies"]; ?>
</body>
</html>