Form HTML Component

There are few things to know about forms in HTML:

A form gets its field values by using the name attribute of its member inputs.
A form can be submitted by using a button of type='submit'.
Form submission occurs when the user presses the enter key in any of the fields or clicks the submit button.
By default the form submits the current fields (name/value pairs) as url parameters (name=value) to the current page. This is a full page reload.

An example is demonstrated below where

The user can fill in the fields and submit the form.
But we do not yet handle the form submission. This will be covered later below.

App.tsx

import { useState } from "react";

export default function App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  return (
    <>
      <form>
        <label htmlFor="username">Username</label>
        <input
          id="username"
          name="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />

        <label htmlFor="password">Password</label>
        <input
          id="password"
          name="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />

        <button type="submit">Submit</button>
      </form>

      <pre>
        username: {username}, password: {password}
      </pre>
    </>
  );
}

Controlling Form Submission with React

We can override the browser default of full page reload and provide our own custom implementation by:

Removing the name props for the fields as they are only useful for server side form submission. We will instead use the state values.
Using the form.onSubmit prop:
- prevent default behaviour (full page reload with url params) by using event.preventDefault()
- make our own custom API calls in the submit handler

This is demonstrated below where we POST the data ourselves and read the server response without a page reload. This feels more modern and provides a more dynamic / improved user experience.

App.tsx

server/server.js

import { useState } from 'react';

export default function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [serverResponse, setServerResponse] = useState('');

  return (
    <>
      <form onSubmit={async (e) => {
        e.preventDefault();

        const response = await fetch('http://localhost:8080', {
          method: 'POST',
          body: JSON.stringify({ username, password })
        });

        const data = await response.json();
        setServerResponse(data);
      }}>
        <label htmlFor="username">Username</label>
        <input id="username"
          value={username} onChange={e => setUsername(e.target.value)} />

        <label htmlFor="password">Password</label>
        <input id="password"
          type="password" value={password} onChange={e => setPassword(e.target.value)} />

        <button type="submit">Submit</button>
      </form>

      <pre>username: {username}, password: {password}</pre>

      <pre>Server Response: {JSON.stringify(serverResponse, null, 2)}</pre>
    </>
  );
}

Custom Form Component

To make it easier to use forms in our react applications we can create a custom Form component that consolidates a few core features:

Prevents browser default form submission that results in a page reload.
Ensure that the consumers provide an onSubmit prop for their own custom form handling.

Form.tsx

App.tsx

server/server.js

export type FormProps = {
  /** Automatically prevents the default browser reload behavior */
  onSubmit: () => void,
  children?: React.ReactNode,
}

export const Form: React.FC<FormProps> = ({ onSubmit, children }) => (
  <form
    onSubmit={
      (e) => {
        /** Prevent submit from reloading the page */
        e.preventDefault();
        onSubmit();
      }
    }>
    {children}
  </form>
);

Buttons should always have a `type` attribute

Ensure that all button components have a type attribute.

If the use case is standard button use type='button'.
If the use case is to submit the form use type='submit'.

If you do not provide the type attribute it defaults to type='submit' which might not be what you want.

As an example, we have a few buttons in the below form that have type='button' as they are not intended for form submission. If we forget to provide the type it defaults to type='submit' and submit the form by mistake.

App.tsx

import { useState } from "react";
import { Form } from "./Form";

export default function App() {
  const [username, setUsername] = useState("");

  return (
    <>
      <Form
        onSubmit={() => {
          alert("Submitted!");
        }}
      >
        <label htmlFor="username">Username</label>
        <input
          id="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />

        {/* Ensure that buttons not intended for form submission have `type='button'` */}
        <div>
          <button type="button" onClick={() => setUsername("Alpha")}>Alpha</button>
          <button type="button" onClick={() => setUsername("Beta")}>Beta</button>
          {/* Without type="button" it submits the form as a side-effect 😱 */}
          <button onClick={() => setUsername("Gamma")}>Gamma</button>
        </div>

        <button type="submit">Submit</button>
      </Form>
    </>
  );
}

Disabling Forms

The html form element doesn't take a disabled attribute. However, a form can be disabled by providing the disabled attribute on the submission button button.type='submit'.

This is demonstrated in the example below.

App.tsx

import { useState } from "react";
import { Form } from "./Form";

export default function App() {
  const [message, setMessage] = useState("");
  const error = !message.trim() ? "Message is required" : null;

  return (
    <>
      <Form
        onSubmit={() => {
          alert("Submitted! " + message);
        }}
      >
        <label htmlFor="message">Message</label>
        <input
          id="message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        {error && <div style={{ color: "purple" }}>{error}</div>}

        {/* You can disable a form submission by disabling the submit button */}
        <button type="submit" disabled={!!error}>
          Submit
        </button>
      </Form>
    </>
  );
}

Transcript