HTML Form :
A portion of a page known as an HTML form contains controls including text fields, password fields, checkboxes, radio buttons, a submit button, menus, etc.
An HTML form makes it easier for the user to input data like name, email address, password, phone number, etc. that may be transferred to the server for processing.
Why use HTML Form?
If we want to collect data from users we use HTML form.
For example, If we want to buy anything from an E-commerce website, we need to put our address, and credit or debit card details to purchase our product. Then we need to use HTML Form to collect this data from the user.
Now, How easy is it to use HTML Form ? and Step by step we will complete our registration form also.
HTML Inputs :
Text: to add text as input.
syntax: type="text"
here we can see, <label> adds special meaning to a text rather than writing a standard text. <label for="name"> for attribute is used in the backend to store input. one thing is essential, attributes for and id must be to same in order to keep data correct.
with the help of the <input> tag, we can take input from the user.
Date: to add a date as an input.
syntax: type=" date"
Checkbox: Add a checkbox commonly used in the terms and conditions section.
syntax: type="checkbox"
Email: to add email as input.A field for editing an email address
syntax: type="email"
Password: to add a password as an input. A single-line text field whose value is obscured.
syntax: type="password"
Radio Button: radio button, allows a single value to be selected out of multiple choices.
syntax: type="radio"
Submit : A button that submits the form.
If you see for and id attributes are the same to store data for server site logic except for the radio button where the name attribute is the same for every input as we need only one input from a user. Hence we conclude our registration form.
These 7 inputs are most commonly used in HTML Form by developers.
HTML Form is an important topic while learning HTML. I hope you understand it well & this is what I have learned in meantime. If you have any doubts or suggestions feel free to comment out, this will improve our understanding as a reader and a developer.
Thank you & Happy Learning!