E1 · The two forms
4 minRun the block and compare the search and booking lines.
Done when: node scripts/declarativa.mjs nativo → enviado? não, esperando a pessoa and pessoa clicou em Reservar → {"reservado":true, and saída: 0.
Lesson 6 · 14 min
Form as a tool: toolname and toolautosubmit (experimental, outside the spec)
Chrome lets a form become a tool with three HTML attributes. It's the shortest path for anyone who already has a well-labeled form, but it was left out of the 10/16/2026 spec: it exists in Chrome's origin trial and in a temporary layer of the polyfill. In this lesson you use it with that label and decide when the form can submit itself.
Start the lesson
In this lesson you will
- 1toolname, tooldescription, and toolparamdescription
- 2The schema the browser builds from the fields
- 3toolautosubmit only for what only reads
- 4agentInvoked and respondWith on submit
Goal: turn a form into a tool with toolname, knowing it's experimental and outside the spec, and decide when to use toolautosubmit.
01From form to tool
Experimental as of 10/19/2026, outside the spec. Click each step.
Use the imperative API (lessons 3 to 5) as your base. The declarative form is an extra: if it goes away, the form is still just a form.
WebMCP README: "Future Exploration… not part of the specification at this time". Chrome documents it and implements it in the trial (page updated on 09/25/2026).
02Two forms: one submits itself, the other waits
Excerpt from kit/pagina/declarativa.html. The search only reads and can use toolautosubmit; the booking has an effect and waits for the click.
Excerpt · kit/pagina/declarativa.html (HTML)
<!-- Só lê: pode enviar sozinho (toolautosubmit). -->
<form id="f-busca" toolname="buscar_oficinas_form" tooldescription="Busca oficinas da agenda por tema. Só lê." toolautosubmit>
<label for="d-tema">Tema</label>
<select id="d-tema" name="tema" required toolparamdescription="Tema da oficina.">
<option value="html">HTML</option><option value="javascript">JavaScript</option>
<option value="webmcp">WebMCP</option><option value="mcp">MCP</option>
</select>
<button type="submit">Buscar</button>
</form>
<!-- Tem efeito: SEM toolautosubmit. O agente preenche, a pessoa clica em Reservar. -->
<form id="f-reserva" toolname="reservar_vaga_form" tooldescription="Preenche a reserva de uma vaga. Quem envia é a pessoa, clicando em Reservar.">
<label for="d-id">Oficina (id)</label>
<input id="d-id" name="id" required pattern="of-[0-9]{3}" toolparamdescription="Id da oficina, ex.: of-301.">
<label for="d-nome">Seu nome</label>
<input id="d-nome" name="nome" required minlength="2">
<button type="submit">Reservar</button>
</form>Excerpt · kit/pagina/declarativa.html (submit)
$('#f-busca').addEventListener('submit', e => {
e.preventDefault();
const lista = agenda.buscar({ tema: $('#d-tema').value });
$('#d-resultados').replaceChildren(...lista.map(o => Object.assign(document.createElement('li'), { textContent: `${o.id} · ${o.titulo}` })));
if (e.agentInvoked) e.respondWith(Promise.resolve({ total: lista.length, ids: lista.map(o => o.id) }));
});Terminal · native and polyfill
cd ~/projetos/formacao-webmcp-site-v72/kit node scripts/declarativa.mjs nativo; echo "saída: $?" node scripts/declarativa.mjs polyfill; echo "saída: $?"
Example from the repository
== Chromium 156.0.8078.4 (Playwright) · modo: nativo
ferramenta do formulário: buscar_oficinas_form · campos: tema
ferramenta do formulário: reservar_vaga_form · campos: id, nome
buscar_oficinas_form (toolautosubmit): {"total":1,"ids":["of-301"]}
reservar_vaga_form preencheu: id=of-301 nome=Rita · enviado? não, esperando a pessoa
pessoa clicou em Reservar → {"reservado":true,"reserva":{"id":"of-301","nome":"Rita","titulo":"Primeira ferramenta WebMCP"}}
saída: 0
== Chromium 156.0.8078.4 (Playwright) · modo: polyfill
ferramenta do formulário: buscar_oficinas_form · campos: tema
ferramenta do formulário: reservar_vaga_form · campos: id, nome
buscar_oficinas_form (toolautosubmit): {"total":1,"ids":["of-301"]}
reservar_vaga_form preencheu: id=of-301 nome=Rita · enviado? não, esperando a pessoa
pessoa clicou em Reservar → {"reservado":true,"reserva":{"id":"of-301","nome":"Rita","titulo":"Primeira ferramenta WebMCP"}}
saída: 0The search returns right away (toolautosubmit). The booking stays filled in and paused until the click: declarativa.mjs plays the part of the person.
With toolautosubmit on the booking form, the agent fills it in and submits it without the person seeing. Save automatic submission for what only reads. And remember: respondWith requires preventDefault() first, otherwise the browser goes ahead with the normal submission.
03Practice
Native and polyfill. Each exercise ends with a done when.
E2 · A form of your own
15 minTake a search form from your site (read-only), add toolname, tooldescription, and toolparamdescription to a local copy. Leave a comment in the HTML: experimental, outside the spec, date.
Done when: PAGINA=[your folder] node scripts/listar.mjs nativo [file].html → the line with your toolname; in sem mode, the form submits as before. The comment with the date is in the HTML.
04Lesson quiz
The explanation appears after your answer.
Question 1 of 4
What is the status of the declarative API (toolname) as of 10/19/2026?
Correct
The README says it is future exploration, outside the spec. Chrome documents it and implements it in the trial. That is why the course puts the "experimental, outside the spec" badge on it.Not that one
The README says it is future exploration, outside the spec. Chrome documents it and implements it in the trial. That is why the course puts the "experimental, outside the spec" badge on it.Review: From form to toolQuestion 2 of 4
When should you use toolautosubmit?
Correct
Auto-submit takes the person out of the loop. For a search, that's fine; for a booking, the form should wait for the click.Not that one
Auto-submit takes the person out of the loop. For a search, that's fine; for a booking, the form should wait for the click.Review: Two forms: one submits itself, the other waitsQuestion 3 of 4
How does the submit know the agent filled in the form?
Correct
SubmitEvent gains agentInvoked (true when it came from the agent) and respondWith(promise) to return the result, after preventDefault().Not that one
SubmitEvent gains agentInvoked (true when it came from the agent) and respondWith(promise) to return the result, after preventDefault().Review: Two forms: one submits itself, the other waitsQuestion 4 of 4
With no toolparamdescription on a field, where does Chrome get the description?
Correct
According to the Chrome docs (09/25/2026), with no toolparamdescription the browser uses the associated label; with no label, the aria-description. A well-labeled form already helps.Not that one
According to the Chrome docs (09/25/2026), with no toolparamdescription the browser uses the associated label; with no label, the aria-description. A well-labeled form already helps.Review: From form to toolQuiz complete
You got {a} of {n} right. Get them all right and the lesson is marked as complete.Pick an answer. The explanation shows up after you try.
05In three sentences
Outside the spectoolname/tooldescription/toolautosubmit exist in Chrome in trial, not in the 10/16/2026 spec.
Who submitstoolautosubmit only on what only reads; everything else waits for the person's click.
FoundationThe imperative API is the foundation; the declarative form is an extra and keeps working without the API.