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

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

Transcript

1. Frontend Conference Okinawa 2023, 2023/11/18
   Ivanova Marina, גࣜձࣾΏΊΈ
   Ϣʔβʔొ࿥ͱϩάΠϯϑΥʔϜʹ
   autocompleteଐੑΛ࢖͍·͠ΐ͏
   

   View Slide

2. ྲྀΕ
   • autocompleteଐੑͷ঺հ
   
   • autocompleteͷ࢖༻ͷྫ
   
   • Ϣʔβʔొ࿥ϑΥʔϜͷautocompleteͷ஋
   
   • ϩάΠϯϑΥʔϜͷautocompleteͷ஋
   
   • ·ͱΊ
   

   View Slide

3. autocompleteଐੑͷ঺հ
   • ϑΥʔϜϑΟʔϧυͷ஋ͷࣗಈิ׬ʹؔͯ͠ϢʔβʔΤʔδΣϯτʹͲͷΑ͏
   ͳݖݶ͕͋Δ͔Λࢦఆ
   
   • ϑΟʔϧυʹظ଴͞ΕΔ৘ใͷλΠϓʹؔ͢Δϒϥ΢β΁ͷΨΠμϯεΛఏ
   
   • ɺɺɺʹରͯ͠ར༻Մೳ
   autocompleteͷ஋͸ɺhttps://developer.mozilla.org/ja/docs/Web/HTML/Attributes/
   autocomplete Ͱ֬ೝͰ͖Δ
   

   View Slide

4. autocompleteͷ࢖༻ͷྫ
   • ৽͍͠ΞΧ΢ϯτΛ࡞੒͢Δࡍɺొ࿥͢ΔϢʔβʔωʔϜͱύεϫʔυΛύε
   ϫʔυϚωδϟʔ (Keychainɺ1PasswordͳͲ) ʹఏڙ͢Δ
   
   • ϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυΛࣗಈͰೖྗ͞ΕΔ
   
   • ΫϨδοτΧʔυͷ৘ใ͕อଘ͞Ε͍ͯΔ৔߹ɺࢧ෷͍ϑΥʔϜͳͲʹΧʔυ
   ͷ৘ใΛࣗಈͰೖྗ͞ΕΔ
   

   View Slide

5. Ϣʔβʔొ࿥ϑΥʔϜͷautocompleteͷ஋
   
   Sign up
   
   
   Email
   autocomplete="username" />
   New password
   required autocomplete="new-password" />
   
   Register Account
   
   
   Ϧϙ͸ͪ͜Β: https://github.com/ivanova-marina/autocomplete-sample
   

   View Slide

6. ϩάΠϯϑΥʔϜͷautocompleteͷ஋
   
   Sign in
   
   
   Email
   autocomplete="username" />
   Password
   autocomplete="current-password" />
   
   Sign in
   
   
   Ϧϙ͸ͪ͜Β: https://github.com/ivanova-marina/autocomplete-sample
   

   View Slide

7. ·ͱΊ
   w BVUPDPNQMFUFͷ঺հͯ͠ɺొ࿥ϑΥʔϜ΍ΫϨδοτΧʔυೖྗϑΥʔϜʹ࢖͑Δ
   w ొ࿥͢ΔϢʔβʔωʔϜͱύεϫʔυΛอଘ͞ΕɺϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυ
   ΛࣗಈͰೖྗ͞ΕΔ
   w ొ࿥ϑΥʔϜʹɺϢʔβʔωʔϜʹBVUPDPNQMFUFlVTFSOBNFz ϝʔϧΛొ࿥ͯ͠΋
   ɺύεϫʔυ
   ʹBVUPDPNQMFUFlOFXQBTTXPSEzΛࢦఆ
   w ϩάΠϯϑΥʔϜʹϢʔβʔωʔϜʹBVUPDPNQMFUFlVTFSOBNFzɺύεϫʔυʹ
   BVUPDPNQMFUFlDVSSFOUQBTTXPSEΛࢦఆͨ͠ΒɺϓεϫʔυϚωʔδϟʔ͔Βਖ਼͘͠औಘࣗ͠ಈ
   Ͱೖྗ͞ΕΔ
   

   View Slide

8. ࣗݾ঺հ
   • ϚϦφɾΠϫϊϫ
   
   • גࣜձࣾΏΊΈͰϑϩϯτΤϯυΤϯδχΞ
   ͱͯ͠ॴଐ
   
   • ϞεΫϫग़਎ɺژ౎ࡏॅ
   
   • ࠷ۙ͸՛ࢠ࡞ΓʹϋϚ͍ͬͯ·͢ @qcapy_frontend
   @queenCapy@hachyderm.io
   

   View Slide