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

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

HTML DOMのInput Email typeプロパティは、<input type="email">要素のtype属性の値を取得または設定するために使用されます。このプロパティを活用することで、JavaScriptから動的に入力フィールドの種類を確認したり、必要に応じて変更したりすることが可能になります。

構文

以下に基本的な構文を示します。

文字列値を返す場合（取得）

inputEmailObject.type

typeに文字列値を設定する場合（設定）

inputEmailObject.type = stringValue

指定できる文字列値

「stringValue」には、以下の値を指定できます。

stringValue説明
email入力タイプがemail（メールアドレス用）であることを示します
datetime-local入力タイプがdatetime-local（日時選択用）であることを示します
radio入力タイプがradio（ラジオボタン）であることを示します
tel入力タイプがtel（電話番号用）であることを示し、モバイルデバイスではテンキーパッドが表示されます

サンプルコード

それでは、Input Email typeプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、入力フィールドのtype属性の値を大文字に変換してラベルに表示するシンプルな例です。

<!DOCTYPE html>
<html>
<head>
<title>Input Email type</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>
<fieldset>
<legend>Email-type</legend>
<label for="EmailSelect"></label>
<input type="email" id="EmailSelect" >
<input type="button" onclick="getTypeOfInput()" value="What to enter?">
</fieldset>
</form>
<script>
   var labelSelect = document.querySelector("label");
   var inputEmail = document.getElementById("EmailSelect");
   function getTypeOfInput() {
      labelSelect.innerHTML = inputEmail.type.toUpperCase()+' ID: ';
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

「What to enter?」ボタンをクリックする前：

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

「What to enter?」ボタンをクリックした後：

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

ボタンをクリックすると、JavaScriptの関数が呼び出され、入力フィールドのtype属性の値（この場合は「EMAIL」）がラベル部分に表示されることが確認できます。

まとめ

Input Email typeプロパティを使えば、入力フィールドのtype属性を簡単に取得・変更できます。フォームのバリデーション処理や、ユーザーの操作に応じた動的なUIの切り替えなど、実践的なWeb開発のさまざまな場面で役立つ便利なプロパティです。

  1. HTML DOMのInput Email maxLengthプロパティ徹底解説！取得・設定方法とサンプルコード

    HTML DOM の Input Email maxLength プロパティは、メールアドレス用の入力フィールド（<input type="email">）に対して、ユーザーが入力できる最大文字数を示す maxLength 属性を取得または設定するためのプロパティです。maxLength 属性が HTML 側で定義されていない場合、このプロパティは「-1」を返します。 maxLength を活用することで、フォーム送信前の段階で入力文字数を制限でき、無効なデータの送信を防ぎやすくなります。さらに、JavaScript から動的に値を書き換えれば、状況に応じて入

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

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