Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ユーザー登録とログインフォームにautocomplete属性を使いましょう
Search
Marina Ivanova
November 18, 2023
Programming
2
2.8k
ユーザー登録とログインフォームにautocomplete属性を使いましょう
Frontend Conference Okinawa 2023, 2023/11/18
Ivanova Marina, 株式会社ゆめみ
Marina Ivanova
November 18, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
610
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
390
Deep Dive into React Stream/Serialize
mugi_uno
4
840
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
15
1.9k
Productivity is Messing Around and Having Fun
hollycummins
1
160
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
210
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
500
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
Going beyond Apache Parquet's default settings
xhochy
0
150
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
480
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.5k
2 週間で Twitter Bot を作ってみた
contour_gara
0
840
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Fireside Chat
paigeccino
22
2.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Practical Orchestrator
shlominoach
183
9.8k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
81
44k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
For a Future-Friendly Web
brad_frost
172
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Designing Experiences People Love
moore
136
23k
Transcript
Frontend Conference Okinawa 2023, 2023/11/18 Ivanova Marina, גࣜձࣾΏΊΈ ϢʔβʔొͱϩάΠϯϑΥʔϜʹ autocompleteଐੑΛ͍·͠ΐ͏
ྲྀΕ • autocompleteଐੑͷհ • autocompleteͷ༻ͷྫ • ϢʔβʔొϑΥʔϜͷautocompleteͷ • ϩάΠϯϑΥʔϜͷautocompleteͷ •
·ͱΊ
autocompleteଐੑͷհ • ϑΥʔϜϑΟʔϧυͷͷࣗಈิʹؔͯ͠ϢʔβʔΤʔδΣϯτʹͲͷΑ͏ ͳݖݶ͕͋Δ͔Λࢦఆ • ϑΟʔϧυʹظ͞ΕΔใͷλΠϓʹؔ͢ΔϒϥβͷΨΠμϯεΛఏ • <input>ɺ<textarea>ɺ<select>ɺ<form>ʹରͯ͠ར༻Մೳ autocompleteͷɺhttps://developer.mozilla.org/ja/docs/Web/HTML/Attributes/ autocomplete
Ͱ֬ೝͰ͖Δ
autocompleteͷ༻ͷྫ • ৽͍͠ΞΧϯτΛ࡞͢Δࡍɺొ͢ΔϢʔβʔωʔϜͱύεϫʔυΛύε ϫʔυϚωδϟʔ (Keychainɺ1PasswordͳͲ) ʹఏڙ͢Δ • ϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυΛࣗಈͰೖྗ͞ΕΔ • ΫϨδοτΧʔυͷใ͕อଘ͞Ε͍ͯΔ߹ɺࢧ͍ϑΥʔϜͳͲʹΧʔυ
ͷใΛࣗಈͰೖྗ͞ΕΔ
ϢʔβʔొϑΥʔϜͷ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
ϩάΠϯϑΥʔϜͷ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
·ͱΊ w BVUPDPNQMFUFͷհͯ͠ɺొϑΥʔϜΫϨδοτΧʔυೖྗϑΥʔϜʹ͑Δ w ొ͢ΔϢʔβʔωʔϜͱύεϫʔυΛอଘ͞ΕɺϩάΠϯ͢Δ࣌ʹɺϢʔβʔωʔϜͱύεϫʔυ ΛࣗಈͰೖྗ͞ΕΔ w ొϑΥʔϜʹɺϢʔβʔωʔϜʹBVUPDPNQMFUFlVTFSOBNFz ϝʔϧΛొͯ͠ ɺύεϫʔυ
ʹBVUPDPNQMFUFlOFXQBTTXPSEzΛࢦఆ w ϩάΠϯϑΥʔϜʹϢʔβʔωʔϜʹBVUPDPNQMFUFlVTFSOBNFzɺύεϫʔυʹ BVUPDPNQMFUFlDVSSFOUQBTTXPSEΛࢦఆͨ͠ΒɺϓεϫʔυϚωʔδϟʔ͔Βਖ਼͘͠औಘࣗ͠ಈ Ͱೖྗ͞ΕΔ
ࣗݾհ • ϚϦφɾΠϫϊϫ • גࣜձࣾΏΊΈͰϑϩϯτΤϯυΤϯδχΞ ͱͯ͠ॴଐ • ϞεΫϫग़ɺژࡏॅ • ࠷ۙ՛ࢠ࡞ΓʹϋϚ͍ͬͯ·͢
@qcapy_frontend @
[email protected]