フォームのボタンをbuttonタグにすべき理由はiOSに…

たとえ天変地異が起ころうとも銀色のボタンにしたがるiOS HTML

まずは上の画像を御覧ください。

これがiOS系端末(ブラウザはSafariまたはChrome)でフォームパーツにinputタグbuttonsubmitresetを使うと何が何でも銀色のボタンにしたがる光景です。

おかしい、私はメールフォームのボタンに次のようなデザインを設定したはずなんだがな…?

[type="submit"] {
background: rgba(29, 59, 149, .5);
color: #E2EBEE;
font-size: 1em;
padding: 0 0.5em;
border: none;
box-shadow: 1px 1px 3px #0F0A33;
border-radius: 0.25em;
z-index: 6;
transition: background 0.5s;
}

つまり…はだ…。

↑のようなボタンにならなきゃ駄目なんだよ!
.。oO{修正終わる前なので、下のボタンのmargin入れ忘れて、shadowの設定が消えてるけどな…}

iOSよ…なんで君はそこまで銀色のボタンにこだわるのかね…?

…まあ…こんなことを端末に直接聞いても無駄だろうし、どうしてもボタンのデザインを細かく設定したい場合は、素直にbuttonタグを使えってことですね…。

メモ<input> 要素の button 型は完全に妥当な HTML ですが、より新しい <button>要素が、ボタンの作成にはより好まれるようになりました。 <button> のラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/button

…だそうです…。
ちなみに、MDN Docのbuttonタグの説明によれば、

  • typeはsubmit(何故かこいつが初期設定)resetbuttonの3つ(つまりinputタグに含まれてるのと同じ)。
  • inputのtype属性buttonはタブ内部に文字しか設定できない(value属性を使用)のに対し、buttonタグはタグ内部にHTMLコンテンツ(imgなど)を追加できる。
  • CSSを使用してボタンの外見を変更できる

…とのこと。

一番最後の項目にもっと早く気付けば…
/(^o^)\

…とはいえ、PC&Chromeの場合、たとえinputタグのボタンであっても普通にCSSで見た目を変えられたから気づかなかったんですよね…。

しかも、Chromeの検証ツールでモバイル端末のシミュレーションをしてもやはり反映されてしまってるから気づかない…。

Chromeの検証ツールでiPad Pro用シミュレーションをしてもPCで表示するのと同じ結果に…

ちなみに、ボタン以外のフォーム部品(input typeで設定できる諸々・例えばテキスト入力欄やラジオボタンなど)もiOS系独自の見た目になりますが、テキスト入力欄は問題なくCSSで設定できるし、ラジオボタンなどはPCでもそこまで融通がきかないので、あまり気にしていませんでした。