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
3.5k
ユーザー登録とログインフォームに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
Jasprが凄い話
hyshu
0
200
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
390
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
800
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
160
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
180
気がついたら子供が社会人になって 自分と同じモバイルアプリエンジニアになった件 / Parent-Child Engineers
koishi
0
100
Boost Your Web Performance with Hyperdrive
chimame
1
150
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
⚪⚪の⚪⚪をSwiftUIで再現す る
u503
0
140
高セキュリティ・高耐障害性・サブシステム化。そして2億円
tasukulab280
2
380
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
150
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
3
1.4k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Docker and Python
trallard
44
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Music & Morning Musume
bryan
46
6.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Thoughts on Productivity
jonyablonski
69
4.5k
GitHub's CSS Performance
jonrohan
1030
460k
The Cost Of JavaScript in 2023
addyosmani
47
7.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing for Performance
lara
605
68k
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]