Sep.15th, 2020
＃
“type="image"”
| 送信可能な値 | なし |
| 妥当性のチェック | なし |
“type="image"”を指定した“input”要素は画像の送信ボタンを表します。
“type="image"”を指定した“input”要素はクリックされたときに関連付けられた“form”要素の入力内容を送信します。
“src”属性で指定した画像ファイルがボタンとして表示されます。また、何らかの理由により画像ファイルが表示できない場合は“alt”属性で指定した代替テキストが代わりに表示されます。
フォームの送信ボタンは“type="submit"”を指定した“input”要素や“type="submit"”を指定した“button”要素でも表すことができます。
サンプルコード
<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<label>猫の色：
<select name="sample01">
<option value="白猫">白猫</option>>
<option value="黒猫">黒猫</option>
<option value="白黒猫">白黒猫</option>
<option value="キジトラ猫">キジトラ猫</option>
<option value="茶トラ猫">茶トラ猫</option>
<option value="三毛猫">三毛猫</option>
<option value="ほかの猫">ほかの猫</option>
</select>
</label>
</fieldset>
<p>
<input type="image" src="sample-button.png" alt="次へ">
</p>
</form>
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| alt="" | 画像の代替テキスト | テキスト | 画像の代替テキスト |
| src="" | 画像ファイルの指定 | URL | ボタンとする画像ファイルのURL |
| type="" | 入力欄の種類 | image | 送信ボタン |
| 任意属性 | |||
| グローバル属性 | |||
| disabled="" | 入力欄を無効化 | disabled | 入力欄を無効化 |
form="" |
関連付けるフォーム | ID名 | 関連づける“form”要素の“id”属性の値 |
| formaction="" |
フォームに入力されたデータの送信先 | URL | フォームに入力されたデータの送信先のURL |
| formenctype="" |
フォームが送信するデータの形式 | application/x-www-form-urlencoded | 入力されたデータをURLエンコードして送信 |
| multipart/form-data | 入力されたデータをマルチパートデータとして送信 | ||
| text/plain | 入力されたデータをプレーンテキストとして送信 | ||
| formmethod="" |
フォームを送信時のHTTPメソッド | get | 入力されたデータを“action”属性で指定したURLにクエリ文字列として付加して送信 |
| post | 入力されたデータをHTTPリクエストの本文として送信 | ||
dialog |
フォームの送信時に“form”要素が含まれる“dialog”要素を閉じる | ||
| formnovalidate="" |
フォームの送信時に入力内容の妥当性をチェックしない | formnovalidate | フォームの送信時に入力内容の妥当性をチェックしない |
| formtarget="" |
フォームの送信時の応答画面の表示方法 | _blank | 新しいブラウジング・コンテキストに表示 |
| _self | 現在のブラウジング・コンテキストに表示 | ||
| _parent | 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示 | ||
| _top | 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示 | ||
| ブラウジング・コンテキスト名 | 任意のブラウジング・コンテキストに表示 | ||
popovertarget="" |
表示状態を切り替えるポップオーバー要素 | ID名 | 表示状態を切り替えるポップオーバー要素の“id”属性の値 |
| popovertargetaction="" |
ポップオーバー要素の表示状態の切り替え方法 | toggle | ポップオーバー要素の表示状態を切り替える |
| show | ポップオーバー要素を表示する | ||
| hide | ポップオーバー要素を閉じる | ||
| height="" |
画像の高さ | 正の整数 | 画像の大きさの高さのピクセル数 |
| name="" | 入力欄の名前 | 文字列 | 入力欄の名前 |
| width="" |
画像の横幅 | 正の整数 | 画像の大きさの横幅のピクセル数 |
＃
