IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

prototype.js 1.4rc4 Part.2

JavaScript

なんか、この前書いてたやつが文字制限で書ききれなかったので三部構成にしてみました。
これが第二部

注：引数に要素の id 属性値を指定する関数及びコンストラクタは要素オブジェクトそのものを入れても同じ動作です。

Element

Element.visible
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){

    $('id0').style.display = 'none';

    if(Element.visible('id0')){
        alert($('id0').firstChild.nodeValue+'は居ます。');
    }
    else{
        alert($('id0').firstChild.nodeValue+'は居ません。');
    }
    if(Element.visible('id1')){
        alert($('id1').firstChild.nodeValue+'は居ます。');
    }
    else{
        alert($('id1').firstChild.nodeValue+'は居ません。');
    }
    if(Element.visible('id2')){
        alert($('id2').firstChild.nodeValue+'は居ます。');
    }
    else{
        alert($('id2').firstChild.nodeValue+'は居ません。');
    }
}

</script></head><body onload="main()"><div>
<div id='id0'>天野</div>
<div id='id1'>山下</div>
<div id='id2'>勝野</div>
</div></body></html>
Element.toggle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number){
    //  display 属性を反転させる
    Element.toggle('id'+number);  //  可変引数で複数可
}

</script></head><body><div>
<div><input type="button" onclick="main(0)" value="toggle">
&nbsp;<span id="id0">天野</span></div>
<div><input type="button" onclick="main(1)" value="toggle">
&nbsp;<span id="id1">山下</span></div>
<div><input type="button" onclick="main(2)" value="toggle">
&nbsp;<span id="id2">勝野</span></div>
</div></body></html>
Element.hide
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number){
    //  display 属性を none にして隠す。
    Element.hide('id'+number);  //  可変引数で複数可
}

</script></head><body><div>
<div><input type="button" onclick="main(0)" value="hide">
&nbsp;<span id="id0">天野</span></div>
<div><input type="button" onclick="main(1)" value="hide">
&nbsp;<span id="id1">山下</span></div>
<div><input type="button" onclick="main(2)" value="hide">
&nbsp;<span id="id2">勝野</span></div>
</div></body></html>
Element.show
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number){
    //  display 属性を削除して表示する。
    Element.show('id'+number);  //  可変引数で複数可
}

</script></head><body><div>
<div><input type="button" onclick="main(0)" value="show">
&nbsp;<span id="id0" style="display:none;">天野</span></div>
<div><input type="button" onclick="main(1)" value="show">
&nbsp;<span id="id1" style="display:none;">山下</span></div>
<div><input type="button" onclick="main(2)" value="show">
&nbsp;<span id="id2" style="display:none;">勝野</span></div>
</div></body></html>
Element.remove
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number){
    //  DOM ツリーから要素を削除する。
    Element.remove('id'+number);
}

</script></head><body><div>
<div id="id0"><input type="button" onclick="main(0)" value="remove">
&nbsp;<span>天野</span></div>
<div id="id1"><input type="button" onclick="main(1)" value="remove">
&nbsp;<span>山下</span></div>
<div id="id2"><input type="button" onclick="main(2)" value="remove">
&nbsp;<span>勝野</span></div>
</div></body></html>
Element.update
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number){
    //  DOM ツリーから要素を削除する。
    Element.update('id'+number, '<b>'+$('id'+number).firstChild.nodeValue+'<'+'/b>');
}

</script></head><body><div>
<div><input type="button" onclick="main(0)" value="太く">
&nbsp;<span id="id0">天野</span></div>
<div><input type="button" onclick="main(1)" value="太く">
&nbsp;<span id="id1">山下</span></div>
<div><input type="button" onclick="main(2)" value="太く">
&nbsp;<span id="id2">勝野</span></div>
</div></body></html>
Element.getHeight
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number){

    //  高さ表示
    alert("height : "+Element.getHeight('all'));

    //  DOM ツリーから要素を削除する。
    Element.remove('id'+number);

    //  高さ表示
    alert("height : "+Element.getHeight('all'));
}

</script></head><body><div id="all">
<div id="id0"><input type="button" onclick="main(0)" value="remove">
&nbsp;<span>天野</span></div>
<div id="id1"><input type="button" onclick="main(1)" value="remove">
&nbsp;<span>山下</span></div>
<div id="id2"><input type="button" onclick="main(2)" value="remove">
&nbsp;<span>勝野</span></div>
</div></body></html>
Element.hasClassName
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number, className){
    //  クラスがあるか表示
    alert(Element.hasClassName('id'+number, className) ? 'ある' : 'ない');
}

