ユーザー登録とログインフォームにautocomplete属性を使いましょう

Frontend Conference Okinawa 2023, 2023/11/18
Ivanova Marina, 株式会社ゆめみ

Transcript

1. Frontend Conference Okinawa 2023, 2023/11/18 Ivanova Marina, גࣜձࣾΏΊΈ Ϣʔβʔొ࿥ͱϩάΠϯϑΥʔϜʹ autocompleteଐੑΛ࢖͍·͠ΐ͏
2. ྲྀΕ • autocompleteଐੑͷ঺հ • autocompleteͷ࢖༻ͷྫ • Ϣʔβʔొ࿥ϑΥʔϜͷautocompleteͷ஋ • ϩάΠϯϑΥʔϜͷautocompleteͷ஋ • ·ͱΊ
3. autocompleteଐੑͷ঺հ • ϑΥʔϜϑΟʔϧυͷ஋ͷࣗಈิ׬ʹؔͯ͠ϢʔβʔΤʔδΣϯτʹͲͷΑ͏ ͳݖݶ͕͋Δ͔Λࢦఆ • ϑΟʔϧυʹظ଴͞ΕΔ৘ใͷλΠϓʹؔ͢Δϒϥ΢β΁ͷΨΠμϯεΛఏ • <input>ɺ<textarea>ɺ<select>ɺ<form>ʹରͯ͠ར༻Մೳ autocompleteͷ஋͸ɺhttps://developer.mozilla.org/ja/docs/Web/HTML/Attributes/ autocomplete Ͱ֬ೝͰ͖Δ
4. autocompleteͷ࢖༻ͷྫ • ৽͍͠ΞΧ΢ϯτΛ࡞੒͢Δࡍɺొ࿥͢ΔϢʔβʔωʔϜͱύεϫʔυΛύε ϫʔυϚωδϟʔ (Keychainɺ1PasswordͳͲ) ʹఏڙ͢Δ • ϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυΛࣗಈͰೖྗ͞ΕΔ • ΫϨδοτΧʔυͷ৘ใ͕อଘ͞Ε͍ͯΔ৔߹ɺࢧ෷͍ϑΥʔϜͳͲʹΧʔυ ͷ৘ใΛࣗಈͰೖྗ͞ΕΔ
5. Ϣʔβʔొ࿥ϑΥʔϜͷautocompleteͷ஋ <section id="register"> <h2>Sign up</h2> <form id="formRegister"> <fieldset> <label for="register_email">Email</label> <input id="register_email" required type="email" autocomplete="username" /> <label for=“register_password">New password</label> <input type="password" id="register_password" required autocomplete="new-password" /> </fieldset> <button>Register Account</button> </form> </section> Ϧϙ͸ͪ͜Β: https://github.com/ivanova-marina/autocomplete-sample
6. ϩάΠϯϑΥʔϜͷautocompleteͷ஋ <section class="page" id="login"> <h2>Sign in</h2> <form id="formLogin"> <fieldset> <label for="login_email">Email</label> <input id="login_email" required autocomplete="username" /> <label for="login_password">Password</label> <input type="password" id="login_password" autocomplete="current-password" /> </fieldset> <button>Sign in</button> </form> </section> Ϧϙ͸ͪ͜Β: https://github.com/ivanova-marina/autocomplete-sample
7. ·ͱΊ w BVUPDPNQMFUFͷ঺հͯ͠ɺొ࿥ϑΥʔϜ΍ΫϨδοτΧʔυೖྗϑΥʔϜʹ࢖͑Δ
   w ొ࿥͢ΔϢʔβʔωʔϜͱύεϫʔυΛอଘ͞ΕɺϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυ ΛࣗಈͰೖྗ͞ΕΔ
   w ొ࿥ϑΥʔϜʹɺϢʔβʔωʔϜʹ
   BVUPDPNQMFUFlVTFSOBNFz
   ϝʔϧΛొ࿥ͯ͠΋
   ɺύεϫʔυ ʹBVUPDPNQMFUFlOFXQBTTXPSEz
   Λࢦఆ
   w ϩάΠϯϑΥʔϜʹ
   ϢʔβʔωʔϜʹ
   BVUPDPNQMFUFlVTFSOBNFzɺύεϫʔυʹ BVUPDPNQMFUFlDVSSFOUQBTTXPSE
   Λࢦఆͨ͠ΒɺϓεϫʔυϚωʔδϟʔ͔Βਖ਼͘͠औಘࣗ͠ಈ Ͱೖྗ͞ΕΔ
8. ࣗݾ঺հ • ϚϦφɾΠϫϊϫ • גࣜձࣾΏΊΈͰϑϩϯτΤϯυΤϯδχΞ ͱͯ͠ॴଐ • ϞεΫϫग़਎ɺژ౎ࡏॅ • ࠷ۙ͸՛ࢠ࡞ΓʹϋϚ͍ͬͯ·͢ @qcapy_frontend @queenCapy@hachyderm.io