name属性を使ったform要素へアクセスの例


name属性を使ったform要素へアクセスの例

form1

同じname属性を持った要素が複数存在する場合の例

form2

form要素のtypeプロパティとtypeプロパティの例

form3

name属性を使ったimgタグへアクセスの例


記事へ戻る --- 愚鈍人ホーム

htmlソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>name属性を使ったform要素へアクセスの例</title>
<script type="text/javascript">
	window.onload = function() {
		var select=document.form1.select;
		document.form1.button.onclick=function(){
			alert(select.options[select.selectedIndex].innerHTML
				+"が選択されています。");
			return false;
		}
		document.form2.button.onclick=function(){
			var inputs=document.form2.aaa;
			var msg="";
			for(var i=0;i<inputs.length;i++){
				msg+=(inputs[i].value+"\n");
			}
			alert(msg);
			return false;
		}
		document.form3.button.onclick=function(){
			alert("form3.button type="+this.type+",form.name="+this.form.name);
			return false;
		}
	};
</script>
</head>
<body>
<h1>name属性を使ったform要素へアクセスの例</h1>
<hr />
<h2>name属性を使ったform要素へアクセスの例</h2>
<form name="form1">
	form1<br />
	<select name="select">
		<option selected="selected">anchors</option>
		<option>applets</option>
		<option>forms</option>
		<option>images</option>
		<option>links</option>
	</select>
	<button name="button">選択されたoption内の文字列を表示</button>
</form>
<h2>同じname属性を持った要素が複数存在する場合の例</h2>
<form name="form2">
	form2<br />
	<input name="aaa" type="text" value="aaa[0]"/>
	<input name="aaa" type="text" value="aaa[1]"/>
	<button name="button">aaaの入力値を表示</button>
</form>
<h2>form要素のtypeプロパティとtypeプロパティの例</h2>
<form name="form3">
	form3<br />
	<button name="button">form3.buttonのtypeプロパティと親となるformのname属性を表示</button>
</form>
<h2>name属性を使ったimgタグへアクセスの例</h2>
<img name="image1" width="500"/>
<script type="text/javascript">
	document.image1.src="/gudon/images/sample/image1.jpg";
</script>
</body>
</html>