画像形式の送信ボタンを設置する

input type="image"

< input 【 インプット 】 type 【 タイプ 】 =" image 【 イメージ 】 ">

type属性にimageが指定されたinput要素は、画像形式の送信ボタンとなります。

使用できる属性

input要素で解説した以下の属性を同時に使用できます。src、alt属性は必須です。また、ボタンの表示サイズはheight、width属性でそれぞれ指定します。value属性で指定した値は、ボタンに表示されるラベルとして使用されます。

alt 【オルタナティブ 】 , autofocus 【オート・フォーカス 】 , disabled 【 ディスエーブルド 】 , form 【フォーム 】 , formaction 【フォーム・アクション 】 , formenctype 【フォーム・エンコード・タイプ 】 , formmethod 【フォーム・メソッド 】 , formnovalidate 【フォーム・ノー・ヴァリデート 】 , formtarget 【 フォーム・ターゲット 】 , height 【 ハイト 】 , name 【ネーム 】 , src 【 ソース 】 , value 【バリュー 】 , width 【 ウィズ 】

サンプルコード

以下の例では画像形式の送信ボタンを設置しています。画像ファイルはsrc属性で指定し、alt属性で代替テキストを用意します。

<form action="cgi-bin/example.cgi" method="post">
  <p>入力した情報を送信する</p>
  <input type ="image" name="submit" width="100" height="40" src="submit.png" alt=" 送信">
</form>

関連記事