Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Marina Ivanova

November 18, 2023
Tweet

Other Decks in Programming

Transcript

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

    View full-size slide

  2. ྲྀΕ
    • autocompleteଐੑͷ঺հ

    • autocompleteͷ࢖༻ͷྫ

    • Ϣʔβʔొ࿥ϑΥʔϜͷautocompleteͷ஋

    • ϩάΠϯϑΥʔϜͷautocompleteͷ஋

    • ·ͱΊ

    View full-size slide

  3. autocompleteଐੑͷ঺հ
    • ϑΥʔϜϑΟʔϧυͷ஋ͷࣗಈิ׬ʹؔͯ͠ϢʔβʔΤʔδΣϯτʹͲͷΑ͏
    ͳݖݶ͕͋Δ͔Λࢦఆ

    • ϑΟʔϧυʹظ଴͞ΕΔ৘ใͷλΠϓʹؔ͢Δϒϥ΢β΁ͷΨΠμϯεΛఏ

    • ɺɺɺʹରͯ͠ར༻Մೳ
    autocompleteͷ஋͸ɺhttps://developer.mozilla.org/ja/docs/Web/HTML/Attributes/
    autocomplete Ͱ֬ೝͰ͖Δ

    View full-size slide

  4. autocompleteͷ࢖༻ͷྫ
    • ৽͍͠ΞΧ΢ϯτΛ࡞੒͢Δࡍɺొ࿥͢ΔϢʔβʔωʔϜͱύεϫʔυΛύε
    ϫʔυϚωδϟʔ (Keychainɺ1PasswordͳͲ) ʹఏڙ͢Δ

    • ϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυΛࣗಈͰೖྗ͞ΕΔ

    • ΫϨδοτΧʔυͷ৘ใ͕อଘ͞Ε͍ͯΔ৔߹ɺࢧ෷͍ϑΥʔϜͳͲʹΧʔυ
    ͷ৘ใΛࣗಈͰೖྗ͞ΕΔ

    View full-size slide

  5. Ϣʔβʔొ࿥ϑΥʔϜͷautocompleteͷ஋

    Sign up


    Email
    autocomplete="username" />
    New password
    required autocomplete="new-password" />

    Register Account


    Ϧϙ͸ͪ͜Β: https://github.com/ivanova-marina/autocomplete-sample

    View full-size slide

  6. ϩάΠϯϑΥʔϜͷautocompleteͷ஋

    Sign in


    Email
    autocomplete="username" />
    Password
    autocomplete="current-password" />

    Sign in


    Ϧϙ͸ͪ͜Β: https://github.com/ivanova-marina/autocomplete-sample

    View full-size slide

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

    View full-size slide

  8. ࣗݾ঺հ
    • ϚϦφɾΠϫϊϫ

    • גࣜձࣾΏΊΈͰϑϩϯτΤϯυΤϯδχΞ
    ͱͯ͠ॴଐ

    • ϞεΫϫग़਎ɺژ౎ࡏॅ

    • ࠷ۙ͸՛ࢠ࡞ΓʹϋϚ͍ͬͯ·͢ @qcapy_frontend
    @[email protected]

    View full-size slide