</script>
<style>
.r{color:#FF0000;}
.b{font-weight:bold;}
.i{font-style:italic;}
</style>
</head><body><div id="all">
<div>
<input type="button" onclick="main(0, 'r')" value="r">
<input type="button" onclick="main(0, 'b')" value="b">
<input type="button" onclick="main(0, 'i')" value="i">
&nbsp;<span id="id0" class="r b">天野</span></div>
<div>
<input type="button" onclick="main(1, 'r')" value="r">
<input type="button" onclick="main(1, 'b')" value="b">
<input type="button" onclick="main(1, 'i')" value="i">
&nbsp;<span id="id1" class="b i">山下</span></div>
<div>
<input type="button" onclick="main(2, 'r')" value="r">
<input type="button" onclick="main(2, 'b')" value="b">
<input type="button" onclick="main(2, 'i')" value="i">
&nbsp;<span id="id2" class="r i">勝野</span></div>
</div></body></html>
Element.addClassName
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number, className){
    //  クラスを追加
    Element.addClassName('id'+number, className);
}

</script>
<style>
.r{color:#FF0000;}
.b{font-weight:bold;}
.i{font-style:italic;}
</style>
</head><body><div id="all">
<div>
<input type="button" onclick="main(0, 'r')" value="r">
<input type="button" onclick="main(0, 'b')" value="b">
<input type="button" onclick="main(0, 'i')" value="i">
&nbsp;<span id="id0">天野</span></div>
<div>
<input type="button" onclick="main(1, 'r')" value="r">
<input type="button" onclick="main(1, 'b')" value="b">
<input type="button" onclick="main(1, 'i')" value="i">
&nbsp;<span id="id1">山下</span></div>
<div>
<input type="button" onclick="main(2, 'r')" value="r">
<input type="button" onclick="main(2, 'b')" value="b">
<input type="button" onclick="main(2, 'i')" value="i">
&nbsp;<span id="id2">勝野</span></div>
</div></body></html>
Element.removeClassName
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number, className){
    //  クラスを削除
    Element.removeClassName('id'+number, className);
}

</script>
<style>
.r{color:#FF0000;}
.b{font-weight:bold;}
.i{font-style:italic;}
</style>
</head><body><div id="all">
<div>
<input type="button" onclick="main(0, 'r')" value="r">
<input type="button" onclick="main(0, 'b')" value="b">
<input type="button" onclick="main(0, 'i')" value="i">
&nbsp;<span id="id0" class="r b i">天野</span></div>
<div>
<input type="button" onclick="main(1, 'r')" value="r">
<input type="button" onclick="main(1, 'b')" value="b">
<input type="button" onclick="main(1, 'i')" value="i">
&nbsp;<span id="id1" class="r b i">山下</span></div>
<div>
<input type="button" onclick="main(2, 'r')" value="r">
<input type="button" onclick="main(2, 'b')" value="b">
<input type="button" onclick="main(2, 'i')" value="i">
&nbsp;<span id="id2" class="r b i">勝野</span></div>
</div></body></html>
Element.cleanWhitespace
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(number){
    alert($('list').innerHTML);
    
    //  クラスを削除
    Element.cleanWhitespace('list');
    
    alert($('list').innerHTML);
}

</script>
</head><body><div id="list">
<div>天野</div>
<div>山下</div>
<div>勝野</div>
<input type="button" value="clean" onclick="main()">
</div></body></html>
Element.empty
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(i){
    //  ノードは空か？
    alert(Element.empty('id'+i) ? '空' : '空じゃない');
}

</script>
</head><body><div>
<div><input type="button" value="empty?" onclick="main(0)"><span id="id0"> </span></div>
<div><input type="button" value="empty?" onclick="main(1)"><span id="id1">&nbsp;</span></div>
<div><input type="button" value="empty?" onclick="main(2)"><span id="id2">text</span></div>
<div><input type="button" value="empty?" onclick="main(3)"><span id="id3"><span></span></span></div>
</div></body></html>
Element.scrollTo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    //  スクロール To
    Element.scrollTo('to');
}

</script>
</head><body><div>
<input type="button" onclick="main()" value="scrollTo">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br id="to">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div></body></html>
Element.getStyle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    //  style の取得
    alert(Element.getStyle('body', $('name').getAttribute('value')));
}

</script>
</head><body id="body"><div>
<input type="text" value="font-family" id="name">
<input type="button" onclick="main()" value="getBodyStyle">
</div></body></html>
Element.setStyle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){

    var styles = {};

    styles[$('name0').getAttribute('value')] = $('value0').getAttribute('value');
    styles[$('name1').getAttribute('value')] = $('value1').getAttribute('value');
    
    //  style の設定
    Element.setStyle('body', styles);
}

</script>
</head><body id="body"><div>
<div>値設定</div>
<input type="text" value="background-color" id="name0">
<input type="text" value="#FFFFCC" id="value0"><br>
<input type="text" value="color" id="name1">
<input type="text" value="#888800" id="value1"><br>
<input type="button" onclick="main()" value="setBodySyle">
</div></body></html>
Element.getDimensions
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    
    //  dimension を取得する。
    var dimension = Element.getDimensions('r');

    alert('height : '+dimension.width+'\nwidth : '+dimension.height);
}

</script>
</head><body onload="main()"><div>
<div id="r" style="width:100px;height:100px;background-color:#FF0000;color:#FFFFFF;">100x100</div>
</div></body></html>
Element.makePositioned
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    
    //  ポジションを指定する。
    Element.makePositioned('r');
    Element.setStyle('r', {top:"100px", bottom:"100px", left:"100px", right:"100px"});

}

