Last Updated on September 25, 2023 by Mayank Dham
HTML forms are one of the best ways to collect information from the user so that the developer can perform the remaining operations appropriately. In some cases, the code is added based on the expected response of the user. As we progress through this article, we will learn more about HTML forms.
What are HTML Forms?
The HTML forms are one of the essential components of the web that enables the user to submit the information accordingly on the website. The HTML form does not contain any interactive controls. In simple words, we can refer to the HTML forms as an easy way of collecting user information and then sending the collected information to the server.
The HTML forms consist of a set of form elements that allow the user to enter the data, make selections, and then submit it to the server for processing. HTML forms consist of one or more labels, input fields, and buttons.
The HTML form code is:
< form action="server url" method="get|post">
//input controls
< /form>
The form action will decide that after submitting the form where the user will redirect. Whereas the method will describe the type of method used to send the data in the get method the value submitted by the user will be visible in the url whereas it is not the case with post.
Importance of HTML Forms
The importance of HTML forms is explained below:
- They are used to gather information from the user like his contact details, survey responses, feedback, user registrations, and more.
- It is also used for validation which makes sure the data submitted is correct and accurate.
- They also enhance the user experience as when the user submits his review of the website the developer can change the website according to the reviews.
- They also provide security as when we use these forms in login or signup forms then only the valid candidate can access our website.
- We can also have some additional features in the form like file upload, etc, which will make the user upload the details.
Elements and Attributes of HTML Form
We will discuss the various elements and attributes of HTML Form.
- < label>: It is used to define the form elements.
- < input>: It is used to get input from the user in various formats.
- < button>: It will create a clickable button that will control other elements or its own functionality.
- < select>: This is used to create a dropdown list.
- < textarea>: It is used to get the input of long text content.
Label
The label is used to tell the name of the corresponding input tag. We can also connect the label and a particular input tag.
Textbox in HTML Form
We can create a textbox in the form by assigning the value of the input tag to the text. This will take a single line of input.
The syntax for performing this will be like this:
< input type="text" />
Password in HTML Form
We can change the input type to password to get the input password. Now the text will not be directly visible it will be shown either by dots or stars.
< input type="password" />
This is preferred to use Email instead of text while taking input of an email id as by setting the type as email the browser will automatically set some rules and regulations and will check whether a correct email id has been entered or not.
< input type="email" />
Radio Button
We can create a radio button by using the input type to the radio. As the radio button provides a limited number of choices to the user.
< input type="radio" name="radio_button_name" value="radio_button_value" />
Drop Down List
We can create a drop-down list by using the select tag followed by various options that we want to enter in the drop-down list by using the option tag.
< select name="study" id="">
< option value="1">1st
< /select>
Submit
The submit is the button that resets the data to the form and sends the submitted data to the server and redirects the user to the corresponding referenced page or site.
Example of HTML Forms
Now we will discuss the HTML form example.
Code
< form action="index.html" method="get">
< label for="name">Name
< input name="name" id="name" placeholder="name" type="text" />
< br />
< br />
< label for="">Email
< input placeholder="email" type="email" />
< br />
< br />
< label for="">Year of Study
< select name="study" id="">
< option value="1">1st
< option value="2">2nd
< option value="3">3rd
< option value="4">4th
< /select>
< br />
< br />
< label for="radio-button">Graduate
< input type="radio" name="" id="radio-button" />
< br />
< br />
< label for="">Password
< input type="password" name="" id="" />
< br />
< br />
< input type="submit" name="" id="" />
< /form>
Output
Explanation
In the above code, we have used each and every attribute that we have explained above part of the blog, like text, email, drop down, radio button, password, submit, etc.
Conclusion
We studied HTML Forms and discussed what they are and their importance, as well as the syntax of HTML forms, attributes and elements of HTML forms, and various elements of HTML forms with their use and syntax. Finally, we used all of those elements in an example.
Frequently Asked Questions (FAQs)
Here are some of the frequently asked questions in HTML form.
Q1. What is an HTML form, and what is its purpose?
An HTML form is a container for collecting and submitting user input on a web page. It allows users to enter data, such as text, numbers, selections, and submit it to a server for processing. Forms are used for various purposes, including user registration, login, search, and data submission.
Q2. How do I create a basic HTML form?
To create a basic HTML form, you use the