A Complete Guide to HTML Form Tag

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

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

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.

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

Input Type Password

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

This will produce the following result:

Input Type Submit

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

This will produce the following result.

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. 

This will produce the following result:

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.

This will produce the following result:

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.

Multiple-Line Text Input Control

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

This will produce the following result:

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.

This will produce the following result:

With the Full Stack Java Developer Masters Program, you'll gain hands-on experience in Java, front-end, back-end technologies, and more. Enroll now to start building real-world projects and earn a certificate that will make you stand out in the competitive tech industry.

Next Steps

This article on HTML forms showed 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.