A Complete Guide to HTML Form Tag

The HTML form tag is required when you want to collect information that visitors provide. For example, you may want to collect specific data from visitors, such as name, email address, and password.

The HTML <form> tag is used to create a form.

In this article, we will cover the following topics:

  • The <form> tag
  • The <input> element
  • The <label> element
  • Multiple-line text input control
  • An HTML form example

The <form> Tag

A form is essentially a container for inputs. 

The following code shows the basic structure of a form:

<form>

The input elements goes here

</form>

There are two attributes of the form tag that we should be familiar with:

  • The action attribute points to the back-end of our web page, which handles the form submission
  • The method attribute is used to upload the data. The most commonly used attributes are the GET and POST methods

form_attributes-html-forms

Note: The form won’t function until the back-end is created.

Full Stack Java Developer Course

The Gateway to Master Web DevelopmentExplore Course
Full Stack Java Developer Course

The <input> Element

The HTML <input> is a fundamental form element. It can be displayed in many ways, depending on its attributes.

There are several types of inputs. Some of the important ones include: 

Input Type Text

The <input type =“text”> defines a single-line text input field.

input-text

This is how the HTML code above will be displayed in the browser:

output-input-text.

Input Type Password

The <input type="password"> defines a password field.

/input-password.

This will produce the following result:

output-password

Input Type Submit

The <input type="submit"> defines a button for submitting form data to a server page.

input-type-submit

This will produce the following result.

/output-submit.

Input Type Radio

The <input type=”radio”> defines a radio button. The radio button is used when only a single option needs to be selected out of several offered options. 

radio-button-html-form

This will produce the following result:

output-radio-button.

Input Type Checkbox

The <input type="checkbox"> defines a checkbox. Checkboxes are used when one (or more than one) option is required to be selected.

input-checkbox-html-forms

This will produce the following result:

output-checkbox

The <label> Element

A label can be assigned with a <label> element. The label element makes the browser user-friendly and provides a focus when you click on a label tag.

label-element

Multiple-Line Text Input Control

This is used when the user has to enter details that may exceed a single sentence.

multi-line-text.

This will produce the following result:

output-multi-line.

HTML Form Example

Now it’s time to create a simple registration form. We will create a simple form that prompts a user to enter his or her name, email, password, gender, and address to complete the sign-up.

user-registration-form

This will produce the following result:

output-user-registration

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!

Next Steps

This article on HTML forms provided a glimpse into how HTML forms work and how to create them.  We covered several input types that are required to create an HTML form. If you’re looking for a more comprehensive educational program on web development, a certification can be the perfect way to get started on your new career path. Simplilearn’s Full Stack Java Developer will help you master web development and provide you with the tools you need to learn Java web developer technologies from the ground up. You will learn how to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.

If you have any questions or feedback, let us know in the comments section. Our experts will respond as quickly as possible.

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.