Applications with Rullst I · Lesson 05 / 14

A form that guides

Saving should make sense with a keyboard and without relying only on color.

Let's discover together

1
Open web/index.html: label for="title" links to input id="title". Clicking the label moves focus. The button is type="submit" inside a form. Use native elements before inventing buttons from divs and click events.
2
Navigate with Tab, Shift+Tab, Enter and Space. Focus should be visible; checkbox text includes title and state. The list is recreated after an update, so JavaScript returns focus to the checkbox for the same mission.
3
The role="status" and aria-live="polite" region reports loading and results without interrupting all reading. These attributes alone do not prove accessibility: check keyboard, contrast, zoom and, where possible, assistive technology with someone who uses it.
4
The kit uses JavaScript to send JSON; without it, noscript gives guidance, not a working alternate form. required helps prevent empty input, but spaces can pass. Actual title and priority validation is on the server, explored next.

Your application workbench

The kit includes a complete app to investigate and modify. The excerpt below explains this step; the editor contains the indicated file. Rullst Academy does not compile or run this server in your browser.

File to study and modify

web/index.html

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

Extract the kit to a new folder and open a terminal beside Cargo.toml. Use Rust 1.96+; the first build may download dependencies and take time. Then open http://127.0.0.1:3010. Stop with Ctrl+C and run again after editing.

cargo test --locked
cargo run --locked

My files and GitHub

Download your draft and replace the indicated file in your extracted copy. The editor saves one file in this browser; your account saves assessments and XP. The ZIP excludes your edits. GitHub sends only the confirmed file; use Git manually for the whole app, excluding databases, backups and secrets.

Official links and next step

✦

YOUR MISSION

Connect labels, focus and feedback with the action sent to the server.

Take it with you

Use the page at 320 px and 200% zoom. Create a mission using only the keyboard. Record a real obstacle and an improvement; do not mark a checklist passed without performing the check.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Your path, step by step

Download activity materials

Download the lesson example and a workbook for your notes. The ZIP includes a guide to organizing activities in one or more repositories. Publishing is optional; eligible accounts can also use the GitHub upload button.

Your file for this lesson

Edit the example or record what you learned. This space does not run code or grade answers. The draft is saved only in this browser, separately per account; you choose when to download or upload to GitHub.

The example may be only a snippet or outline. Changing the extension does not make it a complete program. The activity ZIP contains starting material; the edited-file button downloads your text.

My code or notes

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

File format

Your text will be saved in this browser when you edit it. On a shared computer, clear your drafts when finished.

Direct upload accepts up to 8 KiB of text in one file. Use downloads and the manual guide for projects with multiple files.

A form that guides

Let's discover together

Your application workbench

File to study and modify

Official links and next step

Now it's your turn

Decide before running

Take it with you

My files and GitHub

Your file for this lesson

Save to my GitHub

Rullstpetbot