29分でできる！ あのサイトの“技”を盗め ― 第12回
エラーでブルブル!! JavaScriptでおもしろフォーム
2008年12月01日 08時00分更新
■完成した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>
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo！の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
