{"id":39612837,"url":"https://github.com/what1s1ove/form-payload","last_synced_at":"2026-01-18T08:12:10.234Z","repository":{"id":45381739,"uuid":"342649852","full_name":"what1s1ove/form-payload","owner":"what1s1ove","description":"Gets proper form payload – via form.elements.","archived":false,"fork":false,"pushed_at":"2025-11-05T10:45:23.000Z","size":852,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-17T03:34:03.045Z","etag":null,"topics":["form","form-controls","form-data","form-handling","form-values"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/form-payload","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/what1s1ove.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-02-26T17:27:50.000Z","updated_at":"2025-11-05T10:45:15.000Z","dependencies_parsed_at":"2023-12-18T18:27:29.076Z","dependency_job_id":"e0d3290e-814b-4ca6-87e4-92d58168c212","html_url":"https://github.com/what1s1ove/form-payload","commit_stats":{"total_commits":116,"total_committers":3,"mean_commits":"38.666666666666664","dds":"0.017241379310344862","last_synced_commit":"130d54f9ac56e518d78c8fbdb52227cdbf6ce1be"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/what1s1ove/form-payload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what1s1ove%2Fform-payload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what1s1ove%2Fform-payload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what1s1ove%2Fform-payload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what1s1ove%2Fform-payload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/what1s1ove","download_url":"https://codeload.github.com/what1s1ove/form-payload/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what1s1ove%2Fform-payload/sbom","scorecard":{"id":1239346,"data":{"date":"2025-10-20","repo":{"name":"github.com/what1s1ove/form-payload","commit":"ab04dcc7e5bb0448de809dbf71aa93f1bcd83807"},"scorecard":{"version":"v5.3.1-0.20251020080748-9e702f4c9dc6","commit":"9e702f4c9dc6992745395f4c8ac89942d0cf87ea"},"score":3.1,"checks":[{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/19 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: jobLevel 'contents' permission set to 'write': .github/workflows/cd.yml:21","Info: jobLevel 'contents' permission set to 'read': .github/workflows/ci-pr.yml:75","Warn: no topLevel permission defined: .github/workflows/cd.yml:1","Warn: no topLevel permission defined: .github/workflows/ci-pr.yml:1","Warn: no topLevel permission defined: .github/workflows/ci.yml:1"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:124: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:127: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:133: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/cd.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:107: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/cd.yml:61","Warn: npmCommand not pinned by hash: .github/workflows/ci-pr.yml:45","Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:37","Info:   0 out of  29 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   3 third-party GitHubAction dependencies pinned","Info:   0 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#security-policy"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#packaging"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: some github tokens can't read classic branch protection rules: https://github.com/ossf/scorecard-action/blob/main/docs/authentication/fine-grained-auth-token.md","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/9e702f4c9dc6992745395f4c8ac89942d0cf87ea/docs/checks.md#sast"}}]},"last_synced_at":"2025-10-30T11:46:10.490Z","repository_id":45381739,"created_at":"2025-10-30T11:46:10.500Z","updated_at":"2025-10-30T11:46:10.500Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28534135,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-controls","form-data","form-handling","form-values"],"created_at":"2026-01-18T08:12:10.107Z","updated_at":"2026-01-18T08:12:10.201Z","avatar_url":"https://github.com/what1s1ove.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# form-payload\n\n[![Continuous Integration](https://github.com/what1s1ove/whatislove.dev/actions/workflows/ci.yml/badge.svg)](https://github.com/what1s1ove/whatislove.dev/actions/workflows/ci.yml)\n[![Continuous Delivery](https://github.com/what1s1ove/whatislove.dev/actions/workflows/cd.yml/badge.svg)](https://github.com/what1s1ove/whatislove.dev/actions/workflows/cd.yml)\n\nGets _proper_ form payload – via `form.elements`.\n\n## Install\n\n```\nnpm install form-payload\n```\n\n## Demo\n\nThe library works perfectly with any framework. Just use a valid [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) and [form elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements). If you want to add validation or any other functionality, create wrappers on top of the exported functions from the **form-payload** library.\n\n- [Pure JavaScript](https://stackblitz.com/edit/form-payload-javascript?file=index.js)\n- [TypeScript + Validation](https://stackblitz.com/edit/form-payload-typescript?file=index.ts,get-form-payload.ts)\n- [React + TypeScript](https://stackblitz.com/edit/form-payload-react?file=src%2FApp.tsx)\n\n## Usage\n\n\u003c!-- prettier-ignore-start --\u003e\n```html\n\u003cform name=\"resume\"\u003e\n  \u003clabel\u003eCV: \u003cinput type=\"file\" name=\"resume\"\u003e\u003c/label\u003e\n\u003c/form\u003e\n\n\u003cform name=\"mailing\"\u003e\n  \u003clabel\u003eEmail: \u003cinput type=\"email\" name=\"mail\" value=\"e@mail.com\"\u003e\u003c/label\u003e\n\u003c/form\u003e\n\n\u003cform name=\"general\"\u003e\n  \u003clabel\u003eName: \u003cinput type=\"text\" name=\"name\" value=\"John\"\u003e\u003c/label\u003e\n  \u003clabel\u003eDOB: \u003cinput type=\"date\" name=\"dob\" value=\"2021-03-27\"\u003e\u003c/label\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\n  import { getFormPayload, getFormControlPayload } from 'form-payload';\n\n  const {\n    resume: resumeFormNode,\n    mailing: mailingFormNode,\n    general: generalFormNode,\n  } = document.forms;\n\n  resumeFormNode.addEventListener('change', (evt) =\u003e {\n    // ❌ bad (hard to read, magic numbers, bulky, outdated approach)\n    const file = evt.target.files?.[0] || null;\n\n    // 🟡 better (modern, clear, but repetitive approach – violates DRY)\n    const [file = null] = env.target.files ?? [];\n\n    // ✅ ideal\n    const file = getFormControlPayload(evt.target);\n    // =\u003e File or null\n  });\n\n  mailingFormNode.addEventListener('input', (evt) =\u003e {\n    const formControlPayload = getFormControlPayload(evt.target);\n    // =\u003e 'e@mail.com'\n  });\n\n  generalFormNode.addEventListener('submit', (evt) =\u003e {\n    evt.preventDefault();\n\n    const formPayload = getFormPayload(generalFormNode);\n    // =\u003e { name: 'John', dob: 'Sat Mar 27 2021 02:00:00 GMT+0200' }\n  });\n\u003c/script\u003e\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n## Value Correspondence Table\n\n| HTMLElement                                                                                 | Attributes                                                                                                                                                                                                                                                                                                                                                                   | Included | Return Value                                                                                        |\n| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------- |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"text\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)                                                                                                                                                                                                                                                                                        | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"password\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)                                                                                                                                                                                                                                                                                | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"search\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)                                                                                                                                                                                                                                                                                    | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"url\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url)                                                                                                                                                                                                                                                                                          | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"tel\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel)                                                                                                                                                                                                                                                                                          | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"color\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color)                                                                                                                                                                                                                                                                                      | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"radio\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)                                                                                                                                                                                                                                                                                      | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"hidden\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden)                                                                                                                                                                                                                                                                                    | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"email\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email)                                                                                                                                                                                                                                                                                      | ✅       | `string`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"email\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email) and [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)                                                                                                                                                                                              | ✅       | `Array\u003cstring\u003e`                                                                                     |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"number\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)                                                                                                                                                                                                                                                                                    | ✅       | `number`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"range\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)                                                                                                                                                                                                                                                                                      | ✅       | `number`                                                                                            |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"checkbox\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)                                                                                                                                                                                                                                                                                | ✅       | `boolean`                                                                                           |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"checkbox\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) and with `[]` in [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)                                                                                                                                                                                | ✅       | `Array\u003cstring\u003e` (See [advanced usage](#htmlinputelement-with-typecheckbox-as-array))                |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"date\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)                                                                                                                                                                                                                                                                                        | ✅       | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)     |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"time\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)                                                                                                                                                                                                                                                                                        | ✅       | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)     |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"month\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month)                                                                                                                                                                                                                                                                                      | ✅       | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)     |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"week\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week)                                                                                                                                                                                                                                                                                        | ✅       | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)     |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"datetime-local\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local)                                                                                                                                                                                                                                                                    | ✅       | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)     |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"file\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)                                                                                                                                                                                                                                                                                        | ✅       | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or `null`                           |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"file\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) and [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)                                                                                                                                                                                                | ✅       | \u003ccode\u003eArray\u003c[File](https://developer.mozilla.org/en-US/docs/Web/API/File)\u003e\u003c/code\u003e                   |\n| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)       | [`type=\"button\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) or [`type=\"submit\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) or [`type=\"reset\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset) or [`type=\"image\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) | ❌       | –                                                                                                   |\n| [HTMLTextAreaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextareaElement) | –                                                                                                                                                                                                                                                                                                                                                                            | ✅       | `string`                                                                                            |\n| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement)     | –                                                                                                                                                                                                                                                                                                                                                                            | ✅       | `string`                                                                                            |\n| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement)     | [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)                                                                                                                                                                                                                                                                                          | ✅       | `Array\u003cstring\u003e`                                                                                     |\n| [HTMLOutputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement)     | –                                                                                                                                                                                                                                                                                                                                                                            | ✅       | `string`                                                                                            |\n| [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | –                                                                                                                                                                                                                                                                                                                                                                            | ✅       | `Object\u003cname: string, value: unknown\u003e` (See [advanced usage](#htmlfieldsetelement-as-object))       |\n| [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | with `[]` in [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#name)                                                                                                                                                                                                                                                                               | ✅       | `Array\u003cObject\u003cname: string, value: unknown\u003e\u003e` (See [advanced usage](#htmlfieldsetelement-as-array)) |\n| [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement)     | –                                                                                                                                                                                                                                                                                                                                                                            | ❌       | –                                                                                                   |\n| [HTMLObjectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement)     | –                                                                                                                                                                                                                                                                                                                                                                            | ❌       | –                                                                                                   |\n\n## Advanced Usage\n\n### HTMLInputElement with type=\"checkbox\" as array\n\n`getFormPayload` returns an array of values for checked elements when using `\u003cinput\u003e` with `type=\"checkbox\"` and the `[]` symbol at the end of the `name` attribute of the `\u003cinput\u003e` element itself.\n\n\u003c!-- prettier-ignore-start --\u003e\n```html\n\u003cform name=\"shop\"\u003e\n  \u003clabel\u003eShop name: \u003cinput name=\"name\" type=\"text\" value=\"Shop #1\"\u003e\u003c/label\u003e\n  \u003clabel\u003eApple \u003cinput name=\"fruits[]\" type=\"checkbox\" value=\"apple\" checked\u003e\u003c/label\u003e\n  \u003clabel\u003eOrange \u003cinput name=\"fruits[]\" type=\"checkbox\" value=\"orange\"\u003e\u003c/label\u003e\n  \u003clabel\u003eBanana \u003cinput name=\"fruits[]\" type=\"checkbox\" value=\"banana\" checked\u003e\u003c/label\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\n  import { getFormPayload } from 'form-payload';\n\n  const { shop: shopFormNode } = document.forms;\n\n  shopFormNode.addEventListener('submit', (evt) =\u003e {\n    evt.preventDefault();\n\n    const formPayload = getFormPayload(shopFormNode);\n    // =\u003e\n    // {\n    //   name: 'Shop #1',\n    //   fruits: ['apple', 'banana'],\n    // }\n  })\n\u003c/script\u003e\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n### HTMLFieldsetElement as object\n\n`getFormPayload`/`getFormControlPayload` returns a nested objects when using the `\u003cfieldset\u003e` element. The key name will be based on the `name` attribute of the `\u003cfieldset\u003e` element itself. Nesting of `\u003cfieldset\u003e` elements within each other can be infinite. `getFormPayload`/`getFormControlPayload` collects all values recursively.\n\n\u003c!-- prettier-ignore-start --\u003e\n```html\n\u003cform name=\"company\"\u003e\n  \u003clabel\u003eCompany name: \u003cinput name=\"name\" type=\"text\" value=\"FreshHarvest Hub\"\u003e\u003c/label\u003e\n  \u003cfieldset name=\"shop\"\u003e\n    \u003clabel\u003eShop name: \u003cinput name=\"name\" type=\"text\" value=\"Shop #1\"\u003e\u003c/label\u003e\n    \u003clabel\u003eOpen: \u003cinput name=\"isOpen\" type=\"checkbox\" checked\u003e\u003c/label\u003e\n  \u003c/fieldset\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\n  import { getFormPayload } from 'form-payload';\n\n  const { company: companyFormNode } = document.forms;\n\n  companyFormNode.addEventListener('submit', (evt) =\u003e {\n    evt.preventDefault();\n\n    const formPayload = getFormPayload(companyFormNode);\n    // =\u003e\n    // {\n    //   name: 'FreshHarvest Hub',\n    //   shop: {\n    //     name: 'Shop #1',\n    //     isOpen: true,\n    //   },\n    // }\n  })\n\u003c/script\u003e\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n### HTMLFieldsetElement as array\n\n`getFormPayload`/`getFormControlPayload` returns an array of objects when using the `\u003cfieldset\u003e` element and the `[]` symbol at the end of the `name` attribute of the `\u003cfieldset\u003e` elements. The functionality of recursively collecting values from nested `\u003cfieldset\u003e` elements is preserved.\n\n\u003c!-- prettier-ignore-start --\u003e\n```html\n\u003cform name=\"company\"\u003e\n  \u003clabel\u003eCompany name: \u003cinput name=\"name\" type=\"text\" value=\"FreshHarvest Hub\"\u003e\u003c/label\u003e\n  \u003cfieldset name=\"shops[]\"\u003e\n    \u003clabel\u003eShop name: \u003cinput name=\"name\" type=\"text\" value=\"Shop #1\"\u003e\u003c/label\u003e\n    \u003clabel\u003eOpen: \u003cinput name=\"isOpen\" type=\"checkbox\" checked\u003e\u003c/label\u003e\n  \u003c/fieldset\u003e\n  \u003cfieldset name=\"shops[]\"\u003e\n    \u003clabel\u003eShop name: \u003cinput name=\"name\" type=\"text\" value=\"Shop #2\"\u003e\u003c/label\u003e\n    \u003clabel\u003eOpen: \u003cinput name=\"isOpen\" type=\"checkbox\"\u003e\u003c/label\u003e\n  \u003c/fieldset\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\n  import { getFormPayload } from 'form-payload';\n\n  const { company: companyFormNode } = document.forms;\n\n  companyFormNode.addEventListener('submit', (evt) =\u003e {\n    evt.preventDefault();\n\n    const formPayload = getFormPayload(companyFormNode);\n    // =\u003e\n    // {\n    //   name: 'FreshHarvest Hub',\n    //   shops: [\n    //     {\n    //       name: 'Shop #1',\n    //       isOpen: true,\n    //     },\n    //     {\n    //       name: 'Shop #2',\n    //       isOpen: false,\n    //     },\n    //   ],\n    // }\n  })\n\u003c/script\u003e\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n---\n\nInspired by [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and Web-platform in general ♡.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhat1s1ove%2Fform-payload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhat1s1ove%2Fform-payload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhat1s1ove%2Fform-payload/lists"}