https://github.com/knowler/log-form-element
A custom element that will log a form’s submissions to the console.
https://github.com/knowler/log-form-element
custom-elements web-components
Last synced: 11 months ago
JSON representation
A custom element that will log a form’s submissions to the console.
- Host: GitHub
- URL: https://github.com/knowler/log-form-element
- Owner: knowler
- License: unlicense
- Created: 2023-12-01T18:32:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-06T03:13:58.000Z (over 1 year ago)
- Last Synced: 2025-04-05T02:51:15.225Z (about 1 year ago)
- Topics: custom-elements, web-components
- Language: JavaScript
- Homepage: https://knowler.github.io/log-form-element/
- Size: 14.6 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-standalones - `<log-form>`
README
# ``: Log Form element
Wrap a `` element with this `` element and when submitted,
instead of using the default action, it’ll log the form data to the console.
## Usage
The element is published on [JSR][] (which can be used as an NPM registry) or
you can use a CDN like [esm.sh][] to import the module.
By default, the module exports the class for you to define yourself. The class
has a `define()` method which can be used to easily define the element either
using a default tag name of `log-form` or whatever one you pass it.
```javascript
import { LogFormElement } from "https://esm.sh/jsr/@knowler/log-form-element";
LogFormElement.define();
```
You can also add a `?define` search param to the module’s URL which it’ll use to
automatically register the custom element using the default tag name. If you are
using a CDN, you might need to add a `?raw` param so that the `define` param
applies to module URL itself.
```html
```
Once the element is registered. You can wrap `` elements with it and then
open your console to debug submission.
```html
Pizza toppings
Submit
```
## Examples
- [Basic](https://knowler.github.io/log-form-element/examples/basic)
- [Auto-define](https://knowler.github.io/log-form-element/examples/auto-define)
[JSR]: https://jsr.io/
[esm.sh]: https://esm.sh/
[jsr:@knowler/log-form-element]: https://jsr.io/@knowler/log-form-element