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

HTML DOM Input Email の form プロパティの使い方を徹底解説

HTML DOM の Input Email（type="email"） 要素における form プロパティは、その入力欄を囲んでいるフォーム（<form> 要素）への参照を返します。このプロパティを利用することで、JavaScript から親フォームの id 属性などの情報を取得したり、フォーム全体に対して操作を行ったりすることが可能になります。

構文

form プロパティの基本的な構文は以下のとおりです。

form オブジェクトへの参照を取得する場合

inputEmailObject.form

なお、対象の入力欄がどのフォームにも属していない場合は、null が返される点に注意してください。

サンプルコード

それでは、Input Email の form プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Email form</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form id="Multitech-MNC">
<fieldset>
<legend>Email-form</legend>
<label for="EmailSelect">Employee Email :
<input type="email" id="EmailSelect" value="xyz@abc.com">
</label>
<input type="button" onclick="getform()" value="Confirm Email">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   function getform() {
      if(inputEmail.value !== '')
         divDisplay.textContent = 'Logging Into: '+inputEmail.form.id;
      else
         divDisplay.textContent = 'Please enter valid email';
   }
</script>
</body>
</html>

コードの解説

このサンプルでは、id が「Multitech-MNC」であるフォームの中に、type="email" の入力欄とボタンが配置されています。「Confirm Email」ボタンをクリックすると getform() 関数が呼び出され、入力欄に値が入力されているかどうかがチェックされます。

  • 値が入力されている場合：inputEmail.form.id によって親フォームの id（Multitech-MNC）を取得し、「Logging Into: Multitech-MNC」というメッセージを表示します。
  • 値が空の場合：「Please enter valid email」（有効なメールアドレスを入力してください）というメッセージを表示します。

出力結果

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

「Confirm Email」ボタンをクリックする前：

HTML DOM Input Email の form プロパティの使い方を徹底解説

「Confirm Email」ボタンをクリックした後：

HTML DOM Input Email の form プロパティの使い方を徹底解説

このように form プロパティを使えば、入力要素からその親フォームへ簡単にアクセスでき、フォームの識別子や各種属性を動的に取得することができます。フォーム送信前のバリデーション処理などでも活用できる便利なプロパティです。

  1. HTML DOM Input Emailのvalueプロパティとは？構文と使用例を解説

    HTML DOM の Input Email value プロパティは、type=email を持つ input 要素の value 属性（現在入力・設定されている値）を文字列として返します。また、このプロパティに新しい文字列を代入することで、JavaScript からメールアドレスの値を動的に設定することも可能です。 構文 value プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputEmailObject.value 値を設定する場合 value 属性に任意の文字列を設定します。 inputEmailObject.value = String 使用例 それでは、Inp

  2. HTML DOM Input Email typeプロパティとは？構文と使用例を解説

    HTML DOMのInput Email typeプロパティは、<input type=email>要素のtype属性の値を取得または設定するために使用されます。このプロパティを活用することで、JavaScriptから動的に入力フィールドの種類を確認したり、必要に応じて変更したりすることが可能になります。 構文 以下に基本的な構文を示します。 文字列値を返す場合（取得） inputEmailObject.type typeに文字列値を設定する場合（設定） inputEmailObject.type = stringValue 指定できる文字列値 「stringValue」に