ywork2020.com

Title

form要素のname属性を操作する

目次 (INDEX)

nameとは

ここで説明するname とは次の語句からなるjavascriptのプロパティです。
name
読み: ネーム
意味: 名前

目次に戻る

nameプロパティの概要

このプロパティは、 form 要素に付けられた name 属性の値を操作することができます。

このプロパティは、読み書き可能であり、name属性の値を取得、または設定することができます。

目次に戻る

構文

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

var strFormName = form.name;
form.name = strFormName;

目次に戻る

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

ここでは、form要素のname属性の値を取得します。 このform要素にはid属性とname属性をもたせており、idの値を使って要素を特定して、nameの値を求めるといったサンプルです。

サンプルコード: HTML 
<body>
	<form action="URI" id="idForm" name="namForm">
		<input type="text" name="namText" value="テキスト">
	</form>
	<p><output id="idOutput">innerText</output></p>
</body>
  • 02-04: form (id="idForm" name="namForm" の要素です。このフォームのname属性の値を取得して表示します。)
  • 03: input type="text" (このサンプルでは、あまり意味を持ちません。)
  • 05: output (この要素のコンテンツにform要素のname属性の値を表示します。)
サンプルコード: script 
<script>
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = document.forms.namedItem("idForm").name;
</script>
  • 02: elmOutput (結果表示の出力のための要素です。formのname属性の値を出力します。)
  • 03: namedItem("idForm").name (form要素のid属性の値から要素を特定してname属性の値を取得します。)
実行結果:

innerText

目次に戻る