エラーでブルブル!! JavaScriptでおもしろフォーム (5/5)
2008年12月01日 08時00分更新
文●古籏一浩、ASCII.jp
■完成した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">
<script type="text/javascript" src="js/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript"> <!--
function formCheck(){
var checkList = ["name","email"];
for (var i=0; i<checkList.length; i++){
if (!Field.present(checkList[i])){
$(checkList[i]).visualEffect("Shake");
return false;
}
}
}
// --></script>
<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" onSubmit="return formCheck()">
<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>
