Aplicações com Rullst I · Lição 05 / 14

Um formulário que orienta

Salvar deve ser compreensível com teclado e sem depender apenas de cor.

Vamos descobrir juntos

1
Abra web/index.html: label for="title" se liga ao input id="title". Clicar no rótulo move o foco. O botão é type="submit" e pertence a um form. Use elementos nativos antes de inventar botões com div e eventos de clique.
2
Percorra com Tab, Shift+Tab, Enter e Espaço. O foco deve aparecer; o checkbox anuncia o título e o estado por texto. A lista é recriada após uma atualização, então o JavaScript devolve o foco ao checkbox da mesma missão.
3
A região role="status" e aria-live="polite" informa carregamento e resultado sem interromper toda a leitura. Não conclua acessibilidade por esses atributos: confira teclado, contraste, zoom e, quando possível, tecnologia assistiva com uma pessoa que a utiliza.
4
O kit usa JavaScript para enviar JSON; sem ele, há uma orientação noscript, não um formulário alternativo funcional. required ajuda a evitar vazio, mas espaços podem passar. A validação real de título e prioridade está no servidor e será investigada na próxima lição.

Sua bancada de aplicações

O kit inclui o aplicativo completo para investigar e modificar. O trecho abaixo explica esta etapa; o editor contém o arquivo indicado. A Rullst Academy não compila nem executa esse servidor no navegador.

Arquivo para estudar e modificar

web/index.html

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

Extraia o kit numa pasta nova e abra o terminal junto a Cargo.toml. Use Rust 1.96+; o primeiro build pode baixar dependências e demorar. Depois abra http://127.0.0.1:3010. Pare com Ctrl+C e execute novamente após editar.

cargo test --locked
cargo run --locked

Meus arquivos e GitHub

Baixe seu rascunho e substitua o arquivo indicado na sua cópia extraída. O editor guarda um arquivo neste navegador; a conta guarda avaliações e XP. O ZIP não contém suas alterações. GitHub envia só o arquivo confirmado; para o aplicativo completo use Git manual, sem bancos, backups ou segredos.

Links oficiais e próximo passo

✦

SUA MISSÃO

Relacionar rótulos, foco e feedback com a ação enviada ao servidor.

Agora é a sua vez

Oficina de descobertas

Decida antes de executar

Relacionar rótulos, foco e feedback com a ação enviada ao servidor.

01O atributo for do rótulo deve corresponder a qual atributo do campo?02Depois de atualizar a missão, para onde volta o foco?

Monte suas respostas e confira quando estiver pronto.

Uma pausa para entender

O que required garante neste exemplo?

Uma checagem do navegador, que não substitui o servidorQue toda entrada é segura e autorizadaQue a missão já foi salva

Preciso de uma pista

Controles da interface podem ser contornados. O servidor precisa validar sua própria entrada.

Carregando sua jornada…

Leve com você

Use a página a 320 px e com zoom de 200%. Faça uma missão apenas com teclado. Registre um obstáculo real e uma melhoria; não marque uma lista como aprovada sem executar a verificação.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

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

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.

Um formulário que orienta

Vamos descobrir juntos

Sua bancada de aplicações

Arquivo para estudar e modificar

Links oficiais e próximo passo

Agora é a sua vez

Decida antes de executar

Leve com você

Meus arquivos e GitHub

Seu arquivo desta lição

Guardar no meu GitHub

Rullstpetbot