Created
June 13, 2024 08:23
-
-
Save rusco/1a9be5e594790f28421755941314e71a to your computer and use it in GitHub Desktop.
htmlform2json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| body { | |
| display: flex; | |
| min-height: 98vh; | |
| align-items: center; | |
| background-color: #f8f9fa; | |
| } | |
| .container { | |
| padding: 1rem 2.5rem 1.5rem 2.5rem; | |
| margin: auto; | |
| } | |
| .card { | |
| animation: 0.9s ease-in-out 0s 1 fadeIn; | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); | |
| border-radius: 5px; | |
| transition: 0.3s; | |
| } | |
| .card-color { | |
| background: rgb(235, 235, 235); | |
| background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 42%, rgba(255, 255, 255, 1) 100%); | |
| } | |
| .card:hover { | |
| box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); | |
| } | |
| .form-row { | |
| margin-top: 1rem !important; | |
| margin-bottom: 1rem !important; | |
| padding: 0.5rem; | |
| } | |
| .form-row label { | |
| display: block; | |
| } | |
| .input-text { | |
| font-weight: 500; | |
| background-color: #f0f0f0; | |
| padding: 0.6rem 0.3rem 0.6rem 0.6rem; | |
| border-width: 0; | |
| border-radius: 0.3rem; | |
| outline: none; | |
| } | |
| .input-text-block { | |
| display: block; | |
| } | |
| .input-text:focus { | |
| border-color: 1px solid #444; | |
| } | |
| .input-text:disabled { | |
| opacity: 0.7; | |
| cursor: auto; | |
| } | |
| .btn-submit, | |
| .btn-edit { | |
| padding: 0.7rem; | |
| text-decoration: none; | |
| color: #FFF; | |
| border: none; | |
| border-radius: 0.8rem; | |
| font-weight: bold; | |
| } | |
| .btn-submit { | |
| background-color: #000; | |
| width: 100%; | |
| } | |
| .btn-edit { | |
| background-color: transparent; | |
| } | |
| path { | |
| fill: #aaa; | |
| } | |
| button:hover { | |
| opacity: 0.9; | |
| } | |
| button:focus { | |
| opacity: 1; | |
| } | |
| button:hover, | |
| button:focus { | |
| cursor: pointer; | |
| } | |
| button:disabled { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| } | |
| .d-flex { | |
| display: flex; | |
| } | |
| .justify-content-end { | |
| justify-content: end; | |
| justify-content: flex-end; | |
| } | |
| .m-2 { | |
| margin: 2rem; | |
| } | |
| .my-1 { | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .mx-auto { | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .w-100 { | |
| width: 100%; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| </style> | |
| <title>Form to API, 13.06.2023</title> | |
| </head> | |
| <body> | |
| <div class="container card card-color"> | |
| <form action="" id="sampleForm"> | |
| <h2>Sample Form to JSON API</h2> | |
| <div class="form-row"> | |
| <label for="FirstName">First Name</label> | |
| <input type="text" class="input-text input-text-block w-100" id="FirstName" name="FirstName"> | |
| </div> | |
| <div class="form-row"> | |
| <label for="LastName">Last Name</label> | |
| <input type="text" class="input-text input-text-block w-100" id="LastName" name="LastName"> | |
| </div> | |
| <div class="form-row"> | |
| <label for="Email">Email</label> | |
| <input type="email" class="input-text input-text-block w-100" id="Email" name="Email"> | |
| </div> | |
| <div class="form-row mx-auto"> | |
| <button type="submit" class="btn-submit" id="btnSubmit"> | |
| Submit | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <script type="text/javascript"> | |
| //date: 13.06.2024 | |
| const sampleForm = document.querySelector("#sampleForm"); | |
| if (sampleForm) { | |
| sampleForm.addEventListener("submit", (evt) => { | |
| evt.preventDefault(); | |
| let form = new FormData(sampleForm); | |
| let entries = Object.fromEntries(form); | |
| let jsonData = JSON.stringify(entries); | |
| console.log("jsonData: ", jsonData); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment