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
3k
ユーザー登録とログインフォームに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
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
CSC307 Lecture 07
javiergs
PRO
0
220
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
CSC307 Lecture 05
javiergs
PRO
0
210
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
【Go言語】ジェネリクス
tomo1227
0
170
ドメイン駆動設計の実践
masuda220
PRO
17
5.2k
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Visualization
eitanlees
139
14k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
It's Worth the Effort
3n
181
27k
Optimizing for Happiness
mojombo
373
69k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Producing Creativity
orderedlist
PRO
340
39k
Web development in the modern age
philhawksworth
203
10k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
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]