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

HTMLDOMフォームメソッドのプロパティ

HTML DOMフォームメソッドプロパティは、フォーム要素のメソッド属性に関連付けられています。このプロパティは、フォームデータをサーバーに送信する方法を指定するために使用されます。データを送信するアドレスは、action属性で指定されます。このプロパティは、フォームメソッドのプロパティ値を設定または取得します。

構文

以下は、-

の構文です。

メソッドプロパティの設定-

formObject.method = get|post;

ここで、getはデフォルトのメソッドであり、フォームデータをURLに追加します。例：URL？name =value＆name=value。通常は安全ではなく、プライベートではないデータに使用できます。ユーザーは、URL文字列を確認することで、送信されているデータを確認できます。

2番目のメソッドpostは、データをHTTP postトランザクションとして送信します。サーバーに送信されている間は誰もデータを見ることができないため、通常は安全です。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function ChangeMethod() {
      document.getElementById("FORM1").method="get";
      document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<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 method attribute value of the form above by clicking the below button</p>
<button onclick="ChangeMethod()">Change</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMフォームメソッドのプロパティ

[送信]ボタンをクリックしてURLを表示すると-

127.0.0.1:5500/sample_page.php

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

HTMLDOMフォームメソッドのプロパティ

今すぐ[送信]ボタンをクリックしてリンクを表示します。

127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22

上記の例では-

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

<form id="FORM1" method="post" action="/sample_page.php">
<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>

次に、ユーザーがクリックしたときにchangeMethod（）関数を実行する「変更」ボタンを作成しました。

<button onclick="ChangeMethod()">Change</button>

ChangeMethod（）関数は、ドキュメントオブジェクトのgetElementById（）メソッドを使用してフォーム要素を取得し、そのメソッド属性値を「get」に設定します。値を「get」に変更すると、ユーザーデータをURLに表示できるようになります。 IDが「Sample」の段落のinnerHTMLプロパティを使用して、この変更に関する目的のテキストを表示します-

function ChangeMethod() {
   document.getElementById("FORM1").method="get";
   document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}
に変更されました
  1. HTMLDOMTextareaフォームプロパティ

    HTML DOM Textareaフォームプロパティは、テキストエリアを囲むフォームの引用を返します。 構文 以下は構文です- object.form HTML DOM Textareaフォームプロパティの例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #363946;       col

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

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