HTML form Element
HTML <form> element is used to create a container for user input, such as text boxes, radio buttons, checkboxes, and buttons. It allows users to enter and submit data to a web server for processing.
Aa a web developer, you need to create forms in various situations. For example, you are working for a company that sells online (Like Amazon, Flipkart), so when someone wants to buy something from your company, he has to first enter his shipping address in the address form in order to place the order. Similarly, there are various situations where a web developer must have to create a form.
Along with <form> element we have to use various other elements to create a form in HTML. But here we will discuss some main elements which will help us to create a basic form in HTML.
<input>:- This element is used to create different types of form fields, such as text boxes, radio buttons, checkboxes, and more.<label>:- This element is used to provide a label or description for each form field.<button>:- This element is used to create a button that can submit the form or perform other actions.<select>:- This element is used to define the drop down list.
Along with these elements, we have to use the Radio button, which helps us to to select any one option from a list of options. Radio buttons are typically used in situations where the user is required to select a single option. For example when we want to know the user’s gender.
Another type of form element checkbox is widely used whenever we create any form. It allows users to select zero, one or many options from a list of options. Learn more about checkbox in our HTML checkbox Tutorial.
In an Example below let’s write a code and create a simple HTML form.
Example
<html> <head> </head> <body> <form> <label> FirstName: </label> </br> <input type="text" Name="FirstName"> </br> <label> LastName: </label> </br> <input type="text" Name="LastName"></br> <label> Email: </label> </br> <input type="text" Name="Email"> </br> <label> Contact No. </label> </br> <input type="number" Name="Email"> </br> <label> Select Your Gender:</label> </br> <label> <input type="radio" name="gender" value="male"> Male </label> </br> <label> <input type="radio" name="gender" value="female"> Female </label> <label> </br> <input type="radio" name="gender" value="other"> Other </br> </label> <label> Your Skills:</label> </br> <label> <input type="checkbox" name="skills" value="HTML"> HTML </label> </br> <label> <input type="checkbox" name="skills" value="CSS"> CSS </label> <label> </br> <input type="checkbox" name="skills" value="JavaScript"> JavaScript </br> </label> <label> Create a Password: </label> </br> <input type="password" Name="Create a Password"> </br> <label> Confirm Password: </label> </br> <input type="password" Name="Confirm Password"> </br> <input type="submit" value="Submit"> </form> </body> </html>
