Examples

Login and logout

<form action="/session" method="POST">
  <input name="email" type="text">
  <input name="password" type="password">
  <button>Login</button>
</form>

<button action="/session" method="DELETE">Logout</button>

The most basic interaction of a web application, logging in and out, is made fully declarative and trivial to implement.

• No superflous <form>
• Logouts are now idempotent, and can be safely retried
• Using the /session URL for all authentication actions simplifies the backend implementation

Editing a post

<form action="/posts/123" method="PUT">
<!-- Main form submission -->
<textarea name="content">I read the news today; oh boy.</textarea>
<button>Save</button>

<!-- Additional actions -->
<button action="/posts/123" method="GET">Cancel</button>
<button action="/posts/123/draft" method="PUT">Save Draft</button>
<button action="/posts/123" method="DELETE">Delete Post</button>
</form>

This form demonstrates a basic HTML-only interface for editing a previously-submitted post, like one might do on a social media site, comment thread, or forum. Access to flexible <button> elements allows us to describe this interaction entirely with HTTP routes.

PUT /posts/123

Updates the post, replacing it with the contents of the form

GET /posts/123

Navigate away with no changes ("canceling" the update )

PUT /posts/123/draft

Save the post updates as a draft

DELETE /posts/123

Delete the post entirely

Declarative Page Updates

<div id="user-info"></div>
<form action="/users/354" method="PUT" target="#user-info">
  <input type="text" name="name">
  <input type="text" name="bio">
  <button>Submit</button>
</form>

Using the target attribute, this form performs basic partial page replacement. When the form is submitted, it will replace <div id=user-info> with the result of PUT /users/354. This allows the page to update in response to user action without undergoing a full page reload.

Partial page loads are a paradigm that supplements traditional page load, not replaces them. The <a> element is used to load a new, distinct resource, while a partial page replacement is used to update the state of an existing, already-loaded resources in response to user action.