新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

タブレットでYouTubeの埋め込みタグをブログに配置する方法

タブレットっていうのは半分パソコン、半分スマホ。 便利な部分もあれば不便な部分も …

no image
HDDは今のところ2TBが最高

1年以上前の記事です。内容が古い可能性があります。気になるハードディスクの現段階 …

いじめをなくすには犬を飼え。猫じゃダメです

1年以上前の記事です。内容が古い可能性があります。いじめが問題視されていますが、 …

no image
「META」タグを使ったページ移動について

1年以上前の記事です。内容が古い可能性があります。リダイレクトの基本中の基本「M …

no image
新ホームページ作成手順

1年以上前の記事です。内容が古い可能性があります。過去にホームページ作成の流れを …

僕のInstagram(インスタグラム)の使い方

1年以上前の記事です。内容が古い可能性があります。Instagram(インスタグ …

各種Webサービス連動メモ

1年以上前の記事です。内容が古い可能性があります。先日、話していた各サービスの連 …

ツイッターでよくある間違い探しを簡単に確実に当てる方法

1年以上前の記事です。内容が古い可能性があります。ツイッターでちょくちょく間違い …

GREE(グリー)を退会する方法【スマートフォン編】#1

1年以上前の記事です。内容が古い可能性があります。#1 | #2 | #3 せっ …

ツイッターとiPhoneの連絡先を同期する方法

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

血液型オヤジ