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

HTMLDOMフォーム名プロパティ

HTML DOMフォーム名プロパティは、フォーム要素の名前属性に関連付けられています。フォーム名プロパティは、フォーム名属性値を設定または取得するために使用されます。フォーム名プロパティは、フォームに名前を付けます。

構文

以下は、-

の構文です。

フォーム名の設定-

formObject.name = name

ここで、名前はフォームの名前を指定します。

例

フォーム名プロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   form {
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function ChangeName() {
      document.getElementById("FORM1").name="FORM_2";
      document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
   }
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>Change the name of the form above by clicking the below button</p>
<button onclick="ChangeName()">Change Name</button>
<p id="Sample"></p>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMフォーム名プロパティ

「名前の変更」ボタンをクリックすると-

HTMLDOMフォーム名プロパティ

上記の例では

最初に、id =“ FORM1”、method =“ post”、action =“ / sample_page.php”、およびname属性値が“ FORM_1”に設定されたフォームを作成しました。フォームには、テキストタイプの2つの入力フィールドと、フォームデータをサーバーに送信するための送信ボタンが含まれています-

<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>

次に、ユーザーがクリックしたときにChangeName（）メソッドを実行する「ChangeName」ボタンを作成しました-

<button onclick="ChangeName()">Change Name</button>

ChangeName（）メソッドは、ドキュメントオブジェクトのgetElementById（）メソッドを使用してフォーム要素を取得し、その名前属性値を「FORM_2」に変更します。この変更は、innerHTML（）プロパティを使用してIDが「Sample」の段落に反映されます-

function ChangeName() {
   document.getElementById("FORM1").name="FORM_2";
   document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
}

  1. HTMLDOM名プロパティ

    HTML DOM nameプロパティは、要素の属性の名前に対応する文字列を返します。 以下は構文です- 文字列値を返す elementAttribute.name HTMLDOM名の例を見てみましょう プロパティ- <!DOCTYPE html> <html> <head> <title>HTML DOM name</title> <style>    * {       padding: 2px;       margin:5px; &

  2. HTMLDOMオブジェクトフォームプロパティ

    HTML DOM Object formプロパティは、要素の囲みフォームの参照を返します。 以下は構文です- フォームへの参照を返す オブジェクト ObjectElement.form オブジェクトフォームプロパティの例を見てみましょう − 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Object form</title> <style>    form {       width:70%;   &nbs