typestar

signup_form.html en HTML

Una página de registro completa: campos con label, opciones agrupadas, validación real.

<!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>

Cómo funciona

  1. Cada control tiene su label y su pista de autocomplete.
  2. Los fieldsets agrupan casillas y radios por pregunta.
  3. aria-describedby une cada campo con su texto de ayuda.

El intento, en números

Líneas
65
Caracteres a escribir
1677
Tokens
399
Ritmo de tres estrellas
80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 299 segundos.

Escribe este fragmento

Paso 1 de 2 en Bis; paso 24 de 25 en Formularios y entradas.

← Anterior Siguiente →