Scribd
Upload
2 views

Form_Submission_Methods

Uploaded by

redilos714
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Form_Submission_Methods

Uploaded by

redilos714
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Methods to Submit Form in HTML

In HTML, a form can be submitted using different methods. The 'method' attribute of the <form>

element specifies how the form data will be sent to the server. There are primarily two methods used

to submit a form:

1. GET Method:

- Appends form data to the URL in key-value pairs.

- Suitable for non-sensitive data and search forms.

- URL length is limited.

- Example:

<form method="GET" action="process_form.php">

<input type="text" name="username" placeholder="Enter your name">

<input type="submit" value="Submit">

</form>

- The form data will be appended to the URL: process_form.php?username=John

2. POST Method:

- Sends form data in the body of the HTTP request, not visible in the URL.

- Suitable for sensitive data like login forms.

- There is no practical size limit.

- Example:

<form method="POST" action="process_form.php">

<input type="text" name="username" placeholder="Enter your name">

<input type="password" name="password" placeholder="Enter your password">

<input type="submit" value="Submit">


</form>

- Form data is sent in the request body: POST /process_form.php

username=John&password=secret

3. AJAX (Asynchronous JavaScript and XML):

- Allows asynchronous form submission without refreshing the page.

- Useful for dynamic content updates or real-time form validation.

- Example:

<form id="myForm">

<input type="text" name="username" placeholder="Enter your name">

<input type="submit" value="Submit">

</form>

<script>

document.getElementById("myForm").onsubmit = function(event) {

event.preventDefault();

var formData = new FormData(this);

var xhr = new XMLHttpRequest();

xhr.open("POST", "process_form.php", true);

xhr.onload = function() {

if (xhr.status === 200) {

console.log("Form submitted successfully");

} else {

console.log("Error: " + xhr.status);

};

xhr.send(formData);
};

</script>

4. Submit Button (Programmatically Using JavaScript):

- You can also submit a form programmatically using JavaScript by invoking the submit() method

on the form element.

- Example:

<form id="myForm" method="POST" action="process_form.php">

<input type="text" name="username" placeholder="Enter your name">

<input type="submit" value="Submit">

</form>

<button onclick="submitForm()">Submit Form Programmatically</button>

<script>

function submitForm() {

document.getElementById("myForm").submit();

</script>

You might also like