フォームの使い方/JavaScript

テキストを入力したり、データを選択、実行ボタンをクリックして貰う等してJavaScriptを動作させたい時があります。これは、フォームで実現可能です。

本項では、フォームを利用してJavaScriptを動作させる方法について説明します。

フォームの概要

 フォームを利用すると、ブラウザ上でテキスト入力欄やボタン等を表示させる事が出来ます。

formの利用例

 フォーム部品にはチェックボックスやラジオボタン等も使えます。又、入力したり選択したデータを利用して、JavaScriptを動作させる事も出来ます。

フォーム部品

 フォームは、<form>の中に部品を配置して使います。以下は<button>を配置した例です。

【formの利用例】
<form name="form1">
<button type="button" value="10" onclick="alert(document.form1.button1.value);" name="button1">数字が出ます</button>
</form>

 青字部分は、クリックした時の動作をJavaScriptで記述しています。「document.フォームの名前.部品の名前.value」でボタンの値を取り出して、アラート表示するようにしています。フォームと部品の名前は、赤字部分で定義したものを指定します。ボタンの値はvalueで定義している10です。緑字部分がボタン上に表示される文字です。

 フォームで利用出来る部品の例を以下に示します。

・汎用ボタン
 上で説明したボタンです。説明通りに記述すると、以下のように表示・動作します。
・テキスト
 テキストは、テキスト入力出来る窓です。

 上記は、以下のように記述しています。

<form name="form2">
<input type="text" value="テスト" size="10" name="text1">
<button type="button" onclick="alert(document.form2.text1.value);">表示</button>
</form>

 赤字部分はテキストに表示する初期値です。省略すると空白になります。青字部分はテキストの幅です。
・パスワード
 パスワードはテキストと同じですが、入力した文字が隠れるようになります。

 上記は、以下のように記述しています。

<form name="form3">
<input type="password" size="10" name="pass1">
<button type="button" onclick="alert(document.form3.pass1.value);">表示</button>
</form>

 テキストと違うのは、typeでpasswordと指定するだけです。
・テキストエリア
 テキストエリアは、複数行入力出来ます。
 上記は、以下のように記述しています。

<form name="form4">
<textarea rows="2" cols="10" name="area1">テスト</textarea>
<button type="button" onclick="alert(document.form4.area1.value);">表示</button>
</form>

 赤字部分は行数と幅の順で指定しています。青字部分はテキストエリアに表示する初期値です。省略すると空白になります。
・チェックボックス
 チェックボックスは、表示された選択肢の中から複数の選択が出来ます。以下はチェックした数字の合計を表示します。
10 20
 上記は、以下のように記述しています。

<form name="form5">
<input type="checkbox" name="check" checked="checked">10
<input type="checkbox" name="check">20
<button type="button" onclick="
var x=0,y=0;
if ( document.form5.check[0].checked ) {
    x = 10;
}
if ( document.form5.check[1].checked ) {
    y = 20;
}
alert(x + y);">
合計</button>
</form>

 赤字部分のように記述すると、ページが表示された時にチェックを入れた状態で表示されます。次の行のように省略すると、チェックしない状態で表示されます。
 青字部分はチェックが入っているかを判定しています。[]内は0から始まり、何番目のチェックボックスかを記述します。一番目にチェックが入っているとxに10を代入し、二番目にチェックが入っているとyに20を代入しています。alert(x + y);でその合計が表示されます。
・ラジオボタン
 ラジオボタンは、表示された選択肢の中から1つだけ選択出来ます。以下は、選択したボタンに対応した数字が表示されます。
選択1 選択2
 上記は、以下のように記述しています。