</script>
</head><body onload="main()"><div>
<div id="r" style="width:100px;height:100px;background-color:#FF0000;color:#FFFFFF;">100x100</div>
</div></body></html>
Element.undoPositioned
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function make(){
    //  ポジションを指定する。
    Element.makePositioned('r');
    Element.setStyle('r', {top:"200px", bottom:"0px", left:"0px", right:"0px"});
}

function undo(){
    //  ポジションを指定する。
    Element.undoPositioned('r');
}

</script>
</head><body onload="main()"><div>
<div id="r" style="width:100px;height:100px;background-color:#FF0000;color:#FFFFFF;">100x100</div>
<input type="button" value="makePositioned" onclick="make()">
<input type="button" value="undoPositioned" onclick="undo()">
</div></body></html>
Element.makeClipping
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function make(){
    //  ポジションを指定する。
    Element.makeClipping('r');
    Element.toggle('b0', 'b1');
}

function undo(){
    //  ポジションを指定する。
    Element.undoClipping('r');
    Element.toggle('b0', 'b1');
}

</script>
</head><body onload="main()"><div>
<div id="r" style="width:100px;height:100px;background-color:#FF0000;color:#000000;font-size:120px;">100x100</div>
<input type="button" value="make" onclick="make()" id="b0">
<input type="button" value="undo" onclick="undo()" id="b1" style="display:none;">
</div></body></html>
Element.undoClipping
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function make(){
    //  ポジションを指定する。
    Element.makeClipping('r');
    Element.toggle('b0', 'b1');
}

function undo(){
    //  ポジションを指定する。
    Element.undoClipping('r');
    Element.toggle('b0', 'b1');
}

</script>
</head><body onload="main()"><div>
<div id="r" style="width:100px;height:100px;background-color:#FF0000;color:#000000;font-size:120px;">100x100</div>
<input type="button" value="make" onclick="make()" id="b0">
<input type="button" value="undo" onclick="undo()" id="b1" style="display:none;">
</div></body></html>

Insertion

Insertion.Before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    //  id="td" である要素の前に挿入。
    new Insertion.Before('td', '<td>□<'+'/td>');
}

</script></head>
<body>
<table border="2px">
    <tr>
        <td>■</td>
        <td id="td">■</td>
    </tr>
    <tr>
        <td>■</td>
        <td>■</td>
    </tr>
</table>
<form action="uri:bummy"><div>
<input type="button" value="insert" onclick="main()">
</div></form></body></html>
Insertion.Top
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    //  id="td" である要素の子要素の先頭に。
    new Insertion.Top('td', '<b>→<'+'/b>');
}

</script></head>
<body>
<table border="2px">
    <tr>
        <td>■</td>
        <td id="td">■</td>
    </tr>
    <tr>
        <td>■</td>
        <td>■</td>
    </tr>
</table>
<form action="uri:bummy"><div>
<input type="button" value="insert" onclick="main()">
</div></form></body></html>
Insertion.Bottom
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    //  id="td" である要素の子要素の末尾に。
    new Insertion.Bottom('td', '<b>←<'+'/b>');
}

</script></head>
<body>
<table border="2px">
    <tr>
        <td>■</td>
        <td id="td">■</td>
    </tr>
    <tr>
        <td>■</td>
        <td>■</td>
    </tr>
</table>
<form action="uri:bummy"><div>
<input type="button" value="insert" onclick="main()">
</div></form></body></html>
Insertion.After
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    //  id="td" である要素の後ろに挿入。
    new Insertion.After('td', '<td>□<'+'/td>');
}

</script></head>
<body>
<table border="2px">
    <tr>
        <td>■</td>
        <td id="td">■</td>
    </tr>
    <tr>
        <td>■</td>
        <td>■</td>
    </tr>
</table>
<form action="uri:bummy"><div>
<input type="button" value="insert" onclick="main()">
</div></form></body></html>

Element.ClassNames (extends Enumerable)

基本的な使い方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){

    //  オブジェクトの生成
    var classNames = new Element.ClassNames('classes');
    //  内容の表示
    alert(classNames);

    //  クラスの追加
    classNames.add('class3');
    //  内容の表示
    alert(classNames);

    //  クラスの削除
    classNames.add('class1');
    //  内容の表示
    alert(classNames);

    //  クラスの設定
    classNames.set('class4 class3 class5');
    //  内容の表示
    alert(classNames);

    //  each などの Enumerable の関数も使える
    classNames.each(alert);
}

</script></head>
<body onload="main()">
<div id="classes" class="class0 class1 class2"></div>
</body>
</html>

Field

