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.6k
ユーザー登録とログインフォームに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
新しいモバイルアプリ勉強会(仮)について
uetyo
1
230
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
3
220
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
300
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Vibe coding コードレビュー
kinopeee
0
340
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
240
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
360
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.4k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Typedesign – Prime Four
hannesfritz
42
2.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Navigating Team Friction
lara
188
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Facilitating Awesome Meetings
lara
54
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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]