<input type=”image”>|画像の送信ボタンを作成する

<input type="image">|画像の送信ボタンを作成する

<input>タグのtype属性に「image」を指定すると、任意の画像を使った送信ボタンを作成できます。
 
 

使用例

 
 

表示例

 
 

スポンサーリンク

src属性

画像ファイル名(URL)を指定します。
src属性は省略できません。
 
 

alt属性

alt属性には、画像が表す内容をテキストで指定します。
このテキストは、何らかの理由で画像が表示されなかった場合に、画像の代わりに表示されるものです。
そのため、あえて画像表示をオフにしているユーザーや、そもそも画像を見ることのできない検索ロボット(クローラー)であっても、画像と同じ意味が伝わるテキストを指定する必要があります。

alt属性は省略できません。
 
 

スポンサーリンク

width属性

画像の横幅を指定します。
ピクセル単位で0以上の数値を指定しましょう。
 
 

height属性

画像の高さを指定します。
ピクセル単位で0以上の数値を指定しましょう。
 
 

スポンサーリンク

formaction属性

フォームに入力されたデータを処理する、PHPやCGIなどのプログラムのURLを指定します。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたaction属性よりも優先されます。
 
 

formenctype属性

データを送信するときに、どのような形式にエンコードするのかを、MIMEタイプで指定します。
指定できる値は以下の3種類です。

  • application/x-www-form-urlencoded
    デフォルト
  • multipart/form-data
    ファイルを添付するようなフォーム
  • text/plain
    テキストのみのフォーム

 
 
formenctype属性がない場合は、デフォルトの「formenctype=”application/x-www-form-urlencoded”」として扱われます。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたenctype属性よりも優先されます。
 
 

スポンサーリンク

formmethod属性

データをどのような方法で送信するかを指定します。
指定できる値は以下の2種類です。

  • get
    action属性で指定したURLの後に「?」とフォームのデータを追加して送信(デフォルト)
  • post
    フォームのデータのみを本文として送信

 
 
formmethod属性がない場合は、「get」として扱われます。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたmethod属性よりも優先されます。
 
 

formnovalidate属性

フォームを送信するときに、入力されたデータが適切かどうかの検証を無効にすることができます。
こちらは、以下のいずれかの形式で指定します。

  • formnovalidate
  • formnovalidate=”formnovalidate”
  • formnovalidate=””

 
 
送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたnovalidate属性よりも優先されます。
 
 

スポンサーリンク

formtarget属性

データの送信結果をどのウィンドウ(またはフレーム)に表示するかを指定できます。
指定できる値は以下の通りです。

_blank 新規のウィンドウ(フレーム)に表示
_self 現在のウィンドウ(フレーム)に表示
_parent 現在のウィンドウ(フレーム)に親があれば、その親ウィンドウ(フレーム)に表示
_top フレームを解除してウィンドウ全体に表示
ターゲット名 任意の名前を付けたウィンドウ(フレーム)で表示

 
 
送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたtarget属性よりも優先されます。
 
 

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

スポンサーリンク

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 

スポンサーリンク

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

 
 

value属性

「送信」「送る」など、ボタンに表示するテキストを指定します。
value属性を省略した場合、デフォルトで表示されるテキストはブラウザによって異なります。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








<input type="image">|画像の送信ボタンを作成する