Field.clear
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    alert('before clear');
    Field.clear('text');
    alert('text clear!');
    Field.clear('password');
    alert('password clear!');
    Field.clear('checkbox');
    alert('checkbox clear!');
    Field.clear('radio0', 'radio1');
    alert('radio clear!');
    Field.clear('submit');
    alert('submit clear!');
    Field.clear('reset');
    alert('reset clear!');
    Field.clear('hidden');
    alert('hidden clear!');
    Field.clear('image');
    alert('image clear!');
    Field.clear('s-select');
    alert('s-select clear!');
    Field.clear('m-select');
    alert('m-select clear!');
    Field.clear('textarea');
    alert('textarea clear!');
    Field.clear('s-option0', 's-option1', 's-option2', 's-option3', 's-option4');
    alert('s-option clear!');
    Field.clear('m-option0', 'm-option1', 'm-option2', 'm-option3', 'm-option4');
    alert('m-option clear!');
}

</script></head><body onload="main()"><div>
<form action="about:blank">
<table>
<tr><td>text</td><td><input id="text" type="text" name="text" value="text"></td></tr>
<tr><td>password</td><td><input id="password" type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input id="checkbox" type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio</td><td><input id="radio0" type="radio" name="radio" value="radio0" checked><input id="radio1" type="radio" name="radio" value="radio1"></td></tr>
<tr><td>submit</td><td><input id="submit" type="submit" name="submit" value="submit"></td></tr>
<tr><td>reset</td><td><input id="reset" type="reset" name="reset" value="reset"></td></tr>
<tr><td>hidden</td><td><input id="hidden" type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>image</td><td><input id="image" type="image" name="image" value="image"></td></tr>
<tr><td>s-select</td><td>
<select id="s-select" name="s-select">
<option id="s-option0" value="s-option0" selected>s-option0</option>
<option id="s-option1" value="s-option1">s-option1</option>
<option id="s-option2" value="s-option2">s-option2</option>
<option id="s-option3" value="s-option3">s-option3</option>
<option id="s-option4" value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select id="m-select" name="m-select" multiple>
<option id="m-option0" value="m-option0" selected>m-option0</option>
<option id="m-option1" value="m-option1">m-option1</option>
<option id="m-option2" value="m-option2">m-option2</option>
<option id="m-option3" value="m-option3">m-option3</option>
<option id="m-option4" value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea id="textarea" name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
</form>
</div></body></html>
Field.focus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function over(id){
    Field.focus(id);
}

</script></head><body><div>
<div>マウス乗せるとフォーカスするよ♪</div>
<form action="about:blank">
<table>
<tr><td>text    </td><td><input id="text"     onmouseover="over('text')"     type="text"     name="text"     value="text"    ></td></tr>
<tr><td>password</td><td><input id="password" onmouseover="over('password')" type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input id="checkbox" onmouseover="over('checkbox')" type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio   </td><td><input id="radio0"   onmouseover="over('radio0')"   type="radio"    name="radio"    value="radio0" checked>
                         <input id="radio1"   onmouseover="over('radio1')"   type="radio"    name="radio"    value="radio1"  ></td></tr>
<tr><td>submit  </td><td><input id="submit"   onmouseover="over('submit')"   type="submit"   name="submit"   value="submit"  ></td></tr>
<tr><td>reset   </td><td><input id="reset"    onmouseover="over('reset')"    type="reset"    name="reset"    value="reset"   ></td></tr>
<tr><td>hidden  </td><td><input id="hidden"   onmouseover="over('hidden')"   type="hidden"   name="hidden"   value="hidden"  ></td></tr>
<tr><td>image   </td><td><input id="image"    onmouseover="over('image')"    type="image"    name="image"    value="image"   ></td></tr>
<tr><td>s-select</td><td>
<select id="s-select" onmouseover="over('s-select')" name="s-select">
<option id="s-option0" value="s-option0" selected>s-option0</option>
<option id="s-option1" value="s-option1">s-option1</option>
<option id="s-option2" value="s-option2">s-option2</option>
<option id="s-option3" value="s-option3">s-option3</option>
<option id="s-option4" value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select id="m-select" onmouseover="over('m-select')" name="m-select" multiple>
<option id="m-option0" value="m-option0" selected>m-option0</option>
<option id="m-option1" value="m-option1">m-option1</option>
<option id="m-option2" value="m-option2">m-option2</option>
<option id="m-option3" value="m-option3">m-option3</option>
<option id="m-option4" value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea id="textarea" onmouseover="over('textarea')" name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
</form>
</div></body></html>
Field.present
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function clicked(){
    alert(Field.present('text', 'password', 'select', 'textarea')? 
            '設定済み' : '未設定項目有り');
}

</script></head><body><div>
<form action="about:blank">
<table>
<tr><td>text    </td><td><input id="text"     type="text"     name="text"    ></td></tr>
<tr><td>password</td><td><input id="password" type="password" name="password"></td></tr>
<tr><td>select</td><td>
<select id="select" name="select">
<option id="none"  value="" selected>none</option>
<option id="option0" value="option0">option0</option>
<option id="option1" value="option1">option1</option>
<option id="option2" value="option2">option2</option>
<option id="option3" value="option3">option3</option>
<option id="option4" value="option4">option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea id="textarea" name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
<br><br>
<div><input type="button" value="present" onclick="clicked()" style="font-size:32px;"></div>
</form>
</div></body></html>
Field.select
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function over(id){
    Field.select(id);
}

