HTML - Form Attributes
File Uploads for WordPress
File Uploads
You can build beautiful WordPress forms
without being a developer or web designer
Ninja Forms
Learn More
HTML forms are simple form that has been used to collect data from the users. HTML form has interactive
controls and various input types such as text, numbers, email, password, radio buttons, checkboxes,
buttons, etc.
HTML <form> tag is used to create HTML forms.
Ads by
Stop seeing this ad
File Uploads for WordPress
Why this ad?
File Uploads
You can build beautiful WordPress forms
without being a developer or web
designer
Ninja Forms
Learn More
What are Form Attributes?
In HTML, each element has its own attributes that are used to define the characteristics of that particular
HTML element and are placed inside the element's opening tag. The <form> element also has attributes
that provide different functionalities like redirection on other web pages and auto completion of text.
Following is a list of the most frequently used form attributes
action: HTML action attribute is used to specify a URL that processes the form submission.
method: HTML method attribute is used to define which HTTP method to use when submitting the
form.
target: HTML target attribute that is used to specify where to open the linked document.
autocomplete: HTML autocomplete attribute allows you to set whether the autocomplete for the form
should be on or off.
enctype: HTML enctype attribute is used to specify how the form input data should be encoded before
sending it to the server.
novalidate: HTML novalidate attribute define that while submitting the form the form data should not
be validated in an HTML document.
File Uploads for WordPress
File Uploads
You can build beautiful WordPress forms
without being a developer or web
designer
Ninja Forms
Learn More
The action Attribute
The action attribute of the <form> element transmits the user's input to a backend script for processing. A
form is of no use unless it processes the information provided by the user. Therefore, it is important to
pass the URL of a program to the action attribute. Note that the formaction attribute can override the value
of action attribute.
Example
The following example illustrates the use of action attribute. When we click the submit button, the form will
redirect us to the home page of Tutorialspoint.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> The action Attribute </title>
</head>
<body>
<!-- Start of the form element -->
<form action="/action_page.php">
<!-- to take input -->
Name:
<input type="text" name="your_name" required/>
<br><br> Email:
<input type="email" name="mail" required/>
<br><br>
<!-- to submit the data -->
<input type="submit">
</form>
</body>
</html>
Name:
Email:
Submit
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified
expert to boost your career.
Anzeige
Tummy Tuck Surgery in Turkey: Expert Care at
Low Prices
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE
The method Attribute
The method attribute determines which HTTP method should be used by the browser while uploading the
form information. The most commonly used methods are as follows
Values Description
It is the default method for form submission which means if we don't specify the method name
GET
explicitly the form will use the GET method to send data.
POST It is used to send form data inside HTTP request body. It is safer than GET method.
It is not recommended to use the GET method while sending sensitive information like credit/debit card
numbers and passwords because it exposes the submitted data in the URL.
Example
The following example demonstrate how to use the method attribute of <form> element. On clicking the
submit button in the output of below code, user will be redirected to the home page of Tutorialspoint.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The method Attribute</title>
</head>
<body>
<!-- Start of the form element -->
<form action="[Link] method="post">
Name:
<input type="text" name="your_name" required/>
<br><br> Email:
<input type="email" name="mail" required/>
<br><br>
<input type="submit">
</form>
</body>
</html>
Name:
Email:
Submit
Anzeige
Tummy Tuck Surgery in Turkey: Expert Care at
Low Prices
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE
The target Attribute
The target attribute determines the target window or frame where the result of the script will be displayed
after submitting the form. The default target is the current window. The target attribute accepts the
following values
Values Description
_self It opens the response in the same frame as it was clicked.
_blank It opens the response in the new window or tab.
_parent Opens the response in the parent frame.
_top Opens the response in the full body of window.
framename Opens the response in the named iframe.
Example
In the following example, we will use the target attribute with the value _blank. The response will be open in
the new tab.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> The target Attribute </title>
</head>
<body>
<!-- Start of the form element -->
<form action="[Link] target="_blank">
Name:
<input type="text" name="your_name" required/>
<br><br> Email:
<input type="email" name="mail" required/>
<br><br>
<input type="submit">
</form>
</body>
</html>
Name:
Email:
Submit
Anzeige
Tummy Tuck Surgery in Turkey: Expert
Care at Low Prices
The novalidate Attribute
The novalidate is a Boolean attribute that indicates the form does not need any kind of validation. The term
validation refers to the process of verifying the correctness of user input based on predefined conditions.
This attribute, when applied, exempts the form from such checks, allowing user inputs to bypass these
conditions.
If Boolean Attributes like novalidate are present on an HTML element, it specifies true and in the case of
absence, false is assumed. They do not accept any values.
Example
In the previous example, the form redirected us to a new web page when we entered our name and email.
For this example, we will use the novalidate attribute which will allow the redirection without enterning any
information.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> The novalidate Attribute </title>
</head>
<body>
<!-- Start of the form element -->
<form action="[Link]
target="_blank" autocomplete="off"
method="get" novalidate>
<!-- to take input -->
Name:
<input type="text" name="your_name" required/>
<br><br> Email:
<input type="email" name="mail" required/>
<br><br>
<!-- to submit the data -->
<input type="submit">
</form>
</body>
</html>
Name:
Email:
Submit
File Uploads for WordPress
Ninja Forms
You can build beautiful WordPress forms
without being a developer or web
designer
Ninja Forms
Learn More
The autocomplete Attribute
The autocomplete attribute of HTML predicts and suggests the subsequent input based on the initial
characters entered in the input field. This attribute primarily has two states namely on and off.
Values Description
on By default, the autocomplete attribute is set to on, enabling the autocomplete functionality.
The autocomplete attribute can be toggled to off to disable this feature as per the requirements of
off
the web application.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form with Autocomplete</title>
</head>
<body>
<h2>Form with Autocomplete Attribute</h2>
<form action="[Link]
method="POST" autocomplete="on">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" autocomplete="on">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
autocomplete="on">
<br><br>
<button type="submit">Submit</button>
</form>
<p>
Submit the form with some values, Next time
when you try to submit browser will suggest
previous submitted values.
</p>
</body>
</html>
The enctype Attribute
We use the enctype attribute to specify how the browser encodes the data before it sends it to the server.
Its possible values are
Values Description
application/x-www-form-
This is the standard method most forms use in simple scenarios.
urlencoded
This is used when you want to upload binary data in the form of files like
mutlipart/form-data
image, word file etc.
text/plain It only encodes the spaces into + symbol.
Example
In the following example, we are using the HTML ‘enctype’ attribute with the value "text/plain" within the
<form> element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML 'enctype' Attribute</title>
<style>
form {
width: 300px;
padding: 10px;
border-radius: 10px;
background-color: rgb(9, 109, 190);
}
form h1 {
font-family: sans-serif;
letter-spacing: 2px;
color: white;
text-align: center;
position: relative;
top: -20px;
}
form input {
padding: 12px;
width: 80%;
border: 1px solid white;
border-radius: 5px;
outline: none;
}
form label {
font-size: 20px;
color: white;
padding: 5px 5px;
}
form button {
padding: 12px;
width: 100px;
cursor: pointer;
background-color: white;
border: 1px solid white;
border-radius: 5px;
}
</style>
</head>
<body>
<!--HTML 'enctype' attribute-->
<h3>Example of the HTML 'enctype' attribute</h3>
<p>
We are assigning the "text/plain" value to the
enctype attribute which means the data is being
sent as plain text.
</p>
<form action="[Link]" enctype="text/plain" method="POST">
<h1>Login</h1>
<label for="">Username</label>
<br>
<input type="text" id='uname' placeholder="Username">
<br>
<br>
<label for="">Password</label>
<br>
<input type="password" id='psw' placeholder="Password">
<br>
<br>
<button type='submit' onclick="Login()">Login</button>
</form>
<script src="[Link]"></script>
</body>
</html>
[Link]
function Login(){
var uname = [Link]("uname").value;
var password = [Link]("psw").value;
[Link]("Username: " + uname);
[Link]("<br>");
[Link]("Password: " + password);
}
