Submitting forms

This video tutorial explains how to create a form which can accept a username and password, and then submit the form data. The video only explains how to use the text and password input types in a form and provides an overview of the two methods of submitting form data: the post and get methods. The next tutorials will explain how to actually validate the data submitted in a form.

A form can be submitted using server-side code eg. PHP. A PHP file would be able to use the form data and send it to a database. In the action section of the form, you specify the file that is going to use the form data and the method (how the form data is used). As there is no PHP file for the example below, the form will not actually work properly, but this is just to show how it should be set out.

We can use the get method or the post method. The GET method is used for purposes such as a search engine, and attaches the information to the URL of the web page. For example, when using the search terms “cricket world cup” on Twitter, you will see the keywords attached to the URL of the search results page like this:

https://twitter.com/search?q=cricket%20world%20cup

The GET method is not secure as information that is submitted is highly visible in the URL. The POST method sends information to the server separately (and does not go in as part of the URL).  The POST method is the more secure method and is used for user logins, membership signup forms, and shopping carts.

Watch the video below and then scroll down the page to see the code.

Note that this tutorial does not actually involve any JavaScript – just an HTML form. JavaScript will be used in the next tutorial when we look at how to validate form data. Here is the code for this tutorial:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Submitting Forms</title>
 <script type="text/javascript">
 
 // A form can be submitted using server-side code eg. PHP.
 // A PHP file would be able to use the form data and send it to a database.
 // In the action section, you specify the file that is going to use the form data
 // and the method is how the form data is used. As there is no PHP file here
 // the form will not actually work properly, but this is how it should be set out.
 // We can use the get method or the post method. The post method sends information to the server
 // separately (and does not go in as part of the URL). POST is the more secure method eg. for a login.
 // The GET method is used for purposes such as a search engine.
 
 </script>
 
</head>
<body>
 
<form action="another_file.php" method="post">
 Username: <input type="text" name="username"/>
 Password: <input type="password" name="password"/>
 <input type="submit" value="Login"/>
</form>
 
</body>
</html>

Next tutorial: Validating form data