name属性を使ったform要素へアクセスの例
name属性を使ったform要素へアクセスの例
同じname属性を持った要素が複数存在する場合の例
form要素のtypeプロパティとtypeプロパティの例
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>