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

HTMLDOMフォームアクションプロパティ

HTML DOMフォームアクションプロパティは、フォーム要素のアクション属性に関連付けられています。フォームアクションプロパティは、ユーザーが送信した後にフォームデータを送信するWebページを指定します。この属性は、フォームが送信された後に呼び出され、フォームの送信先を指定します。

構文

以下は、-

の構文です。

フォームアクションプロパティを設定します-

formObject.action = URL

ここで、URLはフォームデータの送信先アドレスを指定します。絶対URLまたは相対URLにすることができます。

例

フォームアクションプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function changeAction() {
      document.getElementById("FORM1").action = "/example_web.asp";
      document.getElementById("Sample").innerHTML = "The action attribute value of the form is
      changed to /example_web.asp";
   }
</script>
</head>
<body>
<h1>Form action property example</h1>
<form id="FORM1" action="/sample.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAction()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMフォームアクションプロパティ

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

HTMLDOMフォームアクションプロパティ

上記の例では-

id =“ Form1”とアクション“ /sample.php”のフォームを作成しました。 action属性値は、フォームデータがsample.phpページとその相対URLに送信されることを指定します。フォームには、テキストフィールドとパスワードフィールドが含まれています。

<form id="FORM1" action="/sample.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

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

<button onclick="changeAction()">CHANGE</button>

changeAction（）メソッドは、「FORM1」要素を取得し、そのアクションプロパティ値を「/example_web.asp」に設定します。 IDが「Sample」の段落のinnerHTMLプロパティを使用して、ユーザーにテキストを表示することでこの変更を表示します-

function changeAction() {
   document.getElementById("FORM1").action = "/example_web.asp";
   document.getElementById("Sample").innerHTML = "The action attribute value of the form is changed to /example_web.asp";
}

  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