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:

Design Smarter AI WorkflowsWith the AI Accelerator ProgramEnroll Now

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:

Learn 45+ in-demand full-stack development skills and tools, including Frontend Development, Backend Development, Version Control and Collaboration, Database Management, and AI-Assisted Development, with our AI-Powered Full Stack Developer Course.