</script></head><body><div>
<div>マウス乗せるとセレクトするよ♪</div>
<form action="about:blank">
<table>
<tr><td>text    </td><td><input id="text"     onmouseover="over('text')"     type="text"     name="text"     value="text"    ></td></tr>
<tr><td>password</td><td><input id="password" onmouseover="over('password')" type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input id="checkbox" onmouseover="over('checkbox')" type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio   </td><td><input id="radio0"   onmouseover="over('radio0')"   type="radio"    name="radio"    value="radio0" checked>
                         <input id="radio1"   onmouseover="over('radio1')"   type="radio"    name="radio"    value="radio1"  ></td></tr>
<tr><td>submit  </td><td><input id="submit"   onmouseover="over('submit')"   type="submit"   name="submit"   value="submit"  ></td></tr>
<tr><td>reset   </td><td><input id="reset"    onmouseover="over('reset')"    type="reset"    name="reset"    value="reset"   ></td></tr>
<tr><td>hidden  </td><td><input id="hidden"   onmouseover="over('hidden')"   type="hidden"   name="hidden"   value="hidden"  ></td></tr>
<tr><td>image   </td><td><input id="image"    onmouseover="over('image')"    type="image"    name="image"    value="image"   ></td></tr>
<tr><td>textarea</td><td>
<textarea id="textarea" onmouseover="over('textarea')" name="textarea" rows="10" cols="10"></textarea>
</td></tr>
</table>
</form>
</div></body></html>
Field.activate
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function over(id){
    Field.activate(id);
}

</script></head><body><div>
<div>マウス乗せるとアクティベイト(フォーカス＆セレクト)するよ♪</div>
<form action="about:blank">
<table>
<tr><td>text    </td><td><input id="text"     onmouseover="over('text')"     type="text"     name="text"     value="text"    ></td></tr>
<tr><td>password</td><td><input id="password" onmouseover="over('password')" type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input id="checkbox" onmouseover="over('checkbox')" type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio   </td><td><input id="radio0"   onmouseover="over('radio0')"   type="radio"    name="radio"    value="radio0" checked>
                         <input id="radio1"   onmouseover="over('radio1')"   type="radio"    name="radio"    value="radio1"  ></td></tr>
<tr><td>submit  </td><td><input id="submit"   onmouseover="over('submit')"   type="submit"   name="submit"   value="submit"  ></td></tr>
<tr><td>reset   </td><td><input id="reset"    onmouseover="over('reset')"    type="reset"    name="reset"    value="reset"   ></td></tr>
<tr><td>hidden  </td><td><input id="hidden"   onmouseover="over('hidden')"   type="hidden"   name="hidden"   value="hidden"  ></td></tr>
<tr><td>image   </td><td><input id="image"    onmouseover="over('image')"    type="image"    name="image"    value="image"   ></td></tr>
<tr><td>s-select</td><td>
<select id="s-select" onmouseover="over('s-select')" name="s-select">
<option id="s-option0" value="s-option0" selected>s-option0</option>
<option id="s-option1" value="s-option1">s-option1</option>
<option id="s-option2" value="s-option2">s-option2</option>
<option id="s-option3" value="s-option3">s-option3</option>
<option id="s-option4" value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select id="m-select" onmouseover="over('m-select')" name="m-select" multiple>
<option id="m-option0" value="m-option0" selected>m-option0</option>
<option id="m-option1" value="m-option1">m-option1</option>
<option id="m-option2" value="m-option2">m-option2</option>
<option id="m-option3" value="m-option3">m-option3</option>
<option id="m-option4" value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea id="textarea" onmouseover="over('textarea')" name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
</form>
</div></body></html>

Form

Form.serialize
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    alert(Form.serialize('form'));
}

</script></head><body><div>
<form id='form' action="about:blank">
<table>
<tr><td>text</td><td><input type="text" name="text" value="text"></td></tr>
<tr><td>password</td><td><input type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio</td><td><input type="radio" name="radio" value="radio0" checked><input id="radio1" type="radio" name="radio" value="radio1"></td></tr>
<tr><td>submit</td><td><input type="submit" name="submit" value="submit"></td></tr>
<tr><td>reset</td><td><input type="reset" name="reset" value="reset"></td></tr>
<tr><td>hidden</td><td><input type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>image</td><td><input type="image" name="image" value="image"></td></tr>
<tr><td>s-select</td><td>
<select name="s-select">
<option value="s-option0" selected>s-option0</option>
<option value="s-option1">s-option1</option>
<option value="s-option2">s-option2</option>
<option value="s-option3">s-option3</option>
<option value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select name="m-select" multiple>
<option value="m-option0" selected>m-option0</option>
<option value="m-option1">m-option1</option>
<option value="m-option2">m-option2</option>
<option value="m-option3">m-option3</option>
<option value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
<br><br><div><input type="button" onclick="main()" value="serialize!!" style="font-size:32px;"></div>
</form>
</div></body></html>
Form.getElements
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    Form.getElements('form').each(function(o){alert(o.name+'='+o.value)});
}

