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.

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.

Front or Back-End Development? Learn It All!

Caltech Coding BootcampExplore Program
Front or Back-End Development? Learn It All!

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.

Get All Your Questions Answered Here!

Caltech PGP Full Stack DevelopmentExplore Program
Get All Your Questions Answered Here!

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

If you're eager to gain the skills required to work in a challenging, rewarding, and dynamic IT role - we've got your back! Discover the endless opportunities through this innovative Post Graduate Program in Full Stack Web Development course designed by our partners at Caltech CTME. Enroll today!

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.