エディットボックスの使い方

---

まずエディットボックス２個用意しましょう！
とりあえず下のように書きます。
<FORM name="input">
<INPUT TYPE="text" SIZE="10" Name="edit1">
</FORM>

<FORM name="output">
<INPUT TYPE="text" SIZE="10" Name="edit2">
</FORM>

するとこのようなエディットボックスができました。

ここで上のエディトボックスの内容を下のエディットボックスに移す「関数」を作ってみましょう。
<SCRIPT Language="JavaScript"><!--
function move(){
//aに上のエディットボックスの値を入れる。
a=document.input.edit1.value;
//下のエディットボックスにaの値を入れる。
document.output.edit2.value = a;
}
// --></SCRIPT>

但し、これだけだと動きません。
どこかで関数を呼び出さなければいけません。
そこで　<A HREF="JavaScript:move();">実行</A>　という風にします。
すると実行　こんな風にクリックによって関数が実行させることができます。

ちなみに関数はどこにおいても良いので、今回は上の方に書いて見ました。
ソースを見て確認してください。


また、今回は入力フォームに input エディットボックスに edit1 という名前を付けましたが、次のようにして上のエディットボックスを参照することもできます。

document.forms[0].elements[0].value="hello"


　これは、１つ目のフォームの１つ目のコントロール(エレメント)に"hello"と表示させることができます。
　フォームの数が多くなったときなどに使用すると便利です。

SEO		[PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送