HTML forms are used to take input data from users by providing interactive controls for submitting the information. With forms, we can input data through- text, numbers, values, email, passwords, and control fields such as checkboxes, radio buttons, submit buttons, etc.

Forms are generally used when you want to collect data from the user. For example, student details can be collected in which fields like name, phone-number details, etc. can be collected easily.

The <form> Element

To create an HTML Form for user input, we use the <form> tag.

The <form> Element is a kind of a container in which we have to add different types of input elements such as text fields, checkboxes, radio buttons, submit buttons, etc.

For example: <form> form elements</form>

The <input> Element

It is used to get input data from the form in various types such as text, password, email, etc by changing its type.

It's types are:-

• <input type="button">      
• <input type="checkbox">     
• <input type="color">      
• <input type="date">      
• <input type="email">      
• <input type="file">      
• <input type="image">      
• <input type="month">      
• <input type="number">      
• <input type="password">     
• <input type="radio">      
• <input type="range">      
• <input type="reset">      
• <input type="search">      
• <input type="submit">      
• <input type="tel">      
• <input type="text">      
• <input type="time">      
• <input type="week">      

Attributes

type

Type of form control

name

Name of the form control. Submitted with the form as part of a name/value pair

required

Boolean Attribute. A value is required or must be checked for the form to be submittable.

placeholder

Text that appears in the form control when it has no value set

disabled

Whether the form control is disabled

checked

Whether the command or control is checked

maxlength

Maximum length (number of characters) of value

minlength

Minimum length (number of characters) of value

Attributes for form submission ( <form> element )

Action

The action attribute specifies where to send the form-data when a form is submitted.

Possible submission values:

absolute URL - points to another website.

( action="http://www.codingblocks.com")

relative URL - points to a file within a website.

( action="products.html") - Product section

Method

The method attribute specifies how to send form-data (the form-data is sent to the page specified in the "action" attribute).

GET:

• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user wants to bookmark the result
• GET is better for non-secure data, like query strings in Google

POST:

• Appends form-data inside the body of the HTTP request (data is not shown in URL)
• Has no size limitations
• Form submissions with POST cannot be bookmarked

Important! When the form is submitted, the data entered by the user will be sent to the server in the body of the HTTP request, along with the name and value of each form control. The server can then process the data and do something with it, such as storing it in a database or sending it in an email.