HTMLFormElement - HTMLのform要素

JavaScript

// 要素を作成する
var element = document.createElement( "form" ) ;	// <form></form>

// 属性をセットする
element.action = "./form.php" ;	// →<form action="./form.php"></form>
element.method = "POST" ;	// →<form action="./form.php" method="POST"></form>

HTML

<form action="./form.php" id="hoge">
	<fieldset>
		<p><input name="foo"></p>
		<p><input name="bar"></p>
	</fieldset>
	<button>内容を送信</button>
</form>

JavaScript

// 要素の取得
var element = document.getElementById( "hoge" ) ;	// <form action="./form.php" id="hoge"> ... </form>

// インデックス番号で所属するフォームコントロール要素を取得
element[0] ;	// <fieldset> ... </fieldset>
element[1] ;	// <input name="foo">
element[2] ;	// <input name="bar">
element[3] ;	// <button>内容を送信</button>

HTML

<form action="./form.php" id="hoge">
	<input name="foo">
	<button>内容を送信</button>
</form>

JavaScript

// 要素の取得
var element = document.getElementById( "hoge" ) ;	// <form action="./form.php" id="hoge"> ... </form>

// name属性値で所属するフォームコントロール要素を取得
element.foo ;	// <input name="foo">

HTML

<form action="./form.php" id="hoge">
	<input name="foo" type="radio" value="1">選択肢1
	<input name="foo" type="radio" value="2">選択肢2
	<input name="foo" type="radio" value="3" checked>選択肢3
	<input name="foo" type="radio" value="4">選択肢4
	<button>内容を送信</button>
</form>

JavaScript

// 要素の取得
var element = document.getElementById( "hoge" ) ;	// <form action="./form.php" id="hoge"> ... </form>

// name属性値でRadioNodeListを取得
var radioNodeList = element.foo ;	// RadioNodeList

// RadioNodeListの内容
radioNodeList[0] ;	// <input name="foo" type="radio" value="1">
radioNodeList[1] ;	// <input name="foo" type="radio" value="2">
radioNodeList[2] ;	// <input name="foo" type="radio" value="3" checked>
radioNodeList[3] ;	// <input name="foo" type="radio" value="4">
radioNodeList.value ;	// "3" (選択肢3にチェックが付いていた場合)