The form attribute is used to associate elements such as <input>, <button>, <select>, and <textarea> with a <form> when placed outside the form tag. (Syntax: <input form="form_id">).
Definition and Usage
➔ It allows a submit button or input field anywhere on a page and submits its data with a specific form.
➔ The value of the form attribute must match the ID of the
Syntax
//In HTML
<!-- Example for input element -->
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input type="text" id="id" name="id" placeholder="Enter your ID"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='55' rows='5' placeholder="Enter your Commnet"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<button id="submitoutside" type="submit" form="myform">Outside Button</button>
//In JavaScript
const element = document.getElementById("submitoutside");
element.form = "myform";
element.setAttribute("form", "myform");
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| form | <button> <fieldset> <input> <label> <meter> <object> <output> <select> <textarea> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML form attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
</head>
<body onsubmit="submit(event)">
<div id="sample" class="mydiv">
<h3>HTML form attribute example</h3>
<p>The form attribute is used to associate elements like input, button, select, and textarea with a form if they are placed outside the form tags. </p>
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='55' rows='5'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<button type="submit" form="myform">Outside Button</button>
</div>
<p>Note: This form submission will not be processed by the server. </p>
</body>
<script>
function submit(e) {
e.preventDefault();
let id = e.target.id.value
let name = e.target.name.value;
let comment = e.target.comment.value;
alert("Form is submitted.\n" + "ID: " + id + "\nName: " + name + "\nComment: " + comment);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.
Example Form submit URL parameters.
<!DOCTYPE html>
<html>
<head>
<title>HTML form attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input[type='text'] {
padding: 5px;
}
input[type='text']:hover,
textarea:hover {
background-color: #f6f6f6;
}
input[type='submit'] {
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #000;
color: white;
}
input[type='submit']:hover {
background-color: #f6f6f6;
color: #000;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML form attribute example</h3>
<p>The form attribute is used to associate elements like input, button, select, and textarea
with a form if they are placed outside the form tags.</p>
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" value="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='40' rows='5'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="showhref()"></td>
</tr>
</table>
</form>
<p id="result"><b>Note:</b> Click on the submit button to see the URLSearchParams of the form.</p>
</div>
</body>
<script>
let id = document.getElementById("id");
let name = document.getElementById("name");
let comment = document.getElementById("comment");
function showhref() {
event.preventDefault();
const url = new URL(window.location.href);
//const data = {};
const data = { id: id.value, name: name.value, comment: comment.value };
const params = new URLSearchParams(data);
url.search = params.toString();
history.replaceState(null, '', url);
const urlParams = new URLSearchParams(window.location.search);
let sid = urlParams.get('id');
let sname = urlParams.get('name');
let scomment = urlParams.get('comment');
document.getElementById("result").innerHTML = "Location.href are: " + url.href + "<br><br> Parameres are:" + " <br>ID: " + sid + ", <br>Name: " + sname + ", <br>Comment: " + scomment;
alert(url.href);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.