Form Submission and File Uploads
What Is It?
Submitting a form sends its named answers to a destination. Uploading a file needs the right form settings and a server to receive it.
What the Tags Mean
action: server destination.method="get": puts answers in a URL query.method="post": sends answers in the request body.enctype="multipart/form-data": needed for file uploads.input type="file": lets a person choose a file.
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 Submission and File Uploads</title>
</head>
<body>
<form method="get">
<label for="search">Search</label>
<input id="search" name="q">
<button type="submit">Submit</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: Submit a word. The demo script shows q and your answer below the form. It prevents the usual GET request so this example works without a server.
Example 2: Another Use
Choose a file and submit. The demo script shows its name without uploading it. A real upload needs a server at the form’s action address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission and File Uploads</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="photo">Choose a photo</label>
<input id="photo" name="photo" type="file" accept="image/*">
<button type="submit">Upload</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
Simple Tip
Selecting a file does not upload it. Submission sends it, and the server must check it.
Try It Yourself
Submit the search form and check the answer shown below it.