<form name="form6">
<input type="radio" name="radio1">選択1
<input type="radio" name="radio1" checked="checked">選択2
<button type="button" onclick="
if ( document.form6.radio1[0].checked ) {
    var x = 10;
}
if ( document.form6.radio1[1].checked ) {
    var x = 20;
}
alert(x);">
表示</button>
</form>

 赤字部分のように記述すると、ページが表示された時にチェックを入れた状態で表示されます。どのボタンにもこの記述がない場合、どれもチェックされていない状態で表示されます。
 if文を利用したラジオボタン選択の判定は、チェックボックスの時と殆ど同じです。
 ラジオボタンはnameが同じボタンを1組として、1つだけ選択出来ます。このため、nameを変えると異なるラジオボタンの組み合わせが作れます。

・セレクトボックス
 セレクトボックスも表示された選択肢から1つだけ選択出来ます。以下は選択した数字が表示されます。
 上記は、以下のように記述しています。

<form name="form7">
<select name="select1" size="1">
<option value=10>10</option>
<option value=20>20</option>
<option value=30>30</option>

</select>
<button type="button" onclick="alert(document.form7.select1.value);">選択した数字を表示</button>
</form>

 赤字部分は選択肢を表示する数です。例えば、3つの選択肢があってsize=2にすると、その内2つが表示され、残り1つはスクロールしないと見えません。青字部分は選択肢の記述です。
・リセットボタン
 リセットボタンは、入力や選択した値を初期化します。
 上記はテキストにデフォルトでテストと表示されるため、テキストを書き換えていてもテストに戻りますが、初期値が設定されていない場合は空白に戻ります。
 上記は、以下のように記述しています。

<form name="form8">
<input type="text" value="テスト" size="10" name="text2">
<button type="reset">リセット</button>
</form>

 リセットボタンが有効なのは、同じフォーム内の部品に対してだけです。異なるフォーム内の部品まではリセットされません。

関数の呼び出し

 これまで、フォーム部品内に直接スクリプトを記述しましたが、関数を使って呼び出す事も出来ます。

【formでの関数利用例】
<script>
function func1(){
    alert(document.form9.text3.value);
}

</script>

<form name="form9" >
<input type="text" size="10" name="text3">
<button type="button" name="button3" onclick="func1();">表示</button>
</form>

 赤字部分が関数の定義です。func1という関数を定義し、{}間に処理を記述します。青字部分でボタンを押した時に関数func1を呼び出しています。

 上記は、以下のように表示・動作します。

 テキスト入力欄に文字を入力し、「表示」ボタンをクリックすると、アラートで入力した文字が表示されます。

 これまで説明した動作と同じですが、関数は他のフォームからも呼び出せます。このため、スクリプトが長くて他のフォームでも同じ処理をさせたい場合は、何度も同じスクリプトを記述しなくて済みます。

ページのリロードへの対応

 これまでの例では、テキスト入力欄でエンターキーを押すとページのリロード、つまり再読み込みが行われます。この対応としてreturn falseで処理を中止し、ページをリロードしないように出来ます。

【return false利用例(関数使用)】
<script>
function func2(){
    alert(document.form10.text4.value);
    return false;
}
</script>

<form name="form10" onsubmit="return func2();">
<input type="text" size="10" name="text4">
<button type="submit" name="button4">表示</button>
</form>

 赤字部分が処理を中断するための記述です。緑字部分でsubmitを指定していると、ボタンをクリックした時に青字部分で指定した関数が呼び出されます。エンターキーを押してもボタンをクリックしたのと同様にfunc2が呼び出されますが、return falseがあるためページが再読み込みされません。

 以下が利用例です。テキスト入力欄でエンターキーをクリックしてもリロードされない事が確認出来ます。

 尚、関数を使わずに以下のように記述しても同じです。

【return false利用例(関数未使用)】
<form name="form10" onsubmit="alert(document.form10.text4.value);return false;">
<input type="text" size="10" name="text4">
<button type="submit" name="button4">表示</button>
</form>

 赤字のように、処理の最後でreturn falseを記述してリロードしないようにしています。

 因みに、フォームで<form action="URL">と記述すると、処理終了時に指定したURLに移動します。例えば、テキスト欄で住所等を入力すると、確認ページを表示したい場合等に使います。移動するページが指定されていない場合は、リロードになります。return falseは、このリロードを中断します。

