fieldset，legend，labelとelements配列とtype属性の関係

FORM部品

FORM部品のelements
記事へ戻る --- 愚鈍人ホーム
JavaScriptの参考書 ／  Ajaxの参考書 ／  HTMLの参考書 ／  CSSの参考書

 

htmlソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fieldset，legend，labelとelements配列とtype属性の関係</title>
<link href="/gudon/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>fieldset，legend，labelとelements配列とtype属性の関係</h1>
<hr />
<form name="form1" onsubmit="return false;">
	<fieldset name="fieldset1">
		<legend name="legend1">FORM部品</legend>
		<label name="label1" for="textBox1">一行テキストボックス：</label>
		<input type="text" id="textBox1" name="textBox1" /><br />
		<label name="label1" for="checkbox1">チェックボックス：</label>
		<input type="checkbox" id="checkbox1" name="checkbox1" /><br />
		<input name="button1" type="button" value="ボタン" onclick="button1_onclick();"/>
	</fieldset>
	<fieldset name="fieldset2">
		<legend name="legend2">FORM部品のelements</legend>
		<div id="msg"></div>
	</fieldset>
</form>
<script type="text/javascript">
	function button1_onclick() {
		var msg = "";
		var elements = document.form1.elements;
		for(var i = 0; i < elements.length; i++) {
			msg += (elements[i].name + "=" + elements[i].value +
			" , type="+elements[i].type+"<br />");
		}
		document.getElementById("msg").innerHTML = msg;
	}
</script>
</body>
</html>