Aplicaciones con Rullst I · Lección 05 / 14

Un formulario que orienta

Guardar debe ser comprensible con teclado y sin depender solo del color.

Vamos a descubrir juntos

1
Abre web/index.html: label for="title" se enlaza con input id="title". Pulsar la etiqueta mueve el foco. El botón es type="submit" dentro de un form. Usa elementos nativos antes de crear botones con div y eventos de clic.
2
Navega con Tab, Shift+Tab, Enter y Espacio. El foco debe verse; el texto del checkbox incluye título y estado. La lista se recrea tras actualizar, por eso JavaScript devuelve el foco al checkbox de la misma misión.
3
La región role="status" y aria-live="polite" comunica carga y resultados sin interrumpir toda la lectura. Estos atributos no prueban accesibilidad: comprueba teclado, contraste, zoom y, si es posible, tecnología asistiva con quien la use.
4
El kit usa JavaScript para enviar JSON; sin él, noscript orienta, pero no ofrece otro formulario funcional. required evita vacíos, pero pueden pasar espacios. La validación real de título y prioridad está en el servidor y se estudia después.

Tu mesa de aplicaciones

El kit incluye la aplicación completa para investigar y modificar. El fragmento explica esta etapa; el editor contiene el archivo indicado. Rullst Academy no compila ni ejecuta este servidor en el navegador.

Archivo para estudiar y modificar

web/index.html

<label for="title">Mission title</label>
<input id="title" name="title" required>
<p role="status" aria-live="polite"></p>

Extrae el kit en una carpeta nueva y abre el terminal junto a Cargo.toml. Usa Rust 1.96+; la primera compilación puede descargar dependencias y tardar. Abre http://127.0.0.1:3010. Detén con Ctrl+C y ejecuta de nuevo tras editar.

cargo test --locked
cargo run --locked

Mis archivos y GitHub

Descarga tu borrador y sustituye el archivo indicado en tu copia extraída. El editor guarda un archivo en este navegador; tu cuenta guarda evaluaciones y XP. El ZIP excluye tus cambios. GitHub envía solo el archivo confirmado; usa Git manual para la aplicación entera, sin bases, respaldos ni secretos.

Enlaces oficiales y siguiente paso

✦

TU MISIÓN

Relacionar etiquetas, foco y feedback con la acción enviada al servidor.

Llévatelo contigo

Usa la página a 320 px y zoom del 200%. Crea una misión solo con teclado. Registra un obstáculo real y una mejora; no marques una lista como aprobada sin realizar la comprobación.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Mission board · Rullst Academy</title><link rel="stylesheet" href="/style.css">
  <script src="/app.js" defer></script>
</head>
<body>
<header><span>Rullst Academy · Rullst 12.1</span><label><span data-i18n="language">Language</span>
  <select id="language"><option value="pt-BR">Português</option><option value="en" selected>English</option><option value="es">Español</option></select></label></header>
<main>
  <p class="eyebrow" data-i18n="lab">Local learning project</p>
  <h1 data-i18n="title">Mission board</h1>
  <p data-i18n="boundary">Use fictional tasks. This local app has no accounts or permissions and is not ready for public hosting.</p>
  <form id="mission-form">
    <h2 data-i18n="new">A new mission</h2>
    <label for="title" data-i18n="task">Mission title</label>
    <input id="title" name="title" required aria-describedby="title-help">
    <p id="title-help" class="help" data-i18n="help">Use 1–80 Unicode code points after trimming spaces. The server checks the rule too.</p>
    <label for="priority" data-i18n="priority">Priority</label>
    <select id="priority" name="priority"><option value="1" data-i18n="low">1 · Low</option><option value="2" data-i18n="medium">2 · Medium</option><option value="3" data-i18n="high">3 · High</option></select>
    <button type="submit" data-i18n="add">Save mission</button>
  </form>
  <section aria-labelledby="list-heading">
    <div class="section-heading"><h2 id="list-heading" data-i18n="missions">Saved missions</h2><button id="refresh" type="button" data-i18n="refresh">Refresh</button></div>
    <p data-i18n="order">Up to 100 missions, highest priority first, then oldest id. Titles can repeat; ids are stable.</p>
    <p id="status" role="status" aria-live="polite"></p>
    <ul id="missions"></ul>
  </section>
  <noscript>This project needs JavaScript for the form. Study the API with the Rust tests, or enable JavaScript. Este formulário usa JavaScript. Este formulario usa JavaScript.</noscript>
</main>
</body></html>

Formato del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Un formulario que orienta

Vamos a descubrir juntos

Tu mesa de aplicaciones

Archivo para estudiar y modificar

Enlaces oficiales y siguiente paso

Ahora te toca

Decide antes de ejecutar

Llévatelo contigo

Mis archivos y GitHub

Tu archivo de esta lección

Guardar en mi GitHub

Rullstpetbot