トップページ -> 研究道具箱と教材 -> JavaScript による Web プログラミング -> フォームに関する処理
[サイトマップへ]  

フォームに関する処理

この Web では，次のことを行う HTML ファイルの見本の説明を行います．

◆ 動作画面例

準備

◆ JavaScript に関する Web ブラウザの設定

HTMLファイルの例 

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

    <title>
      フォームのバリデーションとヒントの表示 (JQuery Form Validation And Hints を使用), テキストエリアの高さの自動拡大      
    </title>
    
    <link rel="stylesheet" href="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/demos-header.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/demo-errors.css" type="text/css" media="all" />
      <!-- jQuery 1.5.2 以下で動く (2011/09)  //--> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/js/jquery.form-validation-and-hints.js" type="text/javascript"></script>
    <script type="text/JavaScript" src="./jquery.elastic-1.6.11/jquery.elastic.source.js"></script>
    

  <style>
/*
 * 共通定義
 */

@charset "shift_jis";

* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
}
img {
	border: none;
}

body {
	font-size: 100%;
	font-family: "ＭＳ Ｐゴシック", sans-serif;
	color: #333333;
}

/*  
 * 配色，文字サイズ，レイアウトの大枠
 */

/* content01 クラス */
/*  配色／文字サイズ・パターン０１. h1, h2, h3, h4, は黒 */

.content01 h1 {
	font-size: 200%;
	padding: 20px;
	text-align: left; 
	background: #FFFFFF;
}
.content01 h2 {
	font-size: 140%;
	padding: 12px 12px 12px 32px;
	text-align: left; 
	background: #F7F4F4;
}
.content01 h3 {
	font-size: 115%;
	text-align: left; 
}
.content01 h4 {
	font-size: 110%;
	text-align: left; 
}
.content01 p {
	font-size: 100%;
}

.content01 th { 
	border-top: 1px solid #E0D0C0;
	border-bottom: 1px solid #E0D0C0;
	background: #ffffff;
}    
.content01 td {
	border-top: 1px solid #E0D0C0;
	border-bottom: 1px solid #E0D0C0;
	background: #F7F4F4;
}
  /* fieldset を少し右に寄せる */
.content01 fieldset {
	margin-left: 30px; 
}
  /* 赤みの文字 */
  /* 使い方の例：		<em class="request">（必須）</p> */
.content01 .request {
	color: #D04040;
	font-style: normal;
}
  /* 灰色の文字 */
  /* 使い方の例：		<span class="example">例：聖徳太子</span></p> */
.content01 .example {
	color: #707070;
	padding-left: 12px;
}
  /* 同意／確認を求める部分 */
.content01 .agree {
    font-size: 140%;
    text-align: center;
}
  /* マージン付きの文章 */
  /* 使い方の例：		<p class="welcome">ほげほげ</p> */
.content01 .welcome {
	margin: 30px 0 30px 30px;
}

  /* 著作権表示 */
  /* 使い方の例：		<p class="welcome">Copyright © 2012 Kaneko Kunihiko Lab. All Rights Reserved.</p> */
.content01 .copyright {
	margin: 30px 0 0 30px;
	padding: 20px 0;
	border-top: 1px solid #E0D0C0;
	text-align: center;
}
  /* submit ボタンの配色など */
  /* 使い方の例：<p class="submit"><input type="submit" value="登録する" /></p> */
.content01 .submit input {
	border: 3px double #E1D9CA;
	background: #FFFFFF;
}
.content01 .submit input:hover {
	border:  3px double #D04040;
	color: #D04040;
}

/*  
 * テーブル
 */


/* form640 クラス */
/* 使い方の例：<form action="" class="form640" id="myInputForm"> */

.form640 fieldset {
      border: none;
      margin-bottom: 35px;
}
  /* submit ボタン */
.form640 .submit {
	text-align: center;
}
.form640 .submit input {
        font-size: 140%;
	text-align: center;
	padding: 16px;
}

/* 幅６４０のテーブルヘッダ、パターン０１ */
/* テーブルの th の幅は 640px, th に padding, ボーダー  */
/* 使い方の例：<h3><table class="tableheader640_01"> <tr> <th> </th> </tr> </table></h3> */
   .tableheader640_01 table { 
        width: 100%;
        margin: 0;
        padding: 0; 
        align: left; 
        border-top: 0px; 
        border-bottom: 0px; 
        cellpadding: 0; 
        cellspacing: 0; 
    }
   .tableheader640_01 th { 
        width: 640px; 
	padding: 10px 16px;
	text-align: left;
        border-top: 3px solid #5c132f; 
	border-bottom: 1px solid #E0D0C0;
    }    
   .tableheader640_01 td { 
        width: 0px; 
        border-top: 0px; 
        border-bottom: 0px; 
   }
   .tableheader640_01 { 
        width: 0px; 
        border-top: 0px; 
        border-bottom: 0px; 
   }

