Form Attributes

Form Attributes in HTML

Form attributes are special properties added to the <form> tag or its input elements to control how the form behaves and how data is sent to the server.

action Attribute

• The action attribute in a <form> specifies the URL or file where the form data will be sent after the user submits it.

• If action is not provided, the form submits data to the same page.

Example:

<form action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <input type="submit" value="Submit">
</form>

Output : 

method Attribute in Forms

The method attribute in HTML forms defines how the form data will be sent to the server when the user clicks the submit button.

There are two main methods:

GET Method

Sends the form data as part of the URL (in the query string).

Example:

<form action="search.php" method="get">
  <input type="text" name="query" placeholder="Search...">
  <input type="submit" value="Go">
</form>

Output :

POST Method

Sends form data in the HTTP request body, not visible in the URL.

More secure than GET, especially for sensitive data (passwords, login forms).

Example:

<form action="submit.php" method="post">
  <label>Email:</label>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>

Output :

Useful Form Attributes

 

Attribute	Purpose
action	Defines where the form data will be sent (URL or file).
method	Defines how data is sent (GET = URL, POST = body).
enctype	Specifies encoding type for form data (needed for file upload).
target	Defines where to display response (_self, _blank, etc.).
autocomplete	Enables/disables autofill suggestions (on / off).
novalidate	Submits form without HTML5 validation.
accept-charset	Defines character encoding (e.g., UTF-8).
name	Identifies the input field (used in backend/JS).
value	Sets default value for an input.
placeholder	Shows a hint inside the input box.
required	Makes a field mandatory before submission.
pattern	Validates input using a regular expression.
min / max	Sets numeric/date input limits.
minlength / maxlength	Restricts number of characters in text input.
readonly	Field cannot be edited but is submitted.
disabled	Field is disabled (not editable, not submitted).
multiple	Allows multiple values (file upload, select).
checked	Pre-selects a checkbox or radio button.
selected	Pre-selects an option in a dropdown.
size	Sets width of input/select field.
step	Defines step interval for numeric/date input.
list	Connects input with a <datalist> for suggestions.
type	Defines input type (text, email, password, etc.).
id	Unique identifier, used with <label> and CSS/JS.

Example  : 

<form action="submit.php" method="post" autocomplete="on" novalidate>
  
  <!-- Text with placeholder & required -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="username" placeholder="Enter your name" required><br><br>

  <!-- Email with pattern -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required><br><br>

  <!-- Number with min, max, step -->
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="60" step="1" required><br><br>

  <!-- Password with minlength, maxlength -->
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="password" minlength="6" maxlength="12" required><br><br>

  <!-- Submit -->
  <input type="submit" value="Register">
</form>

Output :