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

HTML DOM Input Emailのsizeプロパティとは？取得・設定方法を実例付きで解説

HTML DOM の Input Email size プロパティは、<input type="email"> 要素の size 属性の値を取得（return）および設定（set）するために使用されます。size 属性は、入力フィールドに表示できる文字数（幅）を指定するものです。

なお、size 属性が明示的に定義されていない場合、このプロパティはデフォルト値である 「20」 を返します。

構文（Syntax）

size プロパティの基本的な構文は以下の通りです。

size 属性の値を取得する場合

inputEmailObject.size

size プロパティに数値を設定する場合

inputEmailObject.size = number

設定する値には正の整数を指定します。この数値は、入力フィールドのおおよその表示幅（文字数）として反映されます。

サンプルコード（Example）

ここでは、Input Email size プロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、メールアドレス入力欄の表示幅が拡張される仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>Input Email size</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-size</legend>
<label for="EmailSelect">Email Id :
<input type="email" id="EmailSelect" size="10">
</label><br>
<input type="button" onclick="increaseVisibility()" value="Increase Visibility">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   function increaseVisibility() {
      inputEmail.size = 30;
      divDisplay.textContent = 'Visibility Increased to '+inputEmail.size;
   }
</script>
</body>
</html>

コードのポイント

  • 初期状態では、メール入力欄の size 属性が 「10」 に設定されています。
  • 「Increase Visibility」ボタンをクリックすると、JavaScript の increaseVisibility() 関数が実行されます。
  • 関数内で inputEmail.size = 30; により size 値が 30 に変更され、入力欄の幅が広がります。
  • 同時に、変更後の size 値が画面上の div 要素にテキストとして表示されます。

実行結果（Output）

このコードを実行すると、以下のような結果が得られます。

「Increase Visibility」ボタンをクリックする前：

HTML DOM Input Emailのsizeプロパティとは？取得・設定方法を実例付きで解説

「Increase Visibility」ボタンをクリックした後：

HTML DOM Input Emailのsizeプロパティとは？取得・設定方法を実例付きで解説

このように、size プロパティを活用することで、JavaScript から動的に入力フィールドの表示幅を制御できます。ユーザーの操作に応じてフォームの見た目を変えたい場合などに便利な機能です。

  1. HTML DOM Input Search の size プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Input Search size プロパティは、検索入力フィールド（<input type=search>）の size 属性値を取得または設定するために使用されるプロパティです。size 属性は、検索フィールドの幅を文字数を単位として定義します。特に指定しない場合、デフォルトの幅は 20 文字です。構文（Syntax）size プロパティを設定する場合searchObject.size = numberここで number には、検索フィールドの幅を表す文字数を指定します。デフォルト値は 20 文字です。使用例（Example）以下は、Input Sear

  2. HTML DOM パスワード入力フィールドの size プロパティの使い方を解説

    size プロパティとはHTML DOM の Input Password size プロパティは、パスワード入力フィールド（<input type=password>）の size 属性値を設定または取得するために使用されるプロパティです。このプロパティでは、文字数を単位としてパスワードフィールドの幅を定義できます。デフォルトの幅は 20 文字です。構文size プロパティを設定する場合の構文は以下のとおりです。passwordObject.size = numberここで number は、文字数で表したパスワードフィールドの幅を意味します。デフォルト値は 20 文字です。サン