View video tutorial
HTML Input Form's Attributes
HTML
The <input> has some attributes related to form that also a developer must know about.
Most common input Attributes for form
form, formaction,
formmethod, formtarget,
formnovalidate, formenctype etc.
form attribute of <input> tag
➔ The form attribute specifies the form id the input control belongs to.
➔ The HTML form attribute specifies that the input control can still be part of a form and submit using the form ID, even though the input control is outside the form.
Example (form attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML form attribute Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input[type='submit'] {
width: 80px;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML form attribute Example</h3>
<p>The HTML form attribute specifies that the input control can still be part of a form and submit using the form
ID, even though the input control is outside the form.</p>
<table>
<form id="myform" action="./server-endpoint" method="post">
<tr>
<td> <label for="">Product ID:</label></td>
<td><input type="text" name="productid" id="productid" placeholder="Enter Product ID" required></td>
</tr>
<tr>
<td> <label for="">Product Name:</label></td>
<td><input type="text" name="productname" id="productname" placeholder="Enter product name" required>
</td>
</tr>
<tr>
<td> <label for="">Product Price:</label></td>
<td><input type="number" name="productprice" id="productprice" placeholder="Enter product price"
required></td>
</tr>
</form>
<tr>
<td></td>
<td><input type="submit" form="myform" onclick=submitForm(event) value="Submit">
<input type="submit" form="myform" onclick=clearForm(event) value="Clear">
</td>
</tr>
</table>
<script>
let myform = document.getElementById("myform");
let productid = document.getElementById("productid");
let productname = document.getElementById("productname");
let productprice = document.getElementById("productprice");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nProduct Name: " + productname.value +
"\nProduct Price: " + productprice.value;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
productid.value = "";
productname.value = "";
productprice.value = "";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
formaction attribute of <input> tag
➔ The formaction attribute specifies the form action value for this particular input button.
➔ The HTML formaction attribute specifies that the individual input control can override form action endpoint url for that input button.
Example (formaction attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML formaction attribute Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input[type='submit'] {
width: 80px;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML formaction attribute Example</h3>
<p>The HTML formaction attribute specifies that the individual input control can override form action endpoint url for that
input button.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">Product ID:</label></td>
<td><input type="text" name="productid" id="productid" placeholder="Enter Product ID" required></td>
</tr>
<tr>
<td> <label for="">Batch No:</label></td>
<td><input type="text" name="batchno" id="batchno" placeholder="Enter batch no" required></td>
</tr>
<tr>
<td> <label for="">Exp Date:</label></td>
<td><input type="date" name="expdate" id="expdate" required></td>
</tr>
<tr>
<td></td>
<td><input id="submitbutton" type="submit" onclick=submitForm(event)
value="Submit">
<input id="submitbutton2" type="submit" formaction="./mycustom-endpoint" onclick=submitForm2(event)
value="Submit2">
<input type="submit" onclick=clearForm(event) value="Clear">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let productid = document.getElementById("productid");
let batchno = document.getElementById("batchno");
let expdate = document.getElementById("expdate");
function submitForm(e) {
let fa = document.querySelector("#myform");
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\naction: " + fa.action;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function submitForm2(e) {
let fa = document.querySelector("#myform");
let ba = document.querySelector("#submitbutton2");
fa.action = ba.formAction;
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\nformaction: " + fa.action;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
productid.value = "";
batchno.value = "";
expdate.value = "";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
formmethod attribute of <input> tag
➔ The formmethod attribute specifies the form http method value for this particular input button.
➔ The HTML formmethod attribute specifies that the individual input control can override form http method for that input button.
Example (frommethod attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML formmethod attribute Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input[type='submit'] {
width: 80px;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML formmethod attribute Example</h3>
<p>The HTML formmethod attribute specifies that the individual input control can override form http method for that
input button.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">Product ID:</label></td>
<td><input type="text" name="productid" id="productid" placeholder="Enter Product ID" required></td>
</tr>
<tr>
<td> <label for="">Batch No:</label></td>
<td><input type="text" name="batchno" id="batchno" placeholder="Enter batch no" required></td>
</tr>
<tr>
<td> <label for="">Exp Date:</label></td>
<td><input type="date" name="expdate" id="expdate" required></td>
</tr>
<tr>
<td></td>
<td><input id="submitbutton" type="submit" onclick=submitForm(event) value="Submit">
<input id="submitbutton2" type="submit" formmethod="get" onclick=submitForm2(event) value="Submit2">
<input type="submit" onclick=clearForm(event) value="Clear">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let productid = document.getElementById("productid");
let batchno = document.getElementById("batchno");
let expdate = document.getElementById("expdate");
function submitForm(e) {
let fa = document.querySelector("#myform");
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\nmethodn: " + fa.method;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function submitForm2(e) {
let fa = document.querySelector("#myform");
let ba = document.querySelector("#submitbutton2");
fa.method = ba.formMethod;
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\nformmethod: " + fa.method;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
productid.value = "";
batchno.value = "";
expdate.value = "";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
formtarget attribute of <input> tag
➔ The formtarget attribute specifies where the response will be displayed.
➔ The HTML formtarget attribute can override individual input controls by specifying where the response received from the server will be displayed after a form is submitted.
Example (formtarget attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML formtarget attribute Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input[type='submit']{
width:80px;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML formtarget attribute Example</h3>
<p>The HTML formtarget attribute can override individual input controls by specifying where the response received from the server will be displayed after a form is submitted.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">Product ID:</label></td>
<td><input type="text" name="productid" id="productid" placeholder="Enter Product ID" required></td>
</tr>
<tr>
<td> <label for="">Batch No:</label></td>
<td><input type="text" name="batchno" id="batchno" placeholder="Enter batch no" required></td>
</tr>
<tr>
<td> <label for="">Exp Date:</label></td>
<td><input type="date" name="expdate" id="expdate" required></td>
</tr>
<tr>
<td></td>
<td><input id="submitbutton" type="submit" onclick=submitForm(event) value="Submit">
<input id="submitbutton2" type="submit" formtarget="_blank" onclick=submitForm2(event) value="Submit2">
<input type="submit" onclick=clearForm(event) value="Clear">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let productid = document.getElementById("productid");
let batchno = document.getElementById("batchno");
let expdate = document.getElementById("expdate");
function submitForm(e) {
let fa=document.querySelector("#myform");
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\ntarget: "+fa.target;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function submitForm2(e) {
let fa=document.querySelector("#myform");
let ba=document.querySelector("#submitbutton2");
fa.target=ba.formTarget;
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\n formtarget: "+fa.target;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
productid.value="";
batchno.value="";
expdate.value="";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
formnovalidate attribute of <input> tag
➔ The formnovalidate attribute specifies if the form will be validated for this particular input button.
➔ The HTML formnovalidate attribute can override individual input controls by specifying whether the form will be validated for this input button.
Example (formnovalidate)
<!DOCTYPE html>
<html>
<head>
<title>HTML formnovalidate attribute Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input[type='submit'] {
width: 80px;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML formnovalidate attribute Example</h3>
<p>The HTML formnovalidate attribute can override individual input controls by specifying whether the form will be
validated for this input button.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">Product ID:</label></td>
<td><input type="text" name="productid" id="productid" placeholder="Enter Product ID" required></td>
</tr>
<tr>
<td> <label for="">Batch No:</label></td>
<td><input type="text" name="batchno" id="batchno" placeholder="Enter batch no" required></td>
</tr>
<tr>
<td> <label for="">Exp Date:</label></td>
<td><input type="date" name="expdate" id="expdate" required></td>
</tr>
<tr>
<td></td>
<td><input id="submitbutton" type="submit" onclick=submitForm(event) value="Submit">
<input id="submitbutton2" type="submit" formnovalidate onclick=submitForm2(event) value="Submit2">
<input type="submit" onclick=clearForm(event) value="Clear">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let productid = document.getElementById("productid");
let batchno = document.getElementById("batchno");
let expdate = document.getElementById("expdate");
function submitForm(e) {
let fa = document.querySelector("#myform");
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\nvalidation: " + fa.checkValidity();
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function submitForm2(e) {
let fa = document.querySelector("#myform");
let ba = document.querySelector("#submitbutton2");
//fa.target=ba.formTarget;
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\n validation: " + fa.checkValidity();
alert("Form information Submitted.\n" + txt);
event.preventDefault();
} else {
alert("Form validatin bypassed. and validation " + fa.checkValidity());
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
productid.value = "";
batchno.value = "";
expdate.value = "";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.
formenctype attribute of <input> tag
➔ The formenctype attribute specifies what will be the form encoding type for this particular input button.
➔ The HTML formenctype attribute can override individual input controls by specifying what will be the form encoding type for this input button.
Example (formenctype attribute)
<!DOCTYPE html>
<html>
<head>
<title>HTML formenctype attribute Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 6px;
background-color: #fff;
}
input[type='submit'] {
width: 80px;
}
input:hover {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<h3>HTML formenctype attribute Example</h3>
<p>The HTML formenctype attribute can override individual input controls by specifying what will be the form
encoding type for this input button.</p>
<form id="myform" action="./server-endpoint" method="post">
<table>
<tr>
<td> <label for="">Product ID:</label></td>
<td><input type="text" name="productid" id="productid" placeholder="Enter Product ID" required></td>
</tr>
<tr>
<td> <label for="">Batch No:</label></td>
<td><input type="text" name="batchno" id="batchno" placeholder="Enter batch no" required></td>
</tr>
<tr>
<td> <label for="">Exp Date:</label></td>
<td><input type="date" name="expdate" id="expdate" required></td>
</tr>
<tr>
<td></td>
<td><input id="submitbutton" type="submit" onclick=submitForm(event) value="Submit">
<input id="submitbutton2" type="submit" formenctype="multipart/form-data" onclick=submitForm2(event)
value="Submit2">
<input type="submit" onclick=clearForm(event) value="Clear">
</td>
</tr>
</table>
</form>
<script>
let myform = document.getElementById("myform");
let productid = document.getElementById("productid");
let batchno = document.getElementById("batchno");
let expdate = document.getElementById("expdate");
function submitForm(e) {
let fa = document.querySelector("#myform");
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\nencoding: " + fa.enctype;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function submitForm2(e) {
let fa = document.querySelector("#myform");
let ba = document.querySelector("#submitbutton2");
fa.enctype = ba.formEnctype;
if (myform.checkValidity()) {
let txt = "Product Id: " + productid.value +
"\nBatch No: " + batchno.value +
"\nExp Date: " + expdate.value +
"\n\nencoding: " + fa.enctype;
alert("Form information Submitted.\n" + txt);
event.preventDefault();
}
}
function clearForm(e) {
if (myform.checkValidity()) {
productid.value = "";
batchno.value = "";
expdate.value = "";
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "Tryitnow" button to see how it works.