このページの本文へ

エラーでブルブル!! 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">&nbsp;</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">&nbsp;</li>
<li class="comp"><input type="submit" value="送信"></li>
<li class="label">&nbsp;</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>

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く