新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

inputタグ(type=”image”)の謎

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

submitボタンをどうしても画像にしたいらしい。

スポンサーリンク
 

で、

<input type="submit"...

のところを

<input type="image"...

に変えて画像にしたらなぜだかフォームから送られる文字列に
x=3(任意の数字)やらy=12(任意の数字)等という不思議な数字が含まれる。
しかもボタンを押すたびに数字が変わってくる。これはいったい。。?

そこでいろいろ調べてみると、これはどうもsubmitボタンで使った画像をクリックした時のマウスポインタの座標のようだ。
そこで、inputタグの仕様を調べてみた。
http://www.hajimeteno.ne.jp/html40/i/input-image.html
やはり、データ送信時はクリック地点に関する情報も送られます。とのこと。

こいつを使って何かゲームでも作れそうな気もする。
あ、Hなの思いついた(爆)

ちなみに、submitボタンを画像にするのは数通りのやり方があって、

1. <input type="image"...
2. <button type="submit"...
   <img src="...
  </button>
3. <img onclick="document.フォーム名.submit();"...

等が考えられます。

詳しくはこのあたりを参考に
送信ボタン・リセットボタンに画像を用いる
クリックするとフォーム内容を送信する

 - ユーザビリティ, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

iPhoneに現れる謎のメール受信画面の原因を追え

1年以上前の記事です。内容が古い可能性があります。いつからかiPhone(アイフ …

no image
外部SEO(被リンクSEO)まとめ

1年以上前の記事です。内容が古い可能性があります。内部SEOをしっかりしてもSE …

XPで新アカウントをつくったときまず最初にすること

1年以上前の記事です。内容が古い可能性があります。ちまたではWindows7が発 …

アンカー付きオブジェクトへのテキストの回り込みができない【InDesign】

1年以上前の記事です。内容が古い可能性があります。久しぶりにInDesign(イ …

Facebook(フェイスブック)のタイムラインを始める方法

1年以上前の記事です。内容が古い可能性があります。放っておいても時期が来れば勝手 …

LINE(ライン)で友だちをブロック、及び非表示にする方法

1年以上前の記事です。内容が古い可能性があります。こちらの記事の改訂版です。今ま …

no image
アダルトサイトは「.xxx」で安心して見れるようになる

1年以上前の記事です。内容が古い可能性があります。ポルノ用のトップレベルドメイン …

チャットするならSkype(スカイプ)のグループ機能がオススメ

1年以上前の記事です。内容が古い可能性があります。「つぶくま」で毎週金曜に「ツイ …

さくらインターネットはメールアドレスがないと契約できないの?

1年以上前の記事です。内容が古い可能性があります。いやぁ。いまだにこういうクライ …

日本では黄金比よりも白銀比。第2黄金比や青銅比なども

1年以上前の記事です。内容が古い可能性があります。黄金比っていう言葉はちょくちょ …

血液型オヤジ