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.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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:

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.