What is HTML Form and How to make?

What is HTML Form?

HTML Forms are one of the most important and useful components of a website used to collect data from users (Visitors).

How does an HTML form collect data from a user?

Here we have taken a dummy HTML Form (see the following image).

Now, when a user fills out the form and submits, the form data filled by the user is sent to the server through the HTTP Method for processing.

Now, the server (backend program) decides what to do with the data. Will it store the data in a database, or do something else depends on what instructions have been given to the server.

How to make an HTML Form?

There are some Form elements or tags in HTML to build a form, and all the form elements should be inside the <form> tag.

<form>
    Form Elements will be here
</form>

HTML Form elements

HTML Form elements are those where users can enter their inputs like – name, email, address, password, etc.

The <input> Element

The <input> element is the most commonly used form element, and its type attribute determines how it will be displayed.

The text type input field is used to collect single-line text, such as name, title, etc.

All <input type=”?”>

Try these yourself –

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

Few examples of input field

The email type of input field only collects the email ID from users.

The Password Input Type field is used to collect passwords from users.

The submit input type appears as a button, which is used to submit the form. You can also use the type=”submit” attribute with the <button type=”submit”> … </button> tag and it will work the same.

The <label> element

<label> is another form element that is used to represent a label for a specific form element. Let’s see how you can define a label for a form element –

First, you have to set an ID to the form element and then place the ID in the for="id" attribute of a label tag.

Now, between the <label>...</label> tag write a name for the label. Here is an example –

<h3>Label tag example</h3>

<form>
    <label for="username">Name:</label>
    <input type="text" id="username">
</form>

💡 The form element will become active when you click on the label text. Try it self –

❗❗ 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 <textarea> element

The <textarea> element is used to collect multiline text from users such as comments, reviews, etc.

<h3>Textarea example</h3>

<form>
    <label for="review">Your thoughts:</label><br>
    <textarea id="review"></textarea>
</form>

Important attributes of the HTML <form> tag

<form action="./index.php" method="GET">
    <!-- Form Elements -->
</form>

<form action=”?“ Attribute

The form action attribute takes the address or location where you want to send the form data after submission.

<form action=”?“ Attribute

The method attribute takes an HTTP Method. The HTTP Methods are ways to send data to the specified location (server). Here is the list of HTTP methods –

GET

POST

PUT

PATCH

DELETE

What are the default values of action and method attributes?

If you do not specify the action and method attribute –

The default value of the action attribute is – Current Page (URL)
The default value of the method attribute is – GET

Important attributes of form elements

<form>
    <input type="text" name="user_name">
    <textarea name="user_comment"></textarea>
</form>

The name attribute 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.

What does it help?

After submitting a form, the form data can be accessed through the names of the form elements, that’s why it is so important to give a name.

The name attribute takes a text that will be treated as the name of a form 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 placeholder=”?” Attribute

<form>
    <input type="text" placeholder="Your name"><br><br>
    <textarea placeholder="Your thougths"></textarea>
</form>

The placeholder attribute takes a short hint text that describes the expected value of the input field.

This attribute is used only with the <input> and <textarea> elements.

Let’s build a simple HTML form

A simple HTML form with name, email, phone number, date of birth, gender, accept terms and submit button

In the following code required attriabute with no value, this attribute specifies that the element must be filled out before submitting the form.

<h2>A simple HTML Form</h2>

<form method="POST">
    <label for="u_name">Name:</label><br>
    <input type="text" name="user_name" placeholder="Your name" id="u_name" required><br><br>

    <label for="u_email">Email:</label><br>
    <input type="email" name="user_email" placeholder="Your email" id="u_email" required><br><br>

    <label for="u_ph">Phone number:</label><br>
    <input type="tel" name="ph_number" placeholder="Phone number" id="u_ph" required><br><br>

    <label for="dob">Date of birth</label><br>
    <input type="date" name="user_dob" id="dob" required><br><br>

<!-- Here you can use input-radio buttons instead of select -->    
    <label for="gender">Gender</label><br>
    <select name="user_gender" id="gender">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select><br><br>

    <input type="checkbox" name="accept_term" id="term" required>
    <label for="term">I agree to the terms & conditions</label><br><br>

    <input type="submit" value="Submit">
</form>