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.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

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.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

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.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 15 Apr, 2024

6 Months$ 8,000
Full Stack Java Developer

Cohort Starts: 2 Apr, 2024

6 Months$ 1,449
Automation Test Engineer

Cohort Starts: 3 Apr, 2024

11 Months$ 1,499
Full Stack Developer - MERN Stack

Cohort Starts: 3 Apr, 2024

6 Months$ 1,449