今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

[toranomaki_abc]

昔ながらのフォームのセオリーから脱却した考え方は参考になりました。

[sds-page]

テストで適当に入力した値をブラウザがいつまでも覚えてて辛い / Chromeはカーソル当ててShift+Delでいけた！

[kabochatori]

スマホはtype=numberでもテンキー出して欲しいんだけどなぁ…。

[metamix]

あとふりがなはひらがな入力がいいね。カタカナだとIMEが変換覚えちゃってメンドイ

[psne]

id:sds-page (PC)フォーカス当ててdelキー押すかキャッシュクリアの項目の一つに、(SP)候補が出ている時に消したい項目を長押し　で消せます。(クソリプ)

[masapon49]

文中にもあるように、分離する意味はないし、全半角強要もしない様に作ってる。ただtype="date"を指定した時のバリデーションがブラウザ毎に違うのが死ねる

[diveintounlimit]

適宜は良いけど、必ずでやられると勝手に違う値を入力されて鬱陶しいので、ケースバイケースでお願いしたい。

[primedesignworks]

フォームに出会ったらとりあえず空でボタンを押して反応を見ることにしてる。

[fashi]

そうか、自分はオートコンプリート機能とか真っ先にオフるけど、使う人もいっぱいいるよな…

[send]

姓名一緒にするのは難しい。スペース等で分かち書きされてたらともかくとして、繋げられると姓と名の区別が機械で困難で他システムと連携取れなくなって詰む

[gt-r-blaze]

フォーム

[headless_pasta]

autocompleteまわりの話。

[qinmu]

EFO対策 = Entry Form Optimizatio。autocomplete属性。

[keipeace]

“autocapitalize="off"”

[T-miura]

知らんかった…

[rindarinda5]

メモ ICS MEDIA ― 今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ

[torimoku]

オートコンプリートやキーボード最適化の方法

[iwata1985]

ICS MEDIA - 今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ

[k_gobo]

下手に実装するとiOSとAndroidとPCで同じ見た目の同じ動きをしろって言われて詰むんだよ。

[do7be]

これはガチ

[Jxck]

今時の <form> <input> の書き方

[contractio]

あとで読む

[surume000]

そもそもふりがなとか必要なんかね。ビジネス上マストじゃない項目以外入力を求めないことが大事。まあコーダーとかエンジニアではどうしようもないけど

[hamamuratakuo]

「WHATWG Standard」のAutoFill　autocomplete属性

[yuuAn]

オートコンプリートできるようにするとか入力方法を指定するとか。

[nffsjj]

超参考になった！／サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。

[dearwalker_yuya]

ICS MEDIA ― 今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ

[o9ra]

form

[djshigy]

form

[Hi32]

メールフォーム。input要素にautocomplete属性を設定することで、フォームへの自動入力を有効にできます。この属性を適切に設定することで、ユーザーはブラウザーに登録している情報を自動で入力できます。

[kamei_rio]

ナウい？

[glat_design]

べんり /

[esow1202]

HTML

[otchy210]

名前のカタカナを要求されてしまう対策として、名字と名前を一続きでカタカナに変換してからコピペするようにしてる。そうすると名字だけ名前だけの変換では、IME もカタカナ覚えない。

[designwao]

今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ - ICS MEDIA: ICS MEDIA…

[kamiaki]

“自動入力機能に対応させるためのinput要素の書き方”

[kuchitama]

あー、すごく納得感ある。さっそく、フォームを見直そう

[clucklucklucky]

自動入力好きとしてはブクマしておきたい。別に自分のブログで使う予定はないけど！