入力チェックフォーム

入力チェックサンプルフォーム

姓	（空白だとエラー）
名	（空白だとエラー）
メールアドレス	（空白＆a@a.a～形式になっていないとエラー）
電話番号	（空白＆0-0-0形式になっていないとエラー）
URL	（空白＆http://～形式になっていないとエラー）
郵便番号	（空白＆000-0000形式になっていないとエラー）
住所	（全角以外だとエラー（空白可）
チェックボックス（1つ用）	ドーナツ　（選択されていないとエラー）
チェックボックス（複数チェック用）	キャンディー　アイス　チョコ　（1つ以上選択されていないとエラー）
ラジオボタン	ケーキ　マカロン　クッキー　（選択されていないとエラー）
プルダウンメニュー	（選択されていないとエラー）

*JavaScriptのみのサンプルソースです。name属性、チェック方法、色の設定を変更してお使いください。

*このページのhtmlサンプルソースです。JavaScriptやFormタグなどをコピーし、設定を変更してお使いください。

<!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">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>入力チェックフォーム</title>
 </head>

<h3>登録フォーム</h3>
   <font size="2">
    <form action="http://autobiz.jp/js/complete.html" method="get" onSubmit="return FormCheck(fld,reqcolor,encolor)">
     <table style="border:double">
      <tr>
       <td>姓</td>
       <td><input type="text" name="name1" title="姓を入力してください"/>
        <br />
       </td>
      </tr>
      <tr>
       <td>名</td>
       <td><input type="text" name="name2" title="名を入力してください"/>
        <br />
       </td>
      </tr>
      <tr>
       <td>メールアドレス</td>
       <td><input type="text" name="email" title="メールアドレスを入力してください" />
        <br />
       </td>
      </tr>
      <tr>
       <td>電話番号</td>
       <td><input type="text" name="fld1" title="電話番号を入力してください"/>
        <br />
       </td>
      </tr>
      <tr>
       <td>URL</td>
       <td><input type="text" name="fld2" title="URLを入力してください" />
        <br />
       </td>
      </tr>
      <tr>
       <td>郵便番号</td>
       <td><input type="text" name="fld3" title="郵便番号を入力してください" />
        <br />
       </td>
      </tr>
      <tr>
       <td>住所</td>
       <td><input type="text" name="fld8" title="全角で入力してください"/>
        <br />
       </td>
      </tr>
      <tr>
       <td>チェックボックス（1つ用）</td>
       <td>ドーナツ<input type="checkbox" name="fld4[]" value="doughnut"  title="チェックしてください"/>
        <br />
       </td>
      </tr>
      <tr>
       <td>チェックボックス（複数チェック用）</td>
       <td>
        キャンディー<input type="checkbox" name="fld5[]" value="candy" title="いずれかをチェックしてください" />　
        アイス<input type="checkbox" name="fld5[]" value="icecream" />　
        チョコ<input type="checkbox" name="fld5[]" value="chocolate" />
        <br />
       </td>
      </tr>
      <tr>
       <td>ラジオボタン</td>
       <td>
        ケーキ<input type="radio" name="fld6" value="cake" title="ラジオボタンを選んでください" />　
        マカロン<input type="radio" name="fld6" value="macaron" />　
        クッキー<input type="radio" name="fld6" value="cookie" />
        <br />
       </td>
      </tr>
      <tr>
       <td>プルダウンメニュー</td>
       <td>
        <select name="fld7" title="プルダウンメニューから選んでください">
         <option selected>選択してください</option>
         <option value="jelly">ゼリー</option>
         <option value="pudding">プリン</option>
        </select>
        <br />
       </td>
      </tr>
     </table>
     <input type="submit" name="sbm" value="submit" />
    </form>
   </font>
  </body>
</html>