html-form-component

Little library to generate an HTML form and parse the request it submits. Based on html-encode-template-tag.

Usage no npm install needed!

<script type="module">
  import htmlFormComponent from 'https://cdn.skypack.dev/html-form-component';
</script>

README

html-form-component

Little library to generate an HTML form and parse the request it submits. Based on html-encode-template-tag.

import html from 'encode-html-template-tag';
import form from 'html-form-component';

const nameForm = form(
    {
        method: 'POST'
    },
    html`<label>
        What's your name?
        <input name="name">
    </label>
    <button>Submit</button>
    `,
    params => params.get('name')
);

export default async (req, res) => {
    if(req.method==='POST') {
        const name = await nameForm.parse(req);

        res.end(await html`Your name is ${name}`.render());
        return;
    }

    res.end(await nameForm.render());
}

Constants

parser

Create a function for parsing form values from a request object. The new function will recieve the request object and retrieve the submitted form values as URLSearchParams. You can then supply a function for transforming these params before returning them.

Functions

form(attributes, body, parser)FormElement

Creates a form element.

parse(req)URLSearchParams

Parse a request and return a URLSearchParams object

Typedefs

FormElement

A representation of a form element, for rendering a form

parser

Create a function for parsing form values from a request object. The new function will recieve the request object and retrieve the submitted form values as URLSearchParams. You can then supply a function for transforming these params before returning them.

Param Type Description
parseParams function A function that accepts URLSearchParams and returns the parsed form values

form(attributes, body, parser) ⇒ FormElement

Creates a form element.

Param Type Description
attributes Object Dict of attributes to add to the form element
body * Body of the form
parser function Function to transform the request body

parse(req) ⇒ URLSearchParams

Parse a request and return a URLSearchParams object

Param Type Description
req http.IncomingMessage The request object to parse

FormElement

A representation of a form element, for rendering a form

Param Type Description
render function Generate the element as a string
parse function Get the form data from a request object