HTML Forms: A Comprehensive Guide with 13 Demos

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,, 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

Example of image as submit

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.

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.

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.

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.

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.

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:

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:

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.

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.

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.

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.

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.

As you can see in the example, the hidden field is not visible. You can process that information in your scripting language like PHP, 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.

Also see HTML table | HTML div

Was this article helpful?

Related Articles

Leave A Comment?