HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMの入力画像（Input Image）オブジェクト徹底解説

HTML DOM 入力画像オブジェクトとは

HTML DOM の入力画像（Input Image）オブジェクトは、HTMLドキュメント内の type="image" を持つ <input> 要素を表します。このタイプの入力フィールドは、画像を送信ボタンとして使用したい場合に活用されます。

ここでは、入力画像オブジェクトの作成方法と、利用可能なプロパティについて詳しく解説します。

構文（Syntax）

入力画像オブジェクトを作成するための基本構文は以下の通りです。

var imageInput = document.createElement("INPUT");
imageInput.setAttribute("type","image");

document.createElement() メソッドで INPUT 要素を生成し、setAttribute() メソッドで type 属性に「image」を指定することで、画像送信ボタンとして動作する要素を作成できます。

入力画像オブジェクトの主なプロパティ

HTML DOM 入力画像オブジェクトには、以下のようなプロパティが用意されています。

プロパティ説明
alt入力画像の alt 属性の値を取得・変更します。
autofocusページ読み込み時に自動フォーカスが設定されているかどうかを返します。
defaultValue入力画像のデフォルト値を取得・変更します。
disabled入力画像の disabled 属性の値を取得・変更し、無効化の状態を制御します。
formHTMLドキュメント内で入力画像フィールドを含むフォームへの参照を返します。
formActionformaction 属性の値を取得・変更します。
formEnctypeformenctype 属性の値を取得・変更します。
formMethodformmethod 属性の値（送信時のHTTPメソッド）を取得・変更します。
formNoValidateフォーム送信時にデータのバリデーション（検証）を行うかどうかを取得・変更します。
formTargetformtarget 属性の値（送信後の表示先）を取得・変更します。
height入力画像の height 属性の値を取得・変更します。
name入力画像の name 属性の値を取得・変更します。
src入力画像の src 属性の値（画像のURL）を取得・変更します。
type入力画像の type 属性の値を返します。
value入力画像の value 属性の内容を取得・変更します。
width入力画像の width 属性の値を取得・変更します。

サンプルコード

実際に入力画像オブジェクトを作成する例を見てみましょう。ボタンをクリックすると、画像送信ボタンが動的に生成される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   .btn{
      background-color:#db133a;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input Image オブジェクトの例</h1>
<button onclick="createIframe()" class="btn">画像送信ボタンを作成する</button>
<script>
   function createIframe() {
      var imageInput = document.createElement("INPUT");
      imageInput.setAttribute("type", "image");
      imageInput.setAttribute("src", "https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
      document.body.appendChild(imageInput);
   }
</script>
</body>
</html>

コードのポイント

  • document.createElement("INPUT") で新しい input 要素を生成しています。
  • setAttribute("type", "image") により、要素が画像送信ボタンとして機能するように設定しています。
  • src 属性に画像のURLを指定することで、ボタンに表示する画像を決定しています。
  • appendChild() で生成した要素を body に追加して画面に表示します。

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOMの入力画像（Input Image）オブジェクト徹底解説

「画像送信ボタンを作成する」ボタンをクリックすると、入力画像オブジェクトが生成されます。

HTML DOMの入力画像（Input Image）オブジェクト徹底解説

このように、JavaScriptを使えば HTML 内の <input type="image"> 要素を自由に操作でき、動的なフォームUIの構築が可能になります。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注