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

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

HTML DOM の Input URL form プロパティは、URL入力フィールド（<input type="url">）を囲んでいるフォームへの参照を返します。このプロパティを利用すると、JavaScriptから特定の入力要素がどのフォームに属しているかを簡単に取得できます。

構文

構文は以下の通りです −

フォームオブジェクトへの参照を返す場合：

inputURLObject.form

使用例

Input URL form プロパティの具体的な使用例を見てみましょう。以下のサンプルでは、URL入力フィールドが含まれるフォームのIDを取得して画面に表示します −

<!DOCTYPE html>
<html>
<head>
<title>Input URL 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="Larry Page">
<fieldset>
<legend>URL-form</legend>
<label for="URLSelect">URL :
<input type="URL" id="URLSelect" size="25">
</label>
<input type="button" onclick="getform()" value="Get Co-founder">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputURL = document.getElementById("URLSelect");
   function getform() {
      if(inputURL.value !== '')
         divDisplay.textContent = 'Co-founder: '+inputURL.form.id;
      else
         divDisplay.textContent = 'Please enter valid URL';
   }
</script>
</body>
</html>

出力

このコードを実行すると、以下のような結果が表示されます −

「Get Co-founder」ボタンをクリックする前 −

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

「Get Co-founder」ボタンをクリックした後 −

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

URLが入力された状態でボタンをクリックすると、formプロパティを通じて取得したフォームのID（この例では「Larry Page」）が画面に表示されます。一方、URLが空のままボタンをクリックした場合は、有効なURLの入力を促すメッセージが表示される仕組みです。

  1. HTML DOM Input URLのnameプロパティの使い方と取得・設定方法

    HTML DOMのInput URLオブジェクトにおけるnameプロパティは、入力フィールド(type=url)のname属性の値を文字列として返します。また、新しい文字列を代入することで、name属性の値を変更することも可能です。 nameプロパティとは name属性は、フォーム送信時にサーバーへデータを渡す際の識別子として利用される重要な属性です。JavaScriptからこの値を動的に取得したり書き換えたりすることで、柔軟なフォーム操作が実現できます。 構文 nameプロパティの基本的な構文は以下の通りです。 値を取得する場合 inputURLObject.name 値を設定する場合 in

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

    HTML DOM の Input URL maxLength プロパティは、URL入力フィールド（<input type=url>）に入力できる最大文字数を取得・設定するためのプロパティです。このプロパティが定義されていない場合、戻り値は「-1」となります。構文maxLength プロパティの基本的な構文は以下の通りです。maxLength 属性の値を取得する場合inputURLObject.maxLengthmaxLength プロパティに数値を設定する場合inputURLObject.maxLength = number使用例ここでは、Input URL の maxLength