Forms contain inputs

a <form> is an HTML element that contains input elements

MDN: form

Form Example

<form method='post'>
  Name: <input type='text' name='name' value='Alice'>
  <br />
  Password: <input type='password' name='password'>
  <br />
  <input type='submit'>

Forms are semantic

Form attributes

<form method='get' action='/login'>

Form Methods: GET vs. POST

Basically, GET is for reading and POST is for writing

but that distinction is often blurry


Form elements

<form method='GET' action='/search'>
  <label>Search by Author: <input type="search" name="author"></label>
  <input type='submit' value='Search'>

There are many more types of form elements (or "widgets") that let the user enter data in a wide variety of formats.

Intercepting forms with JavaScript

Form submission: how does it work?

client-server illustration

  1. The user enters some values into the form elements
  2. Either...
    • the user clicks "Submit"
    • or the user presses Enter in a text field
    • or JavaScript calls form.submit() on the form DOM element
  3. The client sends an HTTP request
    • including parameters like q=apple&submit=Search
    • (yes, the submit button's text label becomes the value)

Forms as Input

Forms are a great way to accept user input in your webpages. The simplest way to handle user input is to create a form with an <input type="text" /> element, and an <input type="submit" /> element.

When the form is submitted you use JavaScript to read the value of the text field, and do whatever manipulations, or actions you need to do based on that input.

Lab: Say Hello

In this lab you will set up an input form where you can enter a name, and the page will display text greeting that name.

References - docs - guide

 Previous Next