学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / HTML5(目的別) / <input> / type="image"

<input type="image"> …… 画像ボタンを作成する

<input>タグのtype属性の値にimageを指定すると、画像ボタンを作成します。 画像ファイルはsrc属性で指定します。画像ボタンにはalt属性が必須となります。

■type="image"の場合に指定可能な属性

type="image"
   画像ボタンを作成する
name属性
   ボタンに名前をつける
value属性
   ボタンの値を指定する
src属性
   ボタンに使用する画像ファイルのURIを指定する
alt属性
   type="image"の場合に、画像の代替テキストを指定(type="image"の場合には必須属性)
height属性
   type="image"の場合に、画像の高さを指定
width属性
   type="image"の場合に、画像の幅を指定 HTML5から追加
formaction属性
   送信先URLを指定 HTML5から追加
formenctype属性
   送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)(初期値はapplication/x-www-form-urlencoded) HTML5から追加
formmethod属性
   送信方法(HTTPメソッド)を指定(get・post)(初期値はget) HTML5から追加
formnovalidate属性
   入力されたデータの妥当性を確認しない(formnovalidate) HTML5から追加
formtarget属性
   フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名) HTML5から追加

■使用例

HTMLソース
<form action="cgi-bin/abc.cgi" method="post">
<p>
名前:<input type="text" name="namae">
</p>
<p>
<input type="image" src="images/kaeru.png" alt="押してケロ♪">
</p>
</form>
↓↓↓
ブラウザ上の表示

名前:

HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