問い合わせフォームを改造しよう！――まずはHTMLから
作例は本連載でおなじみの架空の写真サイト「JPhoto.net」です。このサイトのインフォメーションページに設置された「お問い合わせフォーム」を改造してみましょう。まず、何も組み込んでいない状態のソースコードは以下のようになっています（元になる作例ページ）。この状態から、*印の必須項目をチェックして、入力がされていない場合にはアニメーションで不備を知らせるようにします。
組み込む前の状態。送信ボタンをクリックしてもテキストフィールドに動きはありません
■元のHTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力でござる">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<title>JPhoto.net - Information -</title>
</head>
<body>
<div id="contents">
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top">Top</a></li>
<li><a href="photo.html" id="menu-gallery">Gallery</a></li>
<li><a href="seacrh.html" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking">Ranking</a></li>
<li><a href="info.html" id="menu-info" class="current">Information</a></li>
</ul>
<br style="clear:both;">
<img src="images/shared/rank.gif">
<div id="about">
<p> このサイトについては、管理人であるOtohpが2005年から個人で運営している写真サイトです。</p>
<p>「JPhoto.net」のサイト名のとおり、これまでに管理人が週末を利用して撮り溜めた“日本の写真”を掲載しています。東京在住ということもあり東京都内の写真が中心ですが、時には京都や東北にも遠征して撮ったものもあります。</p>
<p> 主な使用機材はキヤノンのEOS 7。現在までに100点超の写真を掲載しました。なお、最新作品のほかに、過去の数千点に及ぶ膨大なストックの中からセレクトしたものも追加しています。</p>
<p> 作品の感想やリクエストがありましたら、以下のフォームからお問い合わせください。</p>
</div>
<img src="images/shared/rank2.gif">
<div id="formArea">
<form name="userDataForm" method="post">
<ul>
<li class="label"> </li>
<li class="comp"><h2>CONTACT</h2></li>
<li class="label">TITLE</li>
<li class="comp"><input type="text" name="title" id="title" size="50"></li>
<li class="label">NAME</li>
<li class="comp"><input type="text" name="name" id="name" size="50">*</li>
<li class="label">E-mail</li>
<li class="comp"><input type="text" name="email" id="email" size="50">*</li>
<li class="label">COMMENT</li>
<li class="comp"><textarea name="comment" cols="50" rows="5"></textarea></li>
<li class="label"> </li>
<li class="comp"><input type="submit" value="送信"></li>
<li class="label"> </li>
<li class="comp"><span style="font-size:0.7em;">*印は必須項目です。</span></li>
</ul>
</form>
</div>
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
</body>
</html>
最初にHTMLタグを設定しましょう。入力フォームのテキストフィールドには、name属性とid属性に同じ名前をつけておきます。ここでつけた名前は、後にスクリプトで組み込むときに必要になります。
TITLE : <input type="text" name="title" id="title"><br>
NAME : <input type="text" name="name" id="name">*<br>
E-mail : <input type="text" name="email" id="email">*<br>
COMMENT : <textarea name="comment" cols="20" rows="5"></textarea><br>
次に空欄をチェックするための関数を呼び出す設定をします。これは<form>タグに onSubmit="return formCheck()" を指定します。「onSubmit」は送信ボタンが押された時に発生するイベントで、この時に呼び出されるのが「formCheck()関数です。間違って<input type="submit">の送信ボタンに書かないように注意してください。送信ボタンに書いてしまうと機能しません。
<form name="userDataForm" method="post" onSubmit="return formCheck()">
以上でHTML側の準備は完了です。次にスクリプトを組み込んで、formCheck()関数が実行されるようにしましょう。