名前ではなくidを使う

 「document.フォーム名.部品名.value」で値を取り出せると説明しましたが、idを利用しても取り出せます。

【idを利用した値の取り出し例】
<form id="form11">
<button type="button" value="10" onclick="alert(document.getElementById('button1').value);" id="button1">数字が出ます</button>
</form>

 赤字部分で青字のidを指定して、値を取り出します。

名前やidではなく数字で指定する

 名前やidではなく、document.forms[0].elements[0]等と指定も出来ます。[]内にページで何番目のフォーム、フォーム内で何番目の部品かを記述します。

フォームやエレメントの順番

 本ページでdocument.write(document.forms[0].elements[0].value);とスクリプトを記述すると、10と表示されます。これは、本ページで一番目のフォームは汎用ボタン説明で使っており、その最初の部品となるボタンには10の値がセットされているためです。

 この記述方法は、document.forms[0].elements[i].value等と変数を用いて記述し、for文等と組み合わせて利用する時に便利です。

length

 「document.フォーム名.部品名.length」でラジオボタン等における選択肢の数を取り出す事が出来ます。これを利用すると、前述のラジオボタンで示した例は、以下のようにも記述出来ます。

【length利用例】
<form name="form12">
<input type="radio" name="radio2" value="10">選択1
<input type="radio" name="radio2" value="20" checked="checked">選択2
<button type="button" onclick="
for ( var i = 0; i < document.form12.radio2.length; i++ ) {
    if ( document.form12.radio2[i].checked ) {
        var x = document.form12.radio2[i].value;
        break;
    }
}
alert(x);">
表示</button>
</form>

 ラジオボタンの数だけチェックしているかの判定を繰り返し、チェックしていればその値を取り出してアラート表示しています。ラジオボタンの数が多い場合に便利です。

フォーカス

 HTMLの<body>部分を<body onLoad="document.フォーム名.部品名.focus()">とすると、ページが表示された時にその部品が選択された状態になります。これをフォーカスと呼びます。

 .focus()を付けた部品にカーソルが移動してフォーカスされるため、以下のようにも使えます。

【focus()の利用例】
<form name="form13">
<input type="text" size="10" name="text5" onkeydown="if(event.keyCode == 13){document.form13.text6.focus();}">
<input type="text" size="10" name="text6" onkeydown="if(event.keyCode == 13){document.form13.text5.focus();}">
<button type="reset">リセット</button>
</form>

 赤字部分がエンターキーを押したかの判定で、青字部分でカーソルを移動しています。これを表示すると以下になります。

 片方のテキスト入力欄でエンターキーを押すと、他方のテキスト入力欄にカーソルが移動します。

iphoneでのズームへの対応

 iphoneでテキスト等の部品がフォーカスされると、拡大される事があります。これはテキスト、テキストエリア、セレクトボックス等のフォントサイズが16px未満の時に発生します。

iphoneのズーム例

 上記では、テキストにフォーカスした時に、ズームされて画面が右にはみ出ています。2本の指で内側に狭めるように操作するピンチインにより元に戻せますが、ページの都合上拡大させたくない場合は、以下のように記述します。

【iphoneでのズームへの対応例】
<style type="text/css">
<!--
.test1 {font-size:16px;}
-->
</style>
<form>
<input type="text" size="10" class="test1">
</form>

 赤字部分で、test1クラスのフォントサイズを16pxに定義しています。青字部分は、inputに対してtest1のクラスを指定し、フォントサイズを16pxにしています。このようにすると、textareaやselectでも使いたい時だけtest1クラスを指定して反映出来ます。

 ページ全体に適用したい場合は、赤字部分をinput,textarea,select {font-size:16px;}等にします。この場合は、青字部分がなくても反映されます。

前のページループ処理

  • このエントリーをはてなブックマークに追加

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)