In HTML there are various attributes available for <form> element which are given below:
HTML action attribute
The action attribute of <form> element defines the process to be performed on form when form is submitted, or it is a URI to process the form information.
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" 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" value="GO">
</form>
</body>
</html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" 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" value="GO">
</form>
</body>
</html>
Note: It will redirect to a new page "action.html" when you click on submit button.
HTML method attribute
The method attribute defines the HTTP method which browser used to submit the form. The possible values of method attribute can be:
- post: We can use the post value of method attribute when we want to process the sensitive data as it does not display the submitted data in URL.
Notes on the "post" method:
- This method sends the form-data as an HTTP post transaction
- Form submissions with the "post" method cannot be bookmarked
- The "post" method is more robust and secure than "get", and "post" does not have size limitations
Example
<form action="action.html" method="post">
- get: The get value of method attribute is default value while submitting the form. But this is not secure as it displays data in URL after submitting the form.
Notes on the "get" method:
- This method appends the form-data to the URL in name/value pairs
- This method is useful for form submissions where a user want to bookmark the result
- There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
- Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" method="get">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="GO">
</form>
</body>
</html>
When submitting the data, it will display the entered data in the form of:
HTML target attribute
The target attribute defines where to open the response after submitting the form. The following are the keywords used with the target attribute.
- _self: If we use _self as an attribute value, then the response will display in current page only.
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" method="get" target="_self">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="GO">
</form>
</body>
</html>
- _blank: If we use _blank as an attribute it will load the response in a new page.
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" method="get" target="_blank">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="GO">
</form>
</body>
</html>
HTML autocomplete attribute
The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an input field to complete automatically. It can have two values "on" and "off" which enables autocomplete either ON or OFF. The default value of autocomplete attribute is "on".
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" method="get" autocomplete="on" >
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="GO">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" method="get" autocomplete="off">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="GO">
</form>
</body>
</html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html" method="get" autocomplete="off">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="GO">
</form>
</body>
</html>
HTML enctype attribute
The HTML enctype attribute defines the encoding type of form-content while submitting the form to the server.This attribute can only be used if the form method is POST.
The possible values of enctype can be:
- application/x-www-form-urlencoded: It is default encoding type if the enctype attribute is not included in the form. All characters are encoded before submitting the form.
- multipart/form-data: It does not encode any character. It is used when our form contains file-upload controls.
- text/plain (HTML5): In this encoding type only space are encoded into + symbol and no any other special character encoded.
Syntax
<form method="post" enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="" method="post" enctype="multipart/form-data"
onsubmit="alert('Form data has been posted to the server.');return false;">
<label for="firstname">First name </label> <br />
<input type="text" id="firstname" name="firstname"> <br />
<label for="lastname">Last name </label> <br />
<input type="text" id="lastname" name="lastname"> <br />
<label for="Image">Pic </label> <br />
<input type="file" id="image" name="image"><br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
No comments:
Post a Comment