What are HTML Forms?
HTML Forms are the most important and useful component to collect data from the site visitors. And after submitting a form, the form data is sent to the server for processing.
How to create Forms in HTML?
<form> tag is used to define an HMTL form, you can define multiple HTML forms in one HTML page. But, you need to add the Form Elements inside the
<form> tag to create a complete HTML form.
<form> <!-- Form Elements --> </form>
HTML Form Elements
The HTML Form elements are those elements where users enter their inputs to send to the server, such as – username, email, password, etc.
<form> <label for="userName">Name</label><br> <input type="text" name="user_name" id="userName" placeholder="Name"><br><br> <label for="userEmail">Email</label><br> <input type="email" name="user_email" id="userEmail" placeholder="Email"><br><br> <label for="userPassword">Password</label><br> <input type="password" name="user_password" id="userPassword" placeholder="Password"><br><br> <input type="submit" value="Submit"> </form>
The <input> Element of HTML Forms
<input> element is the most commonly used form element, and it displayed in several ways, depending on its
✍ List of all HTML input types
The text input type is for creating an input field that can collect single-line text, such as – Username, Title, etc.
This type of input field only collects the email ID from users.
The password input type field is for collecting passwords from users.
The submit input type appears as a button, which is used to submit the form.
The <lable> Element of HTML Forms
The label element represents the label for a specific form element. The
for attribute takes the ID of the form element, which uniquely defines the label for the element (
<form> <label for="userName">Name</label> <input type="text" id="userName"> <label for="userEmail">Email</label> <input type="email" id="userEmail"> </form>
By clicking on this label text you can focus or activate the form element.
<label for="myCheckbox">Click on this text</label> <input type="checkbox" id="myCheckbox">
You can use the label element with the following form elements –
- All types of <input> elements except for the submit, button, image, and reset.
The placeholder=”?” Attribute
The placeholder attribute takes a short hint text that describes the expected value of an input field.
This attribute is used only with the <input> and <textarea> elements.
<form> <input type="text" placeholder="Enter your name"><br><br> <textarea placeholder="Write your comment..."></textarea> </form>
Important Attributes of the HTML <form> Element
<form action="./index.php" method="GET"> <!-- Form Elements --> </form>
<form action=”?“ Attribute
The form action attribute contains the address or location where you want to send the form data after submitting the form.
<form method=”?“ Attribute
The method attribute takes an HTTP Method. Basically, the HTTP Methods are ways to send data to the specified location.
The conclusion is – The form method attribute specifies how to send the form data to the specified location.
List of all HTTP methods
✍ The default value of the action and method attribute
If you do not specify the action and method attribute in the form element, then the default value is considered as the main value.
- The default value of the action attribute is – Current Page
- The default value of the method attribute is – GET
The name=”?” attribute of Form elements
<form> <input type="text" name="user_name"> </form>
This is the most important attribute of a form element. Because, If the name attribute is not provided, then the data of that input field will not be sent to the server (specified location).
Therefore, each form element that can get inputs from users must have a name attribute to be submitted.
The name attribute takes a text that will be treated as the name of the input element, and the text is totally up to you. But, the text should be in lowercase and don’t use the numbers and special characters (you can use the underscore _ ).
If you have any doubts about the HTML Forms, then drop your query in the Comment Box.