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

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

  関連記事

Windowsムービーメーカーで動画を編集してWebに公開 [シリーズ動画#2]

1年以上前の記事です。内容が古い可能性があります。某企業で90分程度のイメージD …

「mention」とはどんな意味?

1年以上前の記事です。内容が古い可能性があります。最近、ツイッター(twitte …

Google日本語入力で「おみくじ」ができる

1年以上前の記事です。内容が古い可能性があります。Google日本語入力には色々 …

「開く」ダイアログボックスからデスクトップが消えた!復活させる(元に戻す)方法

1年以上前の記事です。内容が古い可能性があります。「開く」ダイアログボックスや「 …

自動車のタイヤ空気圧は300kPa程度までに抑えておこう

1年以上前の記事です。内容が古い可能性があります。ここのところ多いツイッターのリ …

「disる」とはどんな意味?

1年以上前の記事です。内容が古い可能性があります。久しぶりにどんな意味シリーズ。 …

自宅サーバーをやめてレンタルサーバーに変えた

1年以上前の記事です。内容が古い可能性があります。たぶん、気づいている人は殆どい …

カーナビがスマホになるかも。自動車とiPhoneを連携する「CarPlay」

1年以上前の記事です。内容が古い可能性があります。常々、カーナビに通信機能がつけ …

「まずはお問い合わせください」ではお問い合わせはしない

1年以上前の記事です。内容が古い可能性があります。最近は上司よりもむしろ部下から …

顧客を5段階のレベルで考えてみる

1年以上前の記事です。内容が古い可能性があります。ひとえにお客様(顧客)といって …

血液型オヤジ