フォームのtype="text"にアクセスしてvalueを取得する|JavaScript

フォームのtype="text"にアクセスしてvalueを取得する

	<form name="sample_form">
		<input type="text" id="aaa" name="aaa" value="初めてのフォーム" />
	</form>

フォームにアクセスする方法は3つある。
ひとつめはformオブジェクトを使う方法。
2つめはdocument.getElementById('');を使う方法。
3つめはdocument.getElementsByName('');を使う方法。

formオブジェクトとは

formオブジェクトはformにある全てのフィールドを配列として保持している。
配列の要素は通常の数値インデックスではなく、name属性に設定された値を使って格納されている。
formにname属性をつけて、formのname名 → inputのname名と追っていく。

<script type="text/JavaScript">
	window.onload = function(){
		var example1 = document.sample_form.aaa.value; // 正確にはdocument.forms.sample_form.aaa.value;
		console.log(example1);

		var example2 = document.getElementById('aaa').value;
		console.log(example2);

		var example3 = document.getElementsByName('aaa').item(0).value;
		console.log(example3);
		}
</script>
		すべて「初めてのフォーム」を取得できる

document.getElementsByName('')についてはこちら

インデックスにもどる