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

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

概要

HTML DOM の Input Email disabled プロパティは、<input type="email"> で作成したメールアドレス入力フィールドが「有効」か「無効」かを、JavaScript から取得・設定するためのプロパティです。このプロパティを活用することで、ユーザーの操作に応じてフォームの入力可否を動的に制御できます。

なお、disabled を true に設定した入力フィールドは、クリックや文字入力ができなくなり、フォーム送信時にもその値は送信されなくなります。

構文

基本の構文は以下のとおりです。

値を取得する場合（ブール値 true / false を返す）

inputEmailObject.disabled

値を設定する場合（disabled にブール値を代入）

inputEmailObject.disabled = booleanValue

booleanValue に指定できる値

booleanValue には、次のいずれかのブール値を指定します。

booleanValue説明
trueメールアドレス入力フィールドが無効（disabled）であることを示します。
falseメールアドレス入力フィールドが無効化されていないことを示します。これがデフォルト値です。

サンプルコード

それでは、Input Email disabled プロパティを使用した具体的な例を見てみましょう。次のコードでは、「メールを確認」ボタンをクリックすると、メールアドレス入力フィールドが無効化され、送信完了のメッセージが画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Email disabled</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>メール入力の無効化</legend>
<label for="EmailSelect">社員メールアドレス :
<input type="email" id="EmailSelect" value="xyz@abc.com">
</label>
<input type="button" onclick="getdisabled()" value="メールを確認">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   function getdisabled() {
      inputEmail.disabled = true;
      divDisplay.textContent = 'メールアドレス： '+inputEmail.value+' を送信しました。';
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような表示になります。

「メールを確認」ボタンをクリックする前：

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

「メールを確認」ボタンをクリックした後：

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

このように、ボタンのクリックイベント内で inputEmail.disabled = true; を実行するだけで、メールアドレス入力フィールドを簡単に無効化できます。二重送信の防止や、確認済みの項目をロックしたい場合などに便利なテクニックです。

  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」に