HTML Form Attribute
In HTML there are different attributes available for the <form> element.
The Action Attribute:
The action attribute of <form> element defines the process to be performed when the form is submitted.
The action attribute value defines the web page where information proceeds. It can be .php, .jsp, .asp, etc. or any URL where you can want to process your form.
The form data is sent to a file called “action_page.php” and this file contains a server-side script that handles the form data.
Example:
<body>
<h2>Demo of action attribute of form element</h2>
<form action="smaple.php" method="post">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>User Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit">
</form>
</body>
OUTPUT:
HTML method attribute:
The method attribute defines the HTTP method which browser used to submit the form element. The possible values of the method attribute can be:
post:
We can use the post value of the method attribute when we want to process the sensitive data as it does not display the submitted data in the URL.
Syntax:
<form action="/action_page.php" method="post">
Example:
<form action="/action_page.php" target="_blank" method="post"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value=""><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value=""><br><br> <input type="submit" value="Submit"> </form>
OUTPUT:
get:
The get value of the method attribute is the default value while submitting the form. But this is not secure as it displays data in URL after submitting the form.
Syntax:
<form action="/action_page.php" method="get">
Example:
<form action="/action_page.php" target="_blank" method="get"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value=""><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value=""><br><br> <input type="submit" value="Submit"> </form>
OUTPUT:
HTML target attribute:
The target attribute defines were to open the response after submitting the form.
_blank – Displayed in a new window or tab
_self – Displayed in the current window
_parent – Displayed in the parent frame
_top – Displayed in the full body of the window
framename – Displayed in a named iframe
The default value is _self which means that the response will open in the current window.
Example:
<form action="/action_page.php" target="_blank"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value=""><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value=""><br><br> <input type="submit" value="Submit"> </form>
OUTPUT:
HTML autocomplete attribute:
The HTML autocomplete attribute specifies whether a form should have autocompleted on or off.
The default value of the autocomplete attribute is “on“, the browser automatically completes values based on values that the user has entered before.
Example:
<form action="/action_page.php" autocomplete="on"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="email">Email:</label> <input type="text" id="email" name="email"><br><br> <input type="submit"> </form>
OUTPUT:
HTML novalidate attribute HTML5:
The novalidate attribute is a newly added Boolean attribute of HTML5. If we apply this attribute in the form then it does not perform any type of validation and submit the form.
Example:
<form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit"> </form>
OUTPUT:
