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'>
</form>
Name:
Password:

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

Also,

Form elements

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

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.

Say Hello Solution

Hint 1

Text inputs have a value property which is equal to the text that's currently in the input area. This value comes into JavaScript as a string, and all standard string methods work on it.

Hint 2

When working with forms part of the default submit action is to refresh the page, which means you loose any DOM manipulation you might have applied. You can prevent default behaviours from taking place by calling event.preventDefault()

Solution
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title
</head>

<body>
  <form id='name' onsubmit="sayHello(event)">
    <input id="name-input" type='text' />
    <input type='submit' />
  </form>

  <h1 id='display'></h1>

  <script>

    let nameInput = document.getElementById('name-input')
    let display = document.getElementById('display')

    function sayHello (event) {
      event.preventDefault()
      let name = nameInput.value
      let formattedName = name[0].toUpperCase() + name.toLowerCase().slice(1)
      display.textContent = "Hello, " + formattedName + "!"
    }

  </script>
</body>
</html>

References

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form - docs https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms - guide

 Previous Next 

Outline

[menu]

/