Forms

Forms are valuable for taking user input. When you see a login form or registration form on a webpage, it's created using the <form> element.

The <br> tag means a new line.

The <label> tag defines a label for many form elements. The <label> element is useful for screen-reader users because the screen-reader will read out loud the label when the user focuses on the input element.

The<input> creates interactive controls for web-based forms. This element is powerful because of its attributes. Here are some of them:

• type attribute: type of form control;
• name attribute: name of the form control. Submitted with the form as part of a name/value pair;
• placeholder attribute: text that appears in the form control when it has no value set.

Also, you can see the browser displays different types of input boxes depending on the type we have selected.

Importance of action attribute

You can see an action attribute next to the <form> element. We are creating a form to take inputs from the user. Once we have taken inputs from the user, we must process them.

For example, take a login form. Once the user enters a username and password, we must check whether those details match an existing user. The action attribute is used to specify which file to be executed once the form is submitted. We usually do it in the backend using programming languages like PHP.

Submit button

Note that the submit button we created in this form is also an <input> element with the type submit. This submit button is essential as the completed form is submitted to the action URL after clicking the submit button.

Input types

Several types can be used with the <input> element:

<input type="button"/"checkbox"/"color"/"date"/"email"/etc.>