</script></head><body><div>
<form id='form' action="about:blank">
<table>
<tr><td>text</td><td><input type="text" name="text" value="text"></td></tr>
<tr><td>password</td><td><input type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio</td><td><input type="radio" name="radio" value="radio0" checked><input id="radio1" type="radio" name="radio" value="radio1"></td></tr>
<tr><td>submit</td><td><input type="submit" name="submit" value="submit"></td></tr>
<tr><td>reset</td><td><input type="reset" name="reset" value="reset"></td></tr>
<tr><td>hidden</td><td><input type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>image</td><td><input type="image" name="image" value="image"></td></tr>
<tr><td>s-select</td><td>
<select name="s-select">
<option value="s-option0" selected>s-option0</option>
<option value="s-option1">s-option1</option>
<option value="s-option2">s-option2</option>
<option value="s-option3">s-option3</option>
<option value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select name="m-select" multiple>
<option value="m-option0" selected>m-option0</option>
<option value="m-option1">m-option1</option>
<option value="m-option2">m-option2</option>
<option value="m-option3">m-option3</option>
<option value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
<br><br><div><input type="button" onclick="main()" name="action" value="getElements!!" style="font-size:32px;"></div>
</form>
</div></body></html>
Form.getInputs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

//  表示用イテレータ
var alerter = function(o){alert(o.name+'='+o.value)};

//  全てのインプット要素を取得
function all(){$A(Form.getInputs('form')).each(alerter)}
//  type='radio' name='radio' のインプット要素を取得
function r(){$A(Form.getInputs('form', 'radio', 'radio')).each(alerter)}


</script></head><body><div>
<form id='form' action="about:blank">
<table>
<tr><td>text</td><td><input type="text" name="text" value="text"></td></tr>
<tr><td>password</td><td><input type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio</td><td><input type="radio" name="radio" value="radio0" checked><input id="radio1" type="radio" name="radio" value="radio1"></td></tr>
<tr><td>submit</td><td><input type="submit" name="submit" value="submit"></td></tr>
<tr><td>reset</td><td><input type="reset" name="reset" value="reset"></td></tr>
<tr><td>hidden</td><td><input type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>image</td><td><input type="image" name="image" value="image"></td></tr>
<tr><td>s-select</td><td>
<select name="s-select">
<option value="s-option0" selected>s-option0</option>
<option value="s-option1">s-option1</option>
<option value="s-option2">s-option2</option>
<option value="s-option3">s-option3</option>
<option value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select name="m-select" multiple>
<option value="m-option0" selected>m-option0</option>
<option value="m-option1">m-option1</option>
<option value="m-option2">m-option2</option>
<option value="m-option3">m-option3</option>
<option value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table><br><br>
<div><input type="button" onclick="all()" name="action0" value="all!!" style="font-size:32px;"></div>
<div><input type="button" onclick="r()" name="action1" value="radio!!" style="font-size:32px;"></div>
</form>
</div></body></html>
Form.disable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

//  フォームを無効化
function main(){
    Form.disable('form');
}

</script></head><body><div>
<form id='form' action="about:blank">
<table>
<tr><td>text</td><td><input type="text" name="text" value="text"></td></tr>
<tr><td>password</td><td><input type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio</td><td><input type="radio" name="radio" value="radio0" checked><input id="radio1" type="radio" name="radio" value="radio1"></td></tr>
<tr><td>submit</td><td><input type="submit" name="submit" value="submit"></td></tr>
<tr><td>reset</td><td><input type="reset" name="reset" value="reset"></td></tr>
<tr><td>hidden</td><td><input type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>image</td><td><input type="image" name="image" value="image"></td></tr>
<tr><td>s-select</td><td>
<select name="s-select">
<option value="s-option0" selected>s-option0</option>
<option value="s-option1">s-option1</option>
<option value="s-option2">s-option2</option>
<option value="s-option3">s-option3</option>
<option value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select name="m-select" multiple>
<option value="m-option0" selected>m-option0</option>
<option value="m-option1">m-option1</option>
<option value="m-option2">m-option2</option>
<option value="m-option3">m-option3</option>
<option value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table><br><br>
<div><input type="button" onclick="main()" name="action0" value="disable!!" style="font-size:32px;"></div>
</form>
</div></body></html>
Form.enable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function e(){
    Form.enable('form');
}

function d(){
    Form.disable('form');
    $('action').disabled='';
}


