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

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>

関連記事