typestar

signup_form.html in HTML

A full signup page: labeled fields, grouped choices, real validation.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create your account - typestar</title>
  <link rel="stylesheet" href="/app.css">
</head>
<body>
  <main>
    <h1>Create your account</h1>
    <form action="/api/signup" method="post" autocomplete="on">
      <fieldset>
        <legend>Account</legend>

        <label for="handle">Handle</label>
        <input type="text" id="handle" name="handle" required
               pattern="[a-z0-9_]{3,20}" aria-describedby="handle-help"
               autocomplete="username" spellcheck="false">
        <p id="handle-help">Lower case, digits and underscores.</p>

        <label for="email">Email</label>
        <input type="email" id="email" name="email" required
               autocomplete="email">

        <label for="password">Password</label>
        <input type="password" id="password" name="password" required
               minlength="12" autocomplete="new-password"
               aria-describedby="pw-help">
        <p id="pw-help">Twelve characters or more.</p>
      </fieldset>

      <fieldset>
        <legend>Starting language</legend>
        <label>
          <input type="radio" name="lang" value="python" checked>
          Python
        </label>
        <label>
          <input type="radio" name="lang" value="sql"> SQL
        </label>
        <label>
          <input type="radio" name="lang" value="rust"> Rust
        </label>
      </fieldset>

      <fieldset>
        <legend>Preferences</legend>
        <label>
          <input type="checkbox" name="digest" value="1" checked>
          Send me a weekly progress digest
        </label>
        <label>
          <input type="checkbox" name="terms" value="1" required>
          I accept the <a href="/terms">terms</a>
        </label>
      </fieldset>

      <input type="hidden" name="source" value="landing">
      <button type="submit">Create account</button>
      <button type="reset">Clear the form</button>
    </form>
  </main>
</body>
</html>

How it works

  1. Every control has a label and an autocomplete hint.
  2. Fieldsets group the checkboxes and radios by question.
  3. aria-describedby ties each field to its help text.

The run, in numbers

Lines
65
Characters to type
1677
Tokens
399
Three-star pace
80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 299 seconds.

Type this snippet

Step 1 of 2 in Encore, step 24 of 25 in Forms & inputs.

← Previous Next →