</script></head><body onload="d()"><div>
<form id='form' action="about:blank">
<table>
<tr><td>text</td><td><input type="text" name="text" value="text"></td></tr>
<tr><td>password</td><td><input type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio</td><td><input type="radio" name="radio" value="radio0" checked><input id="radio1" type="radio" name="radio" value="radio1"></td></tr>
<tr><td>submit</td><td><input type="submit" name="submit" value="submit"></td></tr>
<tr><td>reset</td><td><input type="reset" name="reset" value="reset"></td></tr>
<tr><td>hidden</td><td><input type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>image</td><td><input type="image" name="image" value="image"></td></tr>
<tr><td>s-select</td><td>
<select name="s-select">
<option value="s-option0" selected>s-option0</option>
<option value="s-option1">s-option1</option>
<option value="s-option2">s-option2</option>
<option value="s-option3">s-option3</option>
<option value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select name="m-select" multiple>
<option value="m-option0" selected>m-option0</option>
<option value="m-option1">m-option1</option>
<option value="m-option2">m-option2</option>
<option value="m-option3">m-option3</option>
<option value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table><br><br>
<div><input type="button" onclick="e()" id="action" name="action" value="enable!!" style="font-size:32px;"></div>
</form>
</div></body></html>
Form.findFirstElement
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    alert(Form.findFirstElement('form').name);
}

</script></head><body><div>
<form id='form' action="about:blank">
<table>
<tr><td>text0</td><td><input type="text" name="text0" value="text0" disabled="true"></td></tr>
<tr><td>hidden</td><td><input type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>text1</td><td><input type="text" name="text1" value="text1"></td></tr>
</table><br><br>
<div><input type="button" onclick="main()" name="action" value="findFirstElement!!" style="font-size:32px;"></div>
</form>
</div></body></html>
Form.focusFirstElement
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    alert(Form.focusFirstElement('form').name);
}

</script></head><body><div>
<form id='form' action="about:blank">
<table>
<tr><td>text0</td><td><input type="text" name="text0" value="text0" disabled="true"></td></tr>
<tr><td>hidden</td><td><input type="hidden" name="hidden" value="hidden"></td></tr>
<tr><td>text1</td><td><input type="text" name="text1" value="text1"></td></tr>
</table><br><br>
<div><input type="button" onclick="main()" name="action" value="focusFirstElement!!" style="font-size:32px;"></div>
</form>
</div></body></html>

Form.Element

Form.Element.serialize
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function over(id){
    alert(Form.Element.serialize(id));
}

</script></head><body><div>
<div>マウス乗せると要素をシリアライズするよ♪</div>
<form action="about:blank">
<table>
<tr><td>text    </td><td><input id="text"     onmouseover="over('text')"     type="text"     name="text"     value="text"    ></td></tr>
<tr><td>password</td><td><input id="password" onmouseover="over('password')" type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input id="checkbox" onmouseover="over('checkbox')" type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio   </td><td><input id="radio0"   onmouseover="over('radio0')"   type="radio"    name="radio"    value="radio0" checked>
                         <input id="radio1"   onmouseover="over('radio1')"   type="radio"    name="radio"    value="radio1"  ></td></tr>
<tr><td>submit  </td><td><input id="submit"   onmouseover="over('submit')"   type="submit"   name="submit"   value="submit"  ></td></tr>
<tr><td>reset   </td><td><input id="reset"    onmouseover="over('reset')"    type="reset"    name="reset"    value="reset"   ></td></tr>
<tr><td>hidden  </td><td><input id="hidden"   onmouseover="over('hidden')"   type="hidden"   name="hidden"   value="hidden"  ></td></tr>
<tr><td>image   </td><td><input id="image"    onmouseover="over('image')"    type="image"    name="image"    value="image"   ></td></tr>
<tr><td>s-select</td><td>
<select id="s-select" onmouseover="over('s-select')" name="s-select">
<option id="s-option0" value="s-option0" selected>s-option0</option>
<option id="s-option1" value="s-option1">s-option1</option>
<option id="s-option2" value="s-option2">s-option2</option>
<option id="s-option3" value="s-option3">s-option3</option>
<option id="s-option4" value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select id="m-select" onmouseover="over('m-select')" name="m-select" multiple>
<option id="m-option0" value="m-option0" selected>m-option0</option>
<option id="m-option1" value="m-option1">m-option1</option>
<option id="m-option2" value="m-option2">m-option2</option>
<option id="m-option3" value="m-option3">m-option3</option>
<option id="m-option4" value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea id="textarea" onmouseover="over('textarea')" name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
</form>
</div></body></html>
Form.Element.getValue
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function over(id){
    alert(Form.Element.getValue(id));
}

</script></head><body><div>
<div>マウス乗せると要素をシリアライズするよ♪</div>
<form action="about:blank">
<table>
<tr><td>text    </td><td><input id="text"     onmouseover="over('text')"     type="text"     name="text"     value="text"    ></td></tr>
<tr><td>password</td><td><input id="password" onmouseover="over('password')" type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input id="checkbox" onmouseover="over('checkbox')" type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio   </td><td><input id="radio0"   onmouseover="over('radio0')"   type="radio"    name="radio"    value="radio0" checked>
                         <input id="radio1"   onmouseover="over('radio1')"   type="radio"    name="radio"    value="radio1"  ></td></tr>
