ywork2020.com

Title

formのデータ送信先を指定する

目次 (INDEX)

actionとは

ここで説明するaction とはHTML要素の属性です。
action
読み: アクション
意味: 行動、活動、行為、動作

目次に戻る

action属性の概要

この属性は、 form 要素の属性であり、フォームデータの送信先を表します。

form要素に包含された入力要素のデータは、その入力要素の name 属性の値と value 属性の値をセットにしてaction属性で指定したURLに引き渡されます。

目次に戻る

サンプルコードと実行結果

ここでは、form要素につけてあるaction属性の値を使ってデータを送信した場合のURLのサンプルを紹介します。

サンプルコード: HTML
<body>
	<form action="./property-action.html" method="GET" name="myForm">
		<div><input type="text" value="sampleText" name="myText"></div>
		<div><input type="number" value="123" name="myNumber"></div>
		<div><input type="submit" value="送信" disabled></div>
	</form>
</body>
  • 02-06: form (action属性 = このページのURLを相対参照で指定しています。つまり、このフォームからデータを送信した場合には、このページをリロードしてデータを受け取ることになります。)
  • 03: input type="text" (送信したデータは、URLの後に続き「?myText=sampleText」として添付されます。)
  • 04: input type="number" (送信したデータは、URLの後に続き「?myNumber=123」として添付されます。)
  • 03-04: 補足 (03と04行の送信したデータは、2つ合わせるとURLの後に続き「?myText=sampleText&myNumber=123」として添付されます。)
  • 05: input type="submit" (送信ボタンです。disabled属性を付けて、このボタンでは送信できないように設定しています。)
実行結果:

送信されたデータのサンプル:
innerText

目次に戻る