ywork2020.com

Title

フォームの送信方式を操作する

目次 (INDEX)

methodとは

ここで説明するmethod とは次の語句からなるjavascriptのプロパティです。
method
読み: メソッド
意味: 方法 、方式 、手法

目次に戻る

methodプロパティの概要

このプロパティは、 form 要素から送信されるデータの送信方式を取得、または設定することができます。

つまり、form要素の method 属性の値を取得、または設定することができるということです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var strFormMethod = form.method;
form.method = strFormMethod;

目次に戻る

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

ここではform要素のmethod属性の値を取得して、結果欄に表示しています。

methodの使い方に関しては、 method 属性 のページを参照してください。

サンプルコード: CSS
<style>
	form{
		background-color: ##lightblue;
		padding: 1em;
	}
</style>
サンプルコード: HTML
<body>
	<form name="namForm" method="GET" action="送信先URL">
		<input type="text" value="サンプルテキスト" id="idInText">
	</form>
	<p><output id="idOutput">innerText</output></p>
</body>
  • 02-04: form (name="namForm": GETメソッドを設定したform要素です。)
  • 05: output (id="idOutput": 結果を表示するための要素です。)
サンプルコード: script
<script>
	let elmForm = document.forms.namedItem("namForm");
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = elmForm.method;
</script>
  • 02: elmForm (.namedItem("namForm")で、HTML 02:の要素をオブジェクトとして取得します。)
  • 03: elmOutput (.getElementById("idOutput")で、HTML 05:の要素をオブジェクトとして取得します。)
  • 04: elmOutput.innerText = elmForm.method (methodプロパティの値をinnerTextプロパティに代入しています。)
実行結果:

結果: id="idOutput"
innerText

目次に戻る