Form and Submit Attributes
What Is It?
A form has default submission settings. A submit button can use different settings for one action.
What the Tags Mean
action: where answers go.method: GET or POST.formaction: a button’s alternative destination.formnovalidate: skips browser checks for that submission.form: connects a control to a form by ID.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form and Submit Attributes</title>
</head>
<body>
<form id="message-form">
<label for="message">Message</label>
<input id="message" name="message" required>
<button type="submit">Check message</button>
<button type="submit" formnovalidate>Skip check</button>
</form>
<pre id="result" role="status">Your answers will appear here. Nothing is sent or saved.</pre>
<script>
document.querySelectorAll("form").forEach((form) => {
form.addEventListener("submit", (event) => {
event.preventDefault();
const answers = [];
for (const [name, value] of new FormData(form)) {
answers.push(name + ": " + (value instanceof File ? value.name : value));
}
document.getElementById("result").textContent = answers.join("\n") || "No answers entered.";
});
});
document.querySelectorAll("button[type=button]").forEach((button) => {
button.addEventListener("click", () => {
button.closest("form").requestSubmit();
});
});
</script>
</body>
</html>Browser preview
What you see: Check message requires text. Skip check allows an empty answer. The script displays the answer locally without sending or saving it.
Example 2: Another Use
This complete example includes a message form and a button outside it. The button still submits that form because its form attribute matches the form ID.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form and Submit Attributes</title>
</head>
<body>
<form id="message-form">
<label for="message">Message</label>
<input id="message" name="message" required>
</form>
<button type="submit" form="message-form">Submit the message form</button>
<pre id="result" role="status">Your answers will appear here. Nothing is sent or saved.</pre>
<script>
document.querySelectorAll("form").forEach((form) => {
form.addEventListener("submit", (event) => {
event.preventDefault();
const answers = [];
for (const [name, value] of new FormData(form)) {
answers.push(name + ": " + (value instanceof File ? value.name : value));
}
document.getElementById("result").textContent = answers.join("\n") || "No answers entered.";
});
});
document.querySelectorAll("button[type=button]").forEach((button) => {
button.addEventListener("click", () => {
button.closest("form").requestSubmit();
});
});
</script>
</body>
</html>Browser preview
Simple Tip
Use the exact form ID in the button’s form attribute.
Try It Yourself
Try both buttons with an empty message.