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","dialog" | 送信時のHTTPプロトコル <form>のmethodを上書き ※HTML5で追加 | "get" or "post" or "dialog" | ||||||||
| formenctype="値" | 送信時のエンコーディング方法 <form>のenctypeを上書き ※HTML5で追加 | enctypeを参照 | ||||||||
| formtarget="値" | フォーム送信後のページ表示方法 <form>のtargetを上書き ※HTML5で追加 | targetを参照 | ||||||||
| formnovalidate | 入力の妥当性チェックを行わない ※HTML5で追加 | "formnovalidate" | ||||||||
| popovertarget | 関連付けするポップオーバー要素を指定 ※HTML5以降に追加 | "id名" ポップオーバー要素のidを指定 | ||||||||
| popovertargetaction="toggle","show","hide" | 関連付けしたポップオーバー要素の切り替え ※HTML5以降に追加 |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<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> を参照ください。
留意事項
- 特になし
広告