25.2. Form Submission

Forms collect data input by the user. As we learned in the previous chapter, communication on the web occurs via a series of HTTP requests and responses. A form submission is an HTTP request sent to the server containing the values in a form.

25.2.1. Trigger Form Submission

A form submission is triggered by clicking a button inside the form. A submit button can be an input element with type=submit or a button element. Both button types are in the below example.

1
2
3
4
5
6
<form>
   <label>Username <input type="text" name="username"></label>
   <!-- clicking either of these will cause a form submission -->
   <input type="submit"/>
   <button>Submit</button>
</form>

When a form is submitted, an HTTP request is sent to the location set in the action attribute of the <form> tag.

If the action attribute is not present or is empty, then the form will submit to the URL of the current page.

Try It!

Open this form in a browser. Type values into the inputs, click the Submit button, and notice what happens to the address bar.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
   <head>
      <title>Form Example</title>
      <style>
         body { padding: 25px;}
      </style>
   </head>
   <body>
      <form action="">
         <label>Username <input type="text" name="username"></label>
         <label>Team Name <input type="text" name="team"></label>
         <button>Submit</button>
      </form>
   </body>
</html>

Output

Browser screen shot showing form with two text inputs and a submit button. Both inputs have text values.

Output After Submitted

Browser screen shot showing form after it has been submitted. The URL has queryString showing.

Run it.

Notice in the above example that the browser address has changed to:

https://form-default--launchcode.repl.co/?username=salina&team=Space+Coders

The web address is the same as the form we loaded, but now includes a query parameter for every input, with a name, in the form. These parameters are known as the query string parameters. The form values are submitted via the query string because the default submission type for forms is GET. In the next section, we will soon learn how to submit form data via POST.

Note

Since spaces are not allowed in URLs, the browser replaces them with +.

25.2.1.1. Key-value Pairs

When a form is submitted a key-value pair is created for each named input. The keys are the values of the name attributes, and they are paired with the content of the value attributes.

Form with two named inputs:

<form action="">
   <label>Username <input type="text" name="username"></label>
   <label>Team Name <input type="text" name="team"></label>
   <button>Submit</button>
</form>

When this form is submitted with the values from the previous example, the query string looks like this:

username=salina&team=Space+Coders

25.2.2. Check Your Understanding

Question

What must be added to a form to enable submission?

Question

By default, are HTTP forms submitted with GET or POST?