What are HTML Forms? Explained for Beginners

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?

The HTM <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

The <input> element is the most commonly used form element, and it displayed in several ways, depending on its type="?" attribute.

✍ List of all HTML input types

text
email
password
number
url
search
date
time
datetime-local
month
week
tel
submit
reset
button
checkbox
radio
range
file
image
color
hidden

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 (for="ID").

<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">

Browser Output

Click on this text

You can use the label element with the following form elements –

All types of <input> elements except for the submit, button, image, and reset.
<textarea>
<select>
<meter>
<progress>

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>

Browser Output

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

GET
POST
PUT
PATCH
DELETE

✍ 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 _ ).

The End

If you have any doubts about the HTML Forms, then drop your query in the Comment Box.