/* 幅６４０のテーブル本体 */
/* テーブル本体(=td+th)の幅は 640px、th の幅は 128px, border-top は書かないように設定 */
/* 使い方の例：<table class="formpart640_01" cellspacing="0"> ... </table> */
.formpart640_01 table {
	width: 100%;
	border: none;
	margin-top: 0;
	margin-bottom: 30px;
}
.formpart640_01 th {
	width: 128px;
	padding: 10px 16px;
	text-align: left;
	border-top: 0px; 
}
.formpart640_01 td {
	width: 480px;
	padding: 10px 16px;
	text-align: left;
	border-top: 0px; 
}

  /* 入力欄に関するもの */
.formpart640_01 .text04 { 
       width: 37px;
}
.formpart640_01 .text12 { 
       width: 140px;
}
.formpart640_01 .text24 { 
       width: 295px;
}
.formpart640_01 .text48 { 
       width: 600px;
}
.formpart640_01 .text04:focus, 
.formpart640_01 .text12:focus, 
.formpart640_01 .text24:focus, 
.formpart640_01 .text48:focus,
.formpart640_01 .textarea:focus
{ 
       border: 1.5px solid #D04040;
}

.formpart640_01 .text04,
.formpart640_01 .text12,
.formpart640_01 .text24, 
.formpart640_01 .text48, 
.formpart640_01 .textarea:focus
{ 
	border: 1px solid #E1D9CA;
	padding: 3px;
}
  </style>

  </head>

  <body>
   <div class="content01">

    <h1> 
      フォームの見本
    </h1> 

    <h2> 
      会員情報の登録
    </h2> 

    <p class="welcome"> 
      下の欄にご記入の上，「登録」ボタンをクリックして下さい．
    </p> 

    <form action="" class="form640" id="form" > 
      <fieldset>
        <h3>
          <table class="tableheader640_01"> <tr> <th>氏名，年齢，会員種別</th> </tr> </table>
        </h3>

        <table class="formpart640_01" cellspacing="0">
          <tr>
            <th>
              <label for="name">氏名
              <em class="request">（必須）</em></label>
            </th>
            <td>
              <div class="field required"> 
                <input name="name" id="name" class="text12 verifyText" type="text"/> 
                <span class="iferror">氏名を記入して下さい</span> 
                <span class="example">例：聖徳太子</span> 
              </div> 
            </td>
          </tr>

          <tr>
            <th>
              <label for="furigana">フリガナ
              <em class="request">（必須）</em></label>
            </th>
            <td>
              <div class="field required"> 
                <input name="furigana" id="furigana" class="text12 verifyText" type="text"/> 
                <span class="iferror">フリガナを記入して下さい</span> 
                <span class="example">例：ショウトクタイシ</span> 
              </div> 
            </td>
          </tr>

          <tr>
            <th>
              <label for="age">年齢
              <em class="request">（必須）</em></label>
            </th>
            <td>
              <div class="field required"> 
                <input name="age" id="age" class="text04 verifyInteger" type="text" size="3"/> 
                <span class="iferror">年齢を記入して下さい</span> 
                <span class="example">例：20</span> 
              </div> 
            </td>
          </tr>

          <tr>
            <th>
              <label for="syubetsu">会員種別
              <em class="request">（必須）</em></label>
            </th>
            <td>
              <div class="field required"> 
                <input name="syubetsu" id="syubetsu001" class="radio" type="radio" value="一般" /> <label for="syubetsu001">一般</label>
                <input name="syubetsu" id="syubetsu002" class="radio" type="radio" value="家族割引" /> <label for="syubetsu002">家族割引</label>

                <span class="iferror">会員種別を選んで下さい</span> 
              </div> 
            </td>
          </tr>

        </table>
      </fieldset>

      <fieldset>
        <h3>
          <table class="tableheader640_01"> <tr> <th>パスワードの設定</th> </tr> </table>
        </h3>

        <table class="formpart640_01" cellspacing="0">
          <tr>
            <th>
              <label for="password">パスワード
              <em class="request">（必須）</em></label>
            </th>
            <td>
              <div class="field required"> 
                <input name="password" id="password" class="text12 verifyText" type="password"/> 
                <span class="iferror">パスワードを記入して下さい</span> 
                <span class="example">※ 半角のアルファベット（大文字，小文字），数字，英記号を使って下さい</span> 
              </div> 
            </td>
          </tr>

        </table>
      </fieldset>

      <fieldset>
        <h3>
          <table class="tableheader640_01"> <tr> <th>連絡先</th> </tr> </table>
        </h3>

        <table class="formpart640_01" cellspacing="0">
          <tr>
            <th>
              <label for="address">住所</label>
            </th>
            <td>
              <div class="field"> 
                <input name="address" id="address" class="text48" type="text"/> 
                <span class="example">例： ○○県○○市○○町○丁目 〇〇マンション○号棟○号室</span> 
              </div> 
            </td>
          </tr>

          <tr>
            <th>
              <label for="email">電子メールアドレス
              <em class="request">（必須）</em></label>
            </th>
            <td>
              <div class="field required"> 
                <input name="email" id="email" class="text24 verifyMail" type="text"/> 
                <span class="iferror">電子メールアドレスを記入して下さい</span> 
                <span class="example">例： mail@example.com</span> 
              </div> 
            </td>
          </tr>

          <tr>
            <th>
              <label for="contact">連絡方法
              <em class="request">（必須）</em></label>
            </th>
            <td>
              <div class="field required"> 
                <select name="contact" id="contact"> 
                  <option value="">連絡方法を選んで下さい…</option><br /> 
                  <option value="電子メール">電子メール</option><br /> 
                  <option value="郵便">郵便</option><br /> 
                </select> 
                <span class="iferror">連絡方法を選んで下さい</span> 
              </div> 
            </td>
          </tr>

        </table>
      </fieldset>

      <fieldset>
        <h3>
          <table class="tableheader640_01"> <tr> <th>ご意見・ご要望など</th> </tr> </table>
        </h3>

        <table class="formpart640_01" cellspacing="0">
          <tr>
            <th>
              <label for="request">自由記入欄</label>
            </th>
            <td>
              <div class="field"> 
                <textarea name="request" id="request" class="textarea" rows="10" cols="50" title="*自由に記入してください."></textarea> 
              </div> 
            </td>
          </tr>

        </table>
      </fieldset>

        <p class="agree"> 
          <div class="field required"> 
            <input class="checkbox" type="checkbox" name="terms" />規約に同意する<br /> 
            <span class="iferror">規約をご確認の上，チェックして下さい</span> 
          </div> 
        </p> 
  
    <p class="submit"> 
      <input class="submit" type="submit" value="登録" /> 
    </p> 

    </form> 

    <p class="copyright">Copyright © 2012 Kaneko Kunihiko Lab. All Rights Reserved.</p>

    
    <script type="text/javascript">
      $('#request').elastic();
    </script>
    

   </div> 
  </body>
