cman.jpWEBページ作成
広告
<input type="image"> 「画像ボタン」
<input type="image">は、サーバに<form>～</form>の間にある<input>の入力部品内容を送信するために使用するボタンです。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<input type="image">の属性
【構文】
ページTOP
<input type="image" name="smp1" src="btimg.gif" alt="確認する" ・・・>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| src="URI" | 画像に表示するURI | "../btimg.jpg" |
| alt="テキスト" | 画像が表示できない場合の代替テキスト【必須】 | "確認する" |
| name="固有名" | 入力に付ける固有名 | "text1" |
| value="値" | サーバに送信する値 | "A" |
| disabled | 入力の無効化 | "disabled" |
| height="高さ" | 画像の高さ（ピクセル） ※HTML5で追加 | "200" |
| width="幅" | 画像の幅（ピクセル） ※HTML5で追加 | "200" |
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" |
| autofocus | フォーカス（カーソル）を設定 ※HTML5で追加 | "autofocus" |
| formaction="URI" | 送信するURI指定 <form>のactionを上書き ※HTML5で追加 | "sample.cgi" |
| formmethod="get","post" | 送信時のHTTPプロトコル <form>のmethodを上書き ※HTML5で追加 | "get" or "post" |
| formenctype="値" | 送信時のエンコーディング方法 <form>のmethodを上書き ※HTML5で追加 | methodを参照 |
| formtarget="値" | フォーム送信後のページ表示方法 <form>のtargetを上書き ※HTML5で追加 | targetを参照 |
| formnovalidate | 入力の妥当性チェックを行わない ※HTML5で追加 | "formnovalidate" |
| グローバル属性 |
| |
| イベント属性 |
| |
<input type="image">のサンプル
<input type="image" name="bt01" src="btimg.gif" alt="確認する">
入力の無効化【disabled】
<input type="image" name="bt01" src="btimg.gif" alt="確認する" disabled>
見た目は変化がないが、ボタンが押せなくなる。
上記以外の属性は <input type="submit"> を参照ください。
<input type="image">を<a>「リンク」で代替
<style type="text/css">
<!--
#bt1 {
background-image : url(../../../image/a_sample1a.gif);
background-position: top left;
background-repeat: repeat-x;
text-align:center;
width:120px;
}
#bt1 a {
display: block;
padding: 7px;
font-size: 11px;
font-weight: bold;
overflow: hidden;
}
#bt1 a:link {
color: #333;
text-decoration: none;
}
#bt1 a:visited {
color: #333;
text-decoration: none;
}
#bt1 a:hover {
color: #fff;
text-decoration: none;
background-image : url(../../../image/a_sample1b.gif);
background-position: top left;
background-repeat: repeat-x;
}
#bt1 a:active {
color: #fff;
text-decoration: none;
background-image : url(../../../image/a_sample1b.gif);
background-position: top left;
background-repeat: repeat-x;
}
-->
</style>
～
<div id="bt1"><a href="../../sample/link/">リンクボタン</a></div>
<!--
#bt1 {
background-image : url(../../../image/a_sample1a.gif);
background-position: top left;
background-repeat: repeat-x;
text-align:center;
width:120px;
}
#bt1 a {
display: block;
padding: 7px;
font-size: 11px;
font-weight: bold;
overflow: hidden;
}
#bt1 a:link {
color: #333;
text-decoration: none;
}
#bt1 a:visited {
color: #333;
text-decoration: none;
}
#bt1 a:hover {
color: #fff;
text-decoration: none;
background-image : url(../../../image/a_sample1b.gif);
background-position: top left;
background-repeat: repeat-x;
}
#bt1 a:active {
color: #fff;
text-decoration: none;
background-image : url(../../../image/a_sample1b.gif);
background-position: top left;
background-repeat: repeat-x;
}
-->
</style>
～
<div id="bt1"><a href="../../sample/link/">リンクボタン</a></div>
詳細は <A> を参照ください。
留意事項
- ENTERキーが押された場合、imageが自動押下される。
複数のimageボタンがある場合、初めに定義されているimageボタンが有効となります。
広告