HTML Form Attributes
HTML
There are many attributes of <form> tag which add different properties to it.
The action attribute performs an action or task.
➔ This action is happened as soon as the form submitted.
➔ The form data is submitted to the server resource to process.
➔ Most of the time action points to the file responsible to handle the form data.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag Attributes Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<h2>HTML form Tag Attributes Example</h2>
<form id="myform" action="./serverpage" method="get">
<div>
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" required>
</div>
<div>
<label for="lname">Last Name: </label>
<input type="text" name="lname" id="lname" required>
</div>
<div>
<label for="email">Your Email: </label>
<input type="email" name="email" id="email" required>
</div>
<div>
<input type="submit" value="Submit Now" onclick=submitForm()>
</div>
</form>
<script>
let myform = document.getElementById("myform");
function submitForm() {
if(myform.checkValidity()){
alert("Form data submitted.");
event.preventDefault();
}
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.
The method attribute specifies the http method.
method is assigned by one of many http methods.
method value can be any one of GET, POST
GET is used when data security is not a concern, data size is limited and webpage can be book marked.
POST is used when data security is a concern, data size is not limited and webpage can not be book marked.
Other http methods are HEAD, TRACE, OPTION, PUT, DELETE
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag Attributes Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<h2>HTML form Tag Attributes Example</h2>
<form id="myform" action="./server-endpoint" method="post">
<div>
<label>IDNo:
<input type="text" name="id" id="id" required>
</label>
</div>
<div>
<label>Name:
<input type="text" name="name" id="name" required>
</label>
</div>
<div>
<label>Email:
<input type="email" name="email" id="email" required>
</label>
</div>
<div>
<input type="submit" value="Sent Now" onclick=submitForm(event)>
</div>
</form>
<script>
let myform = document.getElementById("myform");
let id = document.getElementById("id");
let name = document.getElementById("name");
let email = document.getElementById("email");
function submitForm(e) {
if (myform.checkValidity()) {
alert("Form information submitted.");
event.preventDefault();
}
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.