</html>
フォームの hover 
jQuery(function () {
     jQuery("form :input").focus(function() {
          jQuery("label[for='" + this.id + "']").addClass("hover");
     });
 
     jQuery("form :input").blur(function() {
          jQuery("label[for='" + this.id + "']").removeClass("hover");
     });
});

Tips 

<script type="text/javascript">
$(function(){
     $(".withtips").click(function(){
      $("#tips").slideToggle("slow");
     });
});
</script>
    </head>


    <body>
<p class="withtips">データベース [クリック]</p>
<div id="tips">
     データベースは、大量のデータの集まりで、共有、長期間の利用がしやすいように整理されたもの
</div>

ツールチップの例 

jQuery(function(){
     $(".tooltip").hover(function() {
        $(this).next("span").animate({opacity: "show", top: "-30"}, "fast");}, function() {
               $(this).next("span").animate({opacity: "hide", top: "-30"}, "fast");
     });
});
</script>

<style>
.tips{
     background: #ccffff;
     border: 1px solid #fc6;
     height: 45px;
     position: relative;
     top: 0;
     left: 0;
     text-align: center;
     padding: 1em;
     display: none;
     }
</style>

    </head>


    <body>
<h1>
ツールチップ
</h1>

<p>
これは<span class="tooltip">いちご</span>です。
<span class="tips">いちごは３月から５月です</span>
</p>




印刷ボタン


jQuery(function(){
     $('.printdialog').click(function(){
          window.print();
          return false;
     });
});

<p class="printdialog">このページを印刷</p>