HTML: HyperText Markup Language | Forms
{tocify} $title={Table of Contents}
In this article, we will learn about HTML Form in detail. HTML <form> is used to collect information from the user.
If you use the internet, you must have used the form at some point. Log-in Forms, Sign Up Forms, Survey Forms, and Payment Detail Forms are all examples of Forms.
If you have to make HTML Form, there are some rules that must be followed.
Example:
{contactForm}
<form> Element
The <form> tag is used to create the form structure. Its syntax is given below.
<form>Form Elements</form>{codeBox}
Here Opening the HTML Form tag and Closing HTML Form Tag have been used in syntax.
And in between, the elements of the form are defined.
Different input elements are used in Form Elements, such as text fields, check boxes, radio buttons, submit buttons, and many more.
The <input> Element
The HTML <input> element is a considerably used form element.
An <input> element can be shown in multiple ways, depending on the type attribute.
Here are few examples:
| Type | Description |
|---|---|
| <input type="text"> | Displays a single-line text input field |
| <input type="radio"> | Displays a radio button (for selecting one of many choices) |
| <input type="checkbox"> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type="submit"> | Displays a submit button (for submitting the form) |
| <input type="button"> | Displays a clickable button |
Text Fields
The <input type="text"> specifies a single-line input field for text input.
Example -
A form with input fields for text:
<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"></form>{codeBox}
Output:
This is how the HTML code above will be shown in a browser:
<label> Element – HTML Form
See the use of the <label> element in the example above.
The <label> tag represents a label for many form elements.
The <label> element is helpful for screen-reader users because the screen-reader will read out loud the label when the user focuses on the input element.
The <label> element even help users who have a problem clicking on very small areas (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to tie them together.
Radio Buttons
The <input type="radio"> represents a radio button.
Radio buttons allow users to select ONE of a fixed number of choices.
Example -
A form with radio buttons:
<p>Choose your favorite Web language:</p><form><input type="radio" id="html" name="fav_language" value="HTML"><label for="html">HTML</label><br><input type="radio" id="css" name="fav_language" value="CSS"><label for="css">CSS</label><br><input type="radio" id="javascript" name="fav_language" value="JavaScript"><label for="javascript">JavaScript</label></form>{codeBox}
Output:
This is how the HTML code above will be shown in a browser:
Choose your favorite Web language:
Checkboxes
The <input type="checkbox"> represents a checkbox.
Radio buttons allow users to select ZERO or MORE options of a limited number of choices.
Example -
A form with checkboxes:
<form><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"><label for="vehicle1"> I have a bike</label><br><input type="checkbox" id="vehicle2" name="vehicle2" value="Car"><label for="vehicle2"> I have a car</label><br><input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"><label for="vehicle3"> I have a boat</label></form>{codeBox}
Output:
This is how the HTML code above will be shown in a browser:
The Submit Button
The <input type="submit"> represents a button for submitting the form data to a form handler.
The form handler is generally a file on the server with a script for processing input data.
The form handler is defined in the form's action attribute.
Example -
A form with a submit button:
<form action="/action_page.html"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" value="John"><br><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Doe"><br><br><input type="submit" value="Submit"></form>{codeBox}
Output:
This is how the HTML code above will be shown in a browser:
Action attribute
When the form is submitted, then with the help of the action attribute, which action is to be performed is defined.
When the submit button is clicked, then the data of the form is sent to the server page.
In the above example, when you click on the submit button, the form data is sent to the server page named “/action_page.html”.
<form action="/action_page.html">{codeBox}
Target Attribute
The submitted result will open in the new browser tab or current window; it is specified with the help of the target attribute.
Its default value is “_self,” which means the form is submitted in the current windows.
If you want to open the result in the new window's tab, then use the “_blank” value.
Example:
<form action="/action_page.html" target="_blank">{codeBox}
Inpotatant! The Name Attribute for <input>
Notice that every input field must contain a name attribute to be submitted.
If the name attribute is omitted, the input field's value will not be sent at all.
Example -
This example will not submit the value of the "First name" input field:
<form action="/action_page.html"><label for="fname">First name:</label><br><input type="text" id="fname" value="John"><br><br><input type="submit" value="Submit"></form>{codeBox}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Form.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
