「よくあるクソフォームだ！」このクレジットカード入力フォーム、どこが悪いのかわかりますか？

白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj @assialiholic すみません。 何故悪いフォームなのかが理解できないのです。 普通のフォームだな、と思ってしまいます。 お手数ですが、解説をお願いできますでしょうか？ 2020-09-11 10:46:09 歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic @ShirayanagiRyuj 主に ・カードのブランドは選択させる必要がない（カード番号から判別できるため） ・カード番号入力欄が4つに分かれている（おまけに4桁入力したら勝手に次に遷移するので、修正が面倒です。入力欄は1つでOK） ・有効期限に独自の並び、形式を使用している（ここでめっちゃハマりました） です！ 2020-09-11 10:50:52 白栁隆司@エンジニアカウンセラー @Shirayanagi

[IkaMaru]

自動入力になってると分割フォームの一つ目に全部入力されて、いちいち消して手入力するはめになったりするやつだ

[hatest]

カードのブランドは選択させる必要がない ← 使用可能ブランドをちゃんと見ない人に向けて、選択項目でブランドをはっきり認識させるためにあえて選択させることがあります。

[enhanky]

こういうの正解の実装例が書いてないのは話半分で聞いといた方がいい。実装例を出すと絶対に誰かしらからツッコミが入るので文句だけつけて正しい実装例は出さない人が多すぎる。

[lacucaracha]

ツイート拾われてるけど「ブランド選択要らない」「カード番号の桁分けは不要」「有効期限をMM/YYにしろ」なんて些事はどうでも良いんで「名義人はどこに入れるの？」を指摘すべきじゃないのかと（処理は通ってもね）

[omotenothing]

全体的にレベルの低い話だがこの流れでCSSの話してる人がいるのは何故なのか。

[mahal]

真のクソフォームは、アメックス対応とか言いながら16桁チェックをかける…！(つかそこまでクソでなくても、雨や茄子で桁4つで切るだけで結構余計な気は遣うよね…)

[hir_o]

最近スマホでフォーム入力の際に電話番号でブラウザが覚えてる値が勝手に入っちゃって、消して入れ直しても勝手に入力されてを繰り返してウガーーーってなったことある。1文字ずつ確定しながら入れたわ

[triggerhappysundaymorning]

カード番号のとこは16桁ペーストした際に全部埋めてくれるならそれ程糞じゃないと思うけど,月年逆にしてるのは糞糞の糞やで（´・ω・｀）

[togetter]

有効期限のやつは本当にわけわからない…。

[carl_s]

入力ミスを発生させやすいデザイン・仕組みがクソフォームの特徴。コメントやブコメで言及されてるけどアメックスやダイナースクラブは4桁区切りでもなければ16桁でもない。

[deep_one]

クレジットカードの券面は普通「月、年」の順なのでそれに合わせた方が良いよね。名義人がないのは（実はオーソリの処理ではたいてい不要なんだけど）良くない。

[salar_de_uyuni]

そういうの考えるのがＷｅｂデザイナーの役目だろうが！[togetter][エンジニア][あとで読む][web][ネタ][セキュリティ][!!][クレジットカード][UI]

[T-miura]

そうなのかんな？JCBは使えんとかは、セレクトboxじゃなくて文章で示せばいいのだろうか。個人的には、カード番号のところはつながってるほうが好きだが。あと、有効期限も確かにカードのままの並びが多いが

[uzusayuu]

こんな細かい事よりも、「はずみで遷移して戻ったら全部消えてる」とか「エラーが出て戻ると入力したのが消えてる」、とかの方がよっぽどイヤ。 あとタブ押したらとんでもないところに飛ぶやつ。

[ropponzo]

クレジットカード入力フォームは海外サイトの方がよく出来てる事が多い。

[miruto]

これは納得のクソフォーム！

[buhoho]

奇をてらった独自実装(フォーム移動、スペース追加、補完)とかしなければブラウザが良きように入力アシストしてくれるんだよな

[ozomatli]

この有効期限のパターンは見たことないな…

[flirt774]

名前が分かれてるのもダメな例だったりする。帰化した人のミドルネームとかが入れられない

[Falky]

名義って入力しても照合されてる感触がないなーってずっと思ってたんだけど、実際のところどうなんだろう？//少なくともCAFISでは全く照合されないらしい。不要な個人情報ならば入力させない方が正解ぽいが

[diveintounlimit]

この話は名義人入れる場所が無い以上の話ではないと思うけど、各ウェブサイトの入力欄が事由過ぎて実質自動入力が機能してないの何とかならんのかと思ったりはする。

[alyya]

取り敢えず規格かなんかでフォーム統一してほしい。サイト毎にオリジナルすぎて自動フォーム入力が大抵意味をなさない。

[hz75hz]

カード番号は一つの入力欄、ただし4桁ごとに離れて表示されるようにして欲しい

[kkobayashi]

よくあるクソフォーム／少額のweb決済で名義人入れるケースなんてほとんど見ないけど

[Hasen]

国際ブランドが協力して共通のテンプレート作れよと思うな

[posmoda]

電話番号や郵便番号がハイフンで分かれてるのもオートフィルが誤爆するのでムカつく。アレは長年イライラしてるので、いい加減ブラウザやスマホOSのベンダーが対応してほしい。

[NOV1975]

もうちょっとフールプルーフの概念とかも考えた方が良いよ

[shields-pikes]

なんかブコメでカード名義の入力欄がないのを問題視してるけど、決済するだけなら必要ないよね？ ／ 月/年の順番を変えるのは誤入力を招くので最悪。4桁づつ欄を分けるのは不要。使用可能ブランドはロゴ表示が理想。

[quality1]

セキュリティコードとは、で別ページに飛ばす仕様はなんなんだろう。押したら下に開くようにしなよ

[abiruy]

読んでないけどAmazon楽天とか多くの人が使ってるサイトのUIを真似るのが実質正解である

[t0ng]

ブランド名は「VISAとMaster以外使えないんかい」とかを事前に分らせるためにあっても良い。他で説明してても見ない奴多いし

[ciel18m]

番号1つの欄派。字数制限されていない最初の欄に全部入力してた時とか最悪。 年月逆なのは違和感。

[kw5]

銀聯だと15-19桁のもあるし

[pre21]

「4桁入力したら勝手に次に遷移するからクソ」はこのpictからどうやって判別するんだ

[pascal256]

まとめられてるTweetを読む限りだとブラウザ等の自動入力を前提にしてる人からすると、人間が入力することを前提としたUIが「邪魔」という事かな。これは時代に合わせて求められるUIも変化してくるという良い事例な気が

[anklelab]

逆にセキュリティ的には良かったりするのかな？

[leiqunni]

クソフォームを論ってもしょーもない。「こう作れ、これ以外にするな」の話をしたらどうかな。

[napsucks]

4つに分かれているフォームは死すべし

[tettekete37564]

期限はサイトによってカードの表記と逆なとこあるよね。でも西暦を二桁にして月を先に書くアメリカ式(イギリスもだっけ？)の書式が1番の元凶

[doksensei]

関係なくて申し訳ないけど、生年月日入れるのに１ヶ月ずつカレンダーをめくっていくヤツが叩かれているサイトがあったら教えてください。1970年代まで戻るのに何百回矢印押させるんや！と！