Back to: HTML Tutorials
Forms in HTML with Examples
In this article, I am going to discuss Forms in HTML with Examples. Please read our previous article where we discussed Tables in HTML with Examples. At the end of this article, you will learn everything about HTML Forms with Examples.
HTML Forms
HTML forms are used to collect user input. A form will collect input from site visitors and send it to a back-end application, then it will perform the necessary processing on the passed data. For better understanding, please have a look at the below example where we take the First Name and Last Name from the user and when we click on the submit button, we sent the user data to the backend server for processing. Here, we are not implementing the code for submit button, in our upcoming article, we will implement the submit button.
<!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form > <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" ><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
When you run the above code, you will get the following output.
The <form> Element in HTML
In Html a <form> element is used to specify a form. The form element is like a container i.e. it holds various input elements such as textbox, textarea, checkboxes, buttons, dropdown lists, etc. The HTML <form> element is basically used to create an HTML form for user input. Following is the syntax to use to use the HTML <form> element.
Note: We are going to discuss all the Form Elements in our HTML Form Elements article.
The HTML <input> Form Element
The most common form element is the HTML < input> element. Depending on the type attribute, an input element can be displayed in a number of ways. There are many input types such as text, radio, checkbox, submit, etc. Please have a look at the below image to have an idea of different HTML Input elements.
Note: All the different input types are covered in the HTML Input Types article.
Input Text Field Element in HTML
The <input type=”text”> specifies a single-line text input field. For better understanding please have a look at the below example. Here, we are creating the form with two input elements to take the First Name and Last Name from the user.
<!DOCTYPE html> <html> <body> <h2>Text input fields</h2> <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" ><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" ><br> </form> </body> </html>
When you run the above code, you will get the following output.
Note: The form will not be visible in the user interface. Also, note that the default width of an input field element is 20 characters.
The <label> Element in HTML
A label for a form’s input element is specified using the <label> tag. It assigns a label to a form control like text, email, password, textarea, and so on. When a user clicks on a text inside the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together. Please have a look at the below image to understand the label tag in a better manner.
The <label> element in HTML can also help users who have difficulty on clicking very small regions (such as radio buttons or checkboxes). In this case, when the user clicks the text within the <label> element, it toggles the radio button/checkbox for which it is specified.
Radio Buttons Input Element in HTML
In Html, a radio button is defined using <input type=”radio”> element. Radio buttons input element in HTML allows a user to select only one option from a number of available options. For better understanding, please have a look at the below example. Here, we created the radio button with three options i.e. Mango, Orange, and Apple, and the user is only able to select only one option at any given point of time.
<!DOCTYPE html> <html> <body> <h2>Radio Buttons</h2> <p>Choose your favorite fruit:</p> <form> <input type="radio" id="mango"> <label for="mango">Mango </label><br> <input type="radio" id="orange"> <label for="orange">Orange</label><br> <input type="radio" id="apple"> <label for="apple">Apple</label> </form> </body> </html>
When you run the above code, you will get the following output.
Checkboxes Input Element in HTML
In Html, a checkbox is defined using <input type=”checkbox”>. The checkbox input element in HTML allows a user to select zero, one, or more options from the available options. For better understanding, please have a look at the below example. Here, we created the checkboxes with three options i.e. Mango, Orange, and Apple, and the user can now select one or more options from the available options.
<!DOCTYPE html> <html> <body> <h2>Checkbox</h2> <p>Choose your favorite fruit:</p> <form> <input type="checkbox" id="mango"> <label for="mango">Mango </label><br> <input type="checkbox" id="orange"> <label for="orange">Orange</label><br> <input type="checkbox" id="apple"> <label for="apple">Apple</label> </form> </body> </html>
When you run the above code, you will get the following output in the browser. Now, you can select, zero, one, two, or all three options.
The Submit Button in HTML
In Html, a submit button is defined using <input type=”submit”> element. The submit button is basically used for submitting the form data to a form-handler for further processing. In our upcoming article, we will discuss how to create a handler for the submit button and how to process the input data. For a better understanding of the submit button please have a look at the below example.
<!DOCTYPE html> <html> <body> <h2>Submit Button</h2> <form> <label for="FirstName">First Name:</label><br> <input type="text" id="FirstName" name="FirstName"><br> <label for="LastName">Last Name:</label><br> <input type="text" id="LastName" name="LastName"> <br><br> <input type="submit" value="Submit"> </form> </body>
When you run the above code, you will get the following output in the browser.
Note: Each input field must have a name attribute to be submitted. If the name attribute is omitted, then the value of the input element will not be sent at all. This we will discuss in detail in our upcoming articles.
In the next article, I am going to discuss HTML Form Attributes with Examples. Here, in this article, I try to explain Forms in HTML with Examples and I hope you enjoy this HTML Forms with Examples article.
