Forms

A form is a way for us to collect user input.

<form>

The <form> element is mostly a semantic container for anything where the user is submitting data.

<input>

The <input> element is the most used form element.

The input element can include the name attribute. This is useful for traditional form submissions, as it determines the name of what data is being submitted.

Note that the submit type creates a button with the value "Submit" already in it.

<label>

Labels allow us to better describe an input or form

For toggleable forms, clicking the label will also toggle the input.

<select>

<select> defines a drop-down list

We use the <option> element to define an option that can be selected

By default, the first option is selected, but alternatively we can define a pre-selected option by using the selected attribute.

NOTE: The selected attribute is a boolean attribute, and we apply it directly to the option we would like to have pre-selected.

Form Submission

Form submission is quite complex. Firstly, we have the built-in HTML form submission. However, we also have a JavaScript based approach.

Traditional

  1. User fills out the form. An example form might look like:

  2. User submits the form

    3. The button of type="submit" tells the browser to submit the <form> containing that button.

    Submission can also occur from pressing Enter while in a form control.

    Inside the form element...

    • The action attribute tells the browser WHERE to send the data.
    • The method attribute tells the browser HOW to send the data.

  3. Browser constructs form data as key-value pairs

  4. Browser constructs an HTTP request

    5. In this example, the browser makes a POST request

  5. The request travels to the server, gets processed via a program

  6. The server sends an HTTP response

    7. For instance, the server might send back a redirect. The browser receives that response, and then makes a request to get that page.

Using JavaScript

    WIP WIP WIP