スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

フォームの基礎

  • Posted by: javascriptmania
  • 2011-05-31 Tue 21:40:25
  • フォーム




ごく簡単なフォーム


フォームは、ウェブをリッチにするのに不可欠のツールです。

フォームを使うとウェブにユーザーによるアクションを加えることができます。

HTMLでは、フォームはフォームタグの中に各種部品のタグを埋め込んで表します。

<html>

<head>

</head>

<body>

<form>

<input type="text">

<input type="button" value="click">

</form>


</body>

</html>


テキストボックスとボタンだけの簡単なフォームです。
20110531_1

DOMの利用


フォームをJavaScriptで扱う場合、どの部品の情報かを特定するのが重要です。

その特定方法はDOM( Document Object Model )という手法を使います。DOMについては後の章で詳しく解説しますが、ここでは最低限の知識を書いておきます。

DOMを使うために、フォーム以下のタグに名前(name属性)をつけます。

<html>

<head>

</head>

<body>

<form name="form_name">

<input type="text" name="text_name">

<input type="button" value="click">

</form>

</body>

</html>


すると、上のソースでテキストボックスに入力された値は

document.form_name.text_name.value

と表されます。

これを分解すると
document.Webページの
form_name.form_nameという名前のフォームの
text_name.text_nameという名前のテキストボックスの
value
となります。

このように、DOMはHTMLを階層構造ととらえて情報を取得します。

では、実際にテキストボックスに入力した値を取得するプログラムを書いてみます。

<html>

<head>

<script type="text/javascript">
<!--

function gettext() {
alert(document.form_name.text_name.value);
}


// -->
</script>

</head>

<body>

<form name="form_name">

<input type="text" name="text_name">

<input type="button" value="click" onclick="gettext()">

</form>

</body>

</html>


上のソースでは、テキストボックスの値をダイアログで返すgettext()という関数を定義し、ボタンをクリックしたときにonclickイベントハンドラを使って実行するようにしました。


getElementById()メソッド


ちなみに、nameではなくidという属性を使って、getElememtById()というメソッドで値を取得することも可能です。

<html>

<head>

<script type="text/javascript">
<!--

function gettext() {
var txt=document.getElementById("text_name");
alert(txt.value);
}


// -->
</script>

</head>

<body>

<form>

<input type="text" id="text_name">

<input type="button" value="click" onclick="gettext()">

</form>

</body>

</html>


getElementById()メソッドを使うと、DOMの階層構造を一つ一つたどらなくても、値を知りたい入力部品のidが分かれば一発で求めることができます。

getElementById()については後にDOMを勉強したときに詳しく見ます。

関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/58-bc7ac0d5
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。