DEV Community

Cover image for HTML form - Attributes
Mahalakshmi C
Mahalakshmi C

Posted on

HTML form - Attributes

#html #beginners

A form acts as a bridge between the user and the website. It collects information entered by users and sends it to a server where it can be processed, stored, or validated.

Without HTML forms, websites would only display information. Users wouldn't be able to interact with them by entering data.

In this blog, we'll learn everything about HTML Forms, including how they work, their important attributes, and the most commonly used form elements.

What is HTML Form?
An HTML Form is a section of a webpage used to collect user input.

It contains different input fields such as:

  • Text boxes

  • Password fields

  • Radio buttons

  • Checkboxes

  • Drop-down lists

  • File upload

  • Buttons

The collected information is usually sent to a web server for processing.

Syntax

<form>
    Form Elements
</form>
Enter fullscreen mode Exit fullscreen mode

What Happens Without HTML Forms?

Imagine visiting these websites without forms:

  • Gmail - You cannot enter your email or password.

  • Amazon - You cannot search products.

  • Instagram - You cannot login or sign up.

The HTML <form> element is used to create an HTML form for user input.

Important Attributes of the <form> Tag

  • action

  • method

  • name

  • novalidate

  • autocomplete

  • target

action Attribute

  • The action attribute tells the browser where to send the form data after the user clicks the Submit button. 
<form action="login.php">
Enter fullscreen mode Exit fullscreen mode

Method Attribute

  • The method attribute tells how the form data should be sent to the server.

  • There are two commonly used methods:

GET
POST

The GET method sends form data through the URL. It is mainly used when the data is not sensitive, such as search queries.

<form action="login.php" method="GET">
Enter fullscreen mode Exit fullscreen mode

The POST method sends form data inside the request body, so it does not appear in the URL.

<form action="search.php" method="POST">
Enter fullscreen mode Exit fullscreen mode

name Attribute

  • The name attribute gives a name to the form or its controls. When the form is submitted, the server identifies each value using its name. 
<input type="text" name="username">
<input type="password" name="password">
Enter fullscreen mode Exit fullscreen mode

novalidate Attributes

  • HTML checks required fields before submitting. 
<input type="email" required>
Enter fullscreen mode Exit fullscreen mode
  • The browser won't submit until a valid email is entered.

autocomplete Attribute

  • This attribute tells the browser whether it should remember previously entered values. 
<form autocomplete="on">
Enter fullscreen mode Exit fullscreen mode

target Attribute

  • The target attribute specifies where the server's response will be displayed after the form is submitted.

_self (Default)- Opens the response in the same browser tab.

<form target="_self">
Enter fullscreen mode Exit fullscreen mode

_blank - Opens the response in a new browser tab.

<form target="_blank">
Enter fullscreen mode Exit fullscreen mode

HTML Forms are one of the most powerful features of HTML because they allow users to interact with websites. Understanding the <form> tag, its attributes like action and method, and common form elements is an essential step toward becoming a web developer

Top comments (0)