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.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
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.2k
Assembling the Future: crafting the missing pieces of the Ruby on Wasm puzzle
skryukov
0
120
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
210
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
240
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか?
shuyakinjo
0
840
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
460
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
110
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
200
CSC509 Lecture 02
javiergs
PRO
0
140
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
3
130
ファーストペンギンBot @Qiita Hackathon 2024 予選
dyson_web
0
200
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
490
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
YesSQL, Process and Tooling at Scale
rocio
167
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
A Modern Web Designer's Workflow
chriscoyier
692
190k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
A Philosophy of Restraint
colly
202
16k
Become a Pro
speakerdeck
PRO
23
4.9k
Docker and Python
trallard
40
3k
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]