<tr><td>submit  </td><td><input id="submit"   onmouseover="over('submit')"   type="submit"   name="submit"   value="submit"  ></td></tr>
<tr><td>reset   </td><td><input id="reset"    onmouseover="over('reset')"    type="reset"    name="reset"    value="reset"   ></td></tr>
<tr><td>hidden  </td><td><input id="hidden"   onmouseover="over('hidden')"   type="hidden"   name="hidden"   value="hidden"  ></td></tr>
<tr><td>image   </td><td><input id="image"    onmouseover="over('image')"    type="image"    name="image"    value="image"   ></td></tr>
<tr><td>s-select</td><td>
<select id="s-select" onmouseover="over('s-select')" name="s-select">
<option id="s-option0" value="s-option0" selected>s-option0</option>
<option id="s-option1" value="s-option1">s-option1</option>
<option id="s-option2" value="s-option2">s-option2</option>
<option id="s-option3" value="s-option3">s-option3</option>
<option id="s-option4" value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select id="m-select" onmouseover="over('m-select')" name="m-select" multiple>
<option id="m-option0" value="m-option0" selected>m-option0</option>
<option id="m-option1" value="m-option1">m-option1</option>
<option id="m-option2" value="m-option2">m-option2</option>
<option id="m-option3" value="m-option3">m-option3</option>
<option id="m-option4" value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea id="textarea" onmouseover="over('textarea')" name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
</form>
</div></body></html>

Form.Element.Observer

基本的な使い方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    new Form.Element.Observer('elem', 1, function(element, value){alert('変更されました。')});
}

</script></head><body onload="main()"><div>
<div>変更してね</div>
<form action="about:blank">
<table>
<tr><td>text</td><td><input id='elem' type="text" name="text" value="text" ></td></tr>
</table>
</form>
</div></body></html>

Form.Observer

基本的な使い方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    new Form.Observer('form', 1, function(element, value){alert('変更されました。')});
}

</script></head><body onload="main()"><div>
<div>変更してね</div>
<form action="about:blank" id='form'>
<table>
<tr><td>text    </td><td><input type="text"     name="text"     value="text"    ></td></tr>
<tr><td>password</td><td><input type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio   </td><td><input type="radio"    name="radio"    value="radio0" checked>
                         <input type="radio"    name="radio"    value="radio1"  ></td></tr>
<tr><td>s-select</td><td>
<select name="s-select">
<option id="s-option0" value="s-option0" selected>s-option0</option>
<option id="s-option1" value="s-option1">s-option1</option>
<option id="s-option2" value="s-option2">s-option2</option>
<option id="s-option3" value="s-option3">s-option3</option>
<option id="s-option4" value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select name="m-select" multiple>
<option id="m-option0" value="m-option0" selected>m-option0</option>
<option id="m-option1" value="m-option1">m-option1</option>
<option id="m-option2" value="m-option2">m-option2</option>
<option id="m-option3" value="m-option3">m-option3</option>
<option id="m-option4" value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
</form>
</div></body></html>

Form.Element.EventObserver

基本的な使い方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    //  表示させるための関数オブジェクト
    var alerter = function(element, value){alert('変更されました。')};
    new Form.Element.EventObserver('elem0', alerter);
    new Form.Element.EventObserver('elem1', alerter);
}

</script></head><body onload="main()"><div>
<div>変更してね</div>
<form action="about:blank">
<table>
<tr><td>text0</td><td><input id='elem0' type="text" name="text0" value="text0"></td></tr>
<tr><td>text1</td><td><select id='elem1' name="select">
<option value="a" selected>a</option>
<option value="b">b</option>
</select>
</td></tr>
</table>
</form>
</div></body></html>

Form.EventObserver

基本的な使い方
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>Test</title><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">

function main(){
    new Form.EventObserver('form', function(element, value){alert('変更されました。')});
}

</script></head><body onload="main()"><div>
<div>変更してね</div>
<form action="about:blank" id='form'>
<table>
<tr><td>text    </td><td><input type="text"     name="text"     value="text"    ></td></tr>
<tr><td>password</td><td><input type="password" name="password" value="password"></td></tr>
<tr><td>checkbox</td><td><input type="checkbox" name="checkbox" value="checkbox"></td></tr>
<tr><td>radio   </td><td><input type="radio"    name="radio"    value="radio0" checked>
                         <input type="radio"    name="radio"    value="radio1"  ></td></tr>
<tr><td>s-select</td><td>
<select name="s-select">
<option id="s-option0" value="s-option0" selected>s-option0</option>
<option id="s-option1" value="s-option1">s-option1</option>
<option id="s-option2" value="s-option2">s-option2</option>
<option id="s-option3" value="s-option3">s-option3</option>
<option id="s-option4" value="s-option4">s-option4</option>
</select>
</td></tr>
<tr><td>m-select</td><td>
<select name="m-select" multiple>
<option id="m-option0" value="m-option0" selected>m-option0</option>
<option id="m-option1" value="m-option1">m-option1</option>
<option id="m-option2" value="m-option2">m-option2</option>
<option id="m-option3" value="m-option3">m-option3</option>
<option id="m-option4" value="m-option4">m-option4</option>
</select>
</td></tr>
<tr><td>textarea</td><td>
<textarea name="textarea" rows="10" cols="10">textarea</textarea>
</td></tr>
</table>
</form>
</div></body></html>