3 Tags Problem

3TP is a lightweight JavaScript library that extends HTML's native <form>, <button> and <a> capabilities by introducing <x-form>, <x-button> and <x-a> as web components. These components allow support for PUT, PATCH, and DELETE methods, enable standalone buttons & anchors to perform AJAX actions, and support content replacement without breaking browser compatibility.

Features

• Use PUT, PATCH, and DELETE methods in forms.
• Allow standalone <x-button> elements to send requests without wrapping them in a form.
• Enable <x-form>, <x-button> and <x-a> to update DOM elements dynamically.
• History support with push-url attribute.
• No dependencies.

Installation

Simply include the script in your project:

<script src="3tp.js"></script>

Benefits

HTTP Method Handling:

Native HTML forms default to GET, which can be risky if you're using a library to issue AJAX requests on submission when JavaScript is disabled. In contrast, <x-form>, inheriting from a standard HTMLElement, avoids triggering any requests under these conditions. Consider a hypothetical JS library that issues an AJAX request on form submission:

<form x-delete="/account">
  <input type="password" id="password" name="password" required />
  <button type="submit">Delete Account</button>
</form>

The native form will fall back to GET and expose the password in the URL.

Future Transition:

Simply search and replace x-elements if these enhanced methods become standard in HTML.

Usage

Extended

Works like a regular form but supports additional HTTP methods and dynamic content updates.

<x-form action="/item" method="PUT" target="content">
  <input type="text" name="item" />
  <x-button type="submit">Update</x-button>
</x-form>

Standalone button and anchor tags

Performs an AJAX request without requiring a form.

<x-button action="/item" method="DELETE" target="content"> Delete </x-button>

<x-a action="/item" method="PATCH" target="content"> Patch </x-a>

Dynamic Content Replacement

All tags can update parts of the page dynamically using the target attribute.

<div id="content"></div>

<x-button action="/load-content" method="GET" target="content">
  Load Content
</x-button>

Licence

Zero-Clause BSD
=============

Permission to use, copy, modify, and/or distribute this software for
any purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL
WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES
OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLEs
FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY
DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN
AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT
OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Inspired from

htmx, htmz and the triptych proposals.