Quick Reach
- 1 The Forms of HTML
- 2 A few examples of HTML form
- 3 The form tag
- 4 The Form action attribute
- 5 The input types
- 6 Input type = text
- 7 Input type = button
- 8 Input type = submit with example
- 9 Input type checkbox with example
- 10 Input type radio with example
- 11 How to create a textarea?
- 12 Creating hidden input fields demo
- 13 Input type image
- 14 Related
The Forms of HTML
The Forms in web pages are used to get input from the users and sending data to the server. The input can be of many types depending on the requirement of the project.
You most probably have used online forms like the login form on various websites, to let you input user id, email and password. Similarly, a contact form to contact to a business or for some other purpose. All these are HTML forms.
The Forms provide different input types to be used to allow users entering the required information. For example, you can use text boxes, checkboxes, textarea, radio buttons, input type file to let upload images, pdfs, or other files, submit buttons in the forms.
The data entered in the form is sent to the server where you can use different scripting languages like PHP, asp.net, ruby on rails or other to process that information. You can save that information in a database, use that information to send email etc.
This tutorial explains how to use the forms by using the form HTML tag along with form action, the method by which you can send data (get or post) and various input types with examples.
A few examples of HTML form
Example of a form with input type text
Example of using input button at onclick
Example of HTML with input type file
Input type checkbox with example
A Short and quick Video summarizing using forms in HTML
The form tag
The form is started with the <form> tag of HTML. When you start a form, this is not visible by itself.
The form tag has a few attributes. For example, action sets the target page where information will be submitted. The form method specifies which method to use to send the information. You can specify form method as “get” or “post”.
A basic form example
The following example shows a basic HTML form example with two input text fields and a submit button. No CSS or any styling is used.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“submit”>
</form>
</body>
</html>
|
The Form action attribute
The HTML form action attribute specifies the target page where information will be submitted. Generally, this is a scripting page that processes information.
Example of using form action attribute
The following example shows how to use the form action attribute.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<body>
<form action=“saveinfo.php” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“submit” value=“Save Info”>
</form>
</body>
</html>
|
The input types
The form of HTML has different elements. The <input> element defines what kind of input data a user can enter. For example,
- input type = text specifies that a user can enter the text information (alphabets, numbers etc.).
- input type = checkbox specifies a user can select from the given checkbox options.
- input type = radio means a user can select one of a few given options.
- The textarea allows users to enter the multi-line text information in the form.
- Input type = submit is a button that will submit the form data to the form action page.
- Input type = password will give a text box to enter the password where entered characters are not visible in the textbox.
In the following part, you can see different input types with examples.
Input type = text
The input type = “text” specifies a textbox field in the HTML form. By default, the width of the textbox field is 20 characters. This is where you can ask visitors to enter the information like name, email, address etc in the forms.
Example of using input type=”text”
The example below shows a form with three text boxes: the Name, email, and address.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
Address:<input type=“text” name=“address”/><br />
<input type=“submit”>
</form>
</body>
</html>
|
Apply style to the input type text by CSS
You can apply CSS to the text fields in a form. In order to specify the CSS to the textbox, you can use a class created in the CSS or also may use the style attribute inside the <input type=text>.
The example below uses the same HTML form as in the above example. The first textbox is given the CSS style created in the <head> section. The other textbox uses CSS at the inline level by using the style attribute.
Both text boxes are given border with green and orange colors, the entered text is also different for both textboxes.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<style>
.txtbox{
font-size:17px;
color:red;
border: 2px solid green;
}
</style>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name” class=“txtbox”> <br />
Email:<input type=“text” name=“email” style=“font-size:12px;color:yellow;border:2px solid orange”> <br />
Address:<input type=“text” name=“address”/><br />
<input type=“submit”>
</form>
</body>
</html>
|
Input type = button
The input type=”button” adds a clickable button in the forms. You can use buttons for different purposes like “Next” “Previous”, “Random” etc. Generally, the Javascript is attached to a button to perform some action like Move to next page, loading some data, saving data by using AJAX etc.
Example of using input button at onclick event
The example below shows creating an input button “Show message”. As you click on this button, the click event will trigger show JavaScript function that will display an alert.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<script>
function show()
{
alert(“Button is clicked!”);
}
</script>
</head>
<body>
<form action=“” method=“post”>
<input type=“button” value=“Show Message” onclick=“show()”>
</form>
</body>
</html>
|
Input type = submit with example
The input type=”submit” is a button type that submits the form information to the server. The following example shows how to use it:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“submit”>
</form>
</body>
</html>
|
As you click on the “Save info” button it will post data to form action =””. This is generally a scripting language page that process submitted information and performs some action.
Input type submit with CSS
You may also apply CSS to the submit button in a form. See the example below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“submit” value=“Save Info”>
</form>
</body>
</html>
|
Input type file with example
To provide upload files facility by using the HTML forms, you can use input type=file. This adds a browse button in the form to let a user choose a file to be uploaded. The file can be of different formats like jpg, gif, pdf, png etc.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<form action=“processupload.php”>
Choose file: <input type=“file” name=“uploadfile” class=“submitstyle”>
<input type=“submit”>
</form>
</body>
</html>
|
You can see, an input file type is also styled with the CSS.
To learn how to upload a file by using the PHP we have written a tutorial for that in PHP section.
Input type checkbox with example
The checkbox is used where you want the users to select multiple options from a given set of values. The input type = “checkbox” is used to create a checkbox.
The following example shows how to create checkboxes in a form.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<form action=“” method=“post”>
Your expertise: <br />
<input type=“checkbox” name=“expertise” value=“HTML”> HTML <br>
<input type=“checkbox” name=“expertise” value=“PHP”> PHP <br>
<input type=“checkbox” name=“expertise” value=“MySQL”> MySQL<br>
<input type=“checkbox” name=“expertise” value=“Java”> Java<br>
<input type=“submit” value=“Submit my Expertise” class=“submitstyle”>
</form>
</body>
</html>
|
Input type radio with example
The radio button is used where you want the users to select one option from a given set of values. To create a radio button use the: input type = “radio”.
The example below shows how to create radio buttons.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<form action=“” method=“post”>
Your Marital Status: <br />
<input type=“radio” name=“Marstatus” value=“Single”> Single <br>
<input type=“radio” name=“Marstatus” value=“Married”> Married <br>
<input type=“radio” name=“Marstatus” value=“Widow”> Widow <br>
<input type=“submit” value=“Submit Marital Status” class=“submitstyle”>
</form>
</body>
</html>
|
How to create a textarea?
The input type textarea shows multi-line textbox. For example, allowing a user to write a message in the contact us form. See the following example of creating the textarea element.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
Address:<input type=“text” name=“address”/><br />
Message: <br /><textarea name=“message” rows=“15” cols=“40”></textarea><br />
<input type=“submit”>
</form>
</body>
</html>
|
Creating hidden input fields demo
The input type hidden is used when you do not want to show the information to your visitors and want to send some information to the script that is handling submitted form’s data. For example, in the checkout process, certain fields might be kept hidden like total price or shopping items.
The example below shows how you can use the hidden field in the HTML form.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
<input type=“hidden” name=“totalprice” value=“$20”>
<input type=“submit”>
</form>
</body>
</html>
|
As you can see in the example, the hidden field is not visible. You can process that information in your scripting language like PHP, ASP.net etc.
Input type image
The input type image allows to use an image and act as submit button in a form. See example below to have an idea how to use an image as input to use it in place of submit button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“image” src=“submitimg.jpg”>
</form>
</body>
</html>
|
Also see HTML table | HTML div
Leave A Comment?