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

HTML DOM Input URLのplaceholderプロパティ解説！構文・使い方・実行例を紹介

HTML DOM の Input URL placeholder プロパティは、<input type="url"> 要素に対してプレースホルダー（入力ヒント用の文字列）を設定・取得するためのプロパティです。プレースホルダーは、ユーザーがどのような形式でテキストを入力すればよいのかを視覚的に伝える手がかりとして、Web フォームで広く活用されています。

構文

このプロパティは、以下のように記述して使用します。

  • プレースホルダーの文字列値を取得する場合
inputURLObject.placeholder
  • placeholder に文字列値を設定する場合
inputURLObject.placeholder = stringValue

使用例

それでは、Input URL placeholder プロパティの具体的な使用例を見てみましょう。このサンプルでは、ボタンをクリックすると URL 入力欄にプレースホルダーが動的に設定されます。

<!DOCTYPE html>
<html>
<head>
<title>Input URL placeholder</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>URL-placeholder</legend>
<label for="URLSelect">URL:
<input type="url" id="URLSelect">
</label>
<input type="button" value="Get an Example" onclick="setPlaceholder()">
</fieldset>
</form>
<script>
   var inputURL = document.getElementById("URLSelect");
   function setPlaceholder() {
      inputURL.placeholder = 'https://www.google.com';
   }
</script>
</body>
</html>

実行結果

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

「Get an Example」ボタンをクリックする前 −

HTML DOM Input URLのplaceholderプロパティ解説！構文・使い方・実行例を紹介

「Get an Example」ボタンをクリックした後 −

HTML DOM Input URLのplaceholderプロパティ解説！構文・使い方・実行例を紹介

補足：プレースホルダー利用時の注意点

プレースホルダーは、入力欄が空のときにのみ表示されるヒントテキストであり、実際の入力値（value）として扱われることはありません。そのため、フォーム送信時に値として送信されることもありません。ユーザーへの案内目的で使用し、重要な説明はラベルやヘルプテキストで併記するのが望ましい設計です。

  1. HTML DOM Textareaのplaceholderプロパティとは？取得・設定方法をサンプルコード付きで解説

    HTML DOM の Textarea placeholder プロパティを使用すると、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定された placeholder 属性の値を取得したり、変更したりすることができます。placeholder 属性は、ユーザーが入力する前にテキストエリア内に表示されるヒントテキスト（例：「お問い合わせ内容をご記入ください」など）を指定するために使われます。JavaScriptからこの値を動的に操作できるのが、このプロパティの特徴です。構文placeholder プロパティの基本的な構文は以下の通りです。1. placehol

  2. HTML DOM URLプロパティとは？使い方とサンプルコードを解説

    HTML DOM の URL プロパティは、現在のドキュメント（ページ）の URL に対応する文字列を返すプロパティです。読み取り専用のため、JavaScript からページの完全な URL を簡単に取得できます。 構文 URL プロパティの値を取得する基本的な構文は以下の通りです。 document.URL このプロパティは引数を取らず、ドキュメントの URL を文字列として返します。なお、類似の機能を持つ document.location.href との違いとして、document.URL は読み取り専用である点が挙げられます。 HTML DOM URL プロパティの使用例 ここでは、ボ