Created
February 7, 2025 14:08
-
-
Save ericorruption/88b9e6dfbf2c68be52ba58f64ea1373e to your computer and use it in GitHub Desktop.
Autocomplete
This file contains hidden or 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"> | |
| <title>Autocomplete tests</title> | |
| <style> | |
| label { | |
| display: block; | |
| margin-bottom: 1.4rem; | |
| } | |
| .hide { | |
| /* display: none; */ | |
| overflow: hidden; | |
| opacity: 0; | |
| height: 0; | |
| margin: 0; | |
| } | |
| input { | |
| font-size: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Autocomplete tests</h1> | |
| <p>Form with input names</p> | |
| <form> | |
| <label> | |
| Name: | |
| <input type="text" name="name" /> | |
| </label> | |
| <label> | |
| Email: | |
| <input type="email" name="email" /> | |
| </label> | |
| <label> | |
| Phone: | |
| <input type="text" name="phone" /> | |
| </label> | |
| <button type="Submit">Submit</button> | |
| </form> | |
| <p>Form with autocomplete attributes</p> | |
| <form> | |
| <label> | |
| Name: | |
| <input type="text" name="a" autocomplete="name" /> | |
| </label> | |
| <label> | |
| Email: | |
| <input type="email" name="b" autocomplete="email" /> | |
| </label> | |
| <label> | |
| Phone: | |
| <input type="text" name="c" autocomplete="tel" /> | |
| </label> | |
| <button type="Submit">Submit</button> | |
| </form> | |
| <p>Form with hidden fields</p> | |
| <form id="js-form"> | |
| <label> | |
| Name: | |
| <input type="text" name="a" autocomplete="name" /> | |
| </label> | |
| <label class="hide"> | |
| Email: | |
| <input type="email" name="b" autocomplete="email" /> | |
| </label> | |
| <label class="hide"> | |
| Phone: | |
| <input type="text" name="c" autocomplete="tel" /> | |
| </label> | |
| <button type="Submit">Submit</button> | |
| </form> | |
| <script> | |
| const form = document.querySelector('#js-form'); | |
| const fields = form.querySelectorAll('label'); | |
| let step = 0; | |
| form.addEventListener('submit', (e) => { | |
| console.log('SUBMIT'); | |
| e.preventDefault(); | |
| if (step + 1 === fields.length) { | |
| return; | |
| } | |
| step = step + 1; | |
| for (const field of fields) { | |
| field.classList.add('hide'); | |
| } | |
| fields[step].classList.remove('hide'); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment