Scribd
Upload
2 views

Form_Submission_Methods

Uploaded by

redilos714
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Form_Submission_Methods

Uploaded by

redilos714
Copyright
© © All Rights Reserved
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