フォームの作成タグについてはこちらを参照のこと
〆 自動計算
 JavaScript
|
| File Edit Tool Help |
|
|
<head>
<title></title>
<script type="text/javascript">
// 合計計算用
function MyCalc(arg1, price, total){
var cnt = arg1.options[arg1.selected="selected"Index].value;
total.value = cnt * price.value;
return false;
}
</script>
</head>
<body>
<form name="form1" action="" >
<table>
<tr bgcolor="#f0f0e8">
<th>品番</th><th>品名</th><th>単価</th><th>数量</th><th>小計</th></tr>
<tr><td>50001</td><td>Pentax MZ3</td>
<td>
<input type="hidden" name="price1" value="30000" />30,000
</td>
<td>
<select name="count1" onChange="MyCalc(this, price1, total1)">
<option> 0 </option><option selected="selected"> 1 </option>
<option> 2 </option><option> 3 </option>
</select>
</td>
<td>
<input type="text" name="total1" size="12" value="" readonly="readonly" />
</td>
</tr>
<tr><td>50002</td><td>Pentax DS2</td>
<td>
<input type="hidden" name="price2" value="56000" />56,000
</td>
<td>
<select name="count2" onChange="MyCalc(this, price2, total2)">
<option> 0 </option><option selected="selected"> 1 </option>
<option> 2 </option><option> 3 </option>
</select>
</td>
<td>
<input type="text" name="total2" size="12" value="" readonly="readonly" />
</td>
</tr>
</table>
</form>
|
〆 三桁区切り表示
|
JavaScript
|
| File Edit Tool Help |
|
|
<head>
<title></title>
<script type="text/javascript">
// ３桁区切り変換
function InsComma(arg){
var tmp = new String(arg);
var out = "";
var sign = "";
var deci = "";
//小数の処理
if(tmp%1 != 0){
//小数の場合
tmp.match(/[.]/, "");
deci = RegExp.rightContext;
if(tmp<0){
//マイナスの場合
tmp = Math.floor(tmp/1) + 1;
}else{
tmp = Math.floor(tmp/1);
}
}
//マイナスの処理
if(tmp<0){
sign = "-";
tmp = Math.abs(tmp);
}
do{
rem = tmp%1000;
div = Math.floor(tmp/1000);
if(div > 0){
if(rem < 10){
rem = "00" + rem
}else if(rem < 100){
rem = "0" + rem
}
out = "," + rem + out;
tmp = div;
}else{
out = rem + out;
break;
}
}while(tmp > 0)
if(deci != ""){
out = sign + out + "." + deci;
}else{
out = sign + out;
}
return out;
}
// 合計計算用(３桁区切り)
function MyCalc2(arg1, price, total){
var cnt = arg1.options[arg1.selected="selected"Index].value;
total.value = InsComma(cnt * price.value);
return false;
}
</script>
</head>
<body>
<form name="form2" action="" >
<table>
<tr bgcolor="#f0f0e8">
<th>品番</th><th>品名</th><th>単価</th><th>数量</th><th>小計</th></tr>
<tr><td>50003</td><td>Pentax K10D</td>
<td>
<input type="hidden" name="price3" value="96000" />96,000
</td>
<td>
<select name="count1" onChange="MyCalc2(this, price3, total3)">
<option value="0"> 0 </option><option value="1" selected="selected"> 1 </option>
<option value="2"> 2 </option><option value="3"> 3 </option>
<option value="4"> 4 </option><option value="5"> 5 </option>
<option value="10"> 10 </option><option value="11"> 11 </option>
</select>
</td>
<td>
<input type="text" name="total1" size="12" value="" />
</td>
</tr>
</table>
</form>
|
〆 フォーム(必須入力項目が入力されたかどうか)のチェックと
フォーム内容を消すリセット
 JavaScript
|
| File Edit Tool Help |
|
|
<head>
<script type="text/javascript">
// Nullチェック
function NullCheck(arg){
var str = arg.value;
if(str == ""){
// Nullの場合
window.alert("入力が不足しています。入力して下さい！");
return 1;
}else{
return 0;
}
}
// 名前チェック (必須項目が入力されたかどうか)
function NameCheck(arg1, arg2){
var flag = 0;
flag += NullCheck(arg1);
flag += NullCheck(arg2);
if(flag == 0) {
window.alert("お名前：" + arg1.value + " "+ arg2.value + " 様");
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form5" method="post" action=".\test.pl"
onSubmit="return NameCheck(this.sname, this.fname)">
お名前<input type="text" name="sname" size="8" value="" />
<input type="text" name="fname" size="8" value="" />
<input type="submit" value="確認" />
<input type="reset" value="リセット"/>
</form>
|
〆 フォーム(必須入力項目がふりがなのみで入力されたかどうか)のチェック
|
JavaScript
|
| File Edit Tool Help |
|
|
<head>
<script type="text/javascript">
// Nullチェック
function NullCheck(arg){
var str = arg.value;
if(str == ""){
// Nullの場合
window.alert("入力が不足しています。入力して下さい！");
return 1;
}else{
return 0;
}
}
// ひらがなチェック
function HiraCheck(arg){
var str = arg.value;
if(str.match( /[^ぁ-ん \s]+/ )){
// ひらがな、全角スペース以外が入力されている場合
window.alert(str + " : ひらがなのみで入力して下さい！");
return 1;
}else{
return 0;
}
}
// カタカナチェック
function KataCheck(arg){
var str = arg.value;
if(str.match( /[^ァ-ン \s]+/ )){
// カタカナ、全角スペース以外が入力されている場合
window.alert(str + " : カタカナのみで入力して下さい！");
return 1;
}else{
return 0;
}
}
// 名前ふりがなチェック
function Name2Check(arg1, arg2){
var flag = 0;
flag += NullCheck(arg1);
flag += NullCheck(arg2);
flag += HiraCheck(arg1);
flag += HiraCheck(arg2);
if(flag == 0){
window.alert("お名前(ふりがな)：" + arg1.value + " "+ arg2.value + " 様");
return true;
}else{
return false;
}
}
// 名前フリガナチェック
function Name3Check(arg1, arg2){
var flag = 0;
flag += NullCheck(arg1);
flag += NullCheck(arg2);
flag += KataCheck(arg1);
flag += KataCheck(arg2);
if( flag == 0 ) {
window.alert("お名前(フリガナ)：" + arg1.value + " "+ arg2.value + " 様");
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form6" method="post" action=".\test.pl"
onSubmit="return HiraCheck(this.sname2, this.fname2)">
ふりがな<input type="text" name="sname2" size="10" value="" />
<input type="text" name="fname2" size="10" value="" />
<input type="submit" value="確認" />
</form><br />
<form name="form7" method="post" action=".\test.pl"
onSubmit="return Name3Check(this.sname3, this.fname3)">
フリガナ<input type="text" name="sname3" size="10" value="" />
<input type="text" name="fname3" size="10" value="" />
<input type="submit" value="確認" />
</form>
|
〆 フォーム(半角数字のみかどうか)のチェック
|
JavaScript
|
| File Edit Tool Help |
|
|
<head>
<script type="text/javascript">
// Nullチェック
function NullCheck(arg){
var str = arg.value;
if(str == ""){
// Nullの場合
window.alert("入力が不足しています。入力して下さい！");
return 1;
}else{
return 0;
}
}
// 半角数字チェック
function NumCheck(arg){
var str = arg.value;
if(str.match( /[^0-9]+/ )){
// 半角数字以外が入力されている場合
window.alert(str + " : 半角数字のみで入力して下さい！");
return 1;
}else{
return 0;
}
}
// 郵便番号チェック (数字のみ許可、桁数チェックはしない)
function ZipCheck3(arg1, arg2){
var flag = 0;
flag += NullCheck(arg1);
flag += NullCheck(arg2);
flag += NumCheck(arg1);
flag += NumCheck(arg2);
if( flag == 0 ) {
window.alert("〒" + arg1.value + " - " + arg2.value + " が入力されました！");
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form4" method="post" action=".\test.pl"
onSubmit="return ZipCheck(this.zip1, this.zip2)">
郵便番号：<input type="text" name="zip1" size="4" value="" />
-<input type="text" name="zip2" size="6" value="" />
<input type="submit" value="確認" />
<input type="reset" value="リセット"/>
</form>
|
〆 フォーム(半角数字と桁数)のチェック
|
JavaScript
|
| File Edit Tool Help |
|
|
<head>
<script type="text/javascript">
// Nullチェック
function NullCheck(arg){
var str = arg.value;
if(str == ""){
// Nullの場合
window.alert("入力が不足しています。入力して下さい！");
return 1;
}else{
return 0;
}
}
// 半角数字チェック
function NumCheck(arg){
var str = arg.value;
if(str.match( /[^0-9]+/ )){
// 半角数字以外が入力されている場合
window.alert(str + " : 半角数字のみで入力して下さい！");
return 1;
}else{
return 0;
}
}
// 郵便番号チェック (数字のみ許可、桁数チェック)
function ZipCheck2(arg1, arg2){
var flag = 0;
var str1 = arg1.value;
var str2 = arg2.value;
flag += NullCheck(arg1);
flag += NullCheck(arg2);
if(flag == 0){
flag += NumCheck(arg1);
flag += NumCheck(arg2);
}
if(flag == 0){
if(str1.match( /^\d{3}$/ )){
//flag += 0;
}else{
// 入力桁数が正しくない
window.alert("\"" + str1 + "\" は、" + 3 + "桁で入力してください！");
flag += 1;
}
if(str2.match( /^\d{4}$/ )){
//flag += 0;
}else{
// 入力桁数が正しくない
window.alert("\"" + str2 + "\" は、" + 4 + "桁で入力してください！");
flag += 1;
}
}
if(flag == 0){
window.alert("〒" + str1 + " - " + str2 + " が入力されました！");
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form11" method="post" action=".\test.pl"
onSubmit="return ZipCheck2(this.zip3, this.zip4)">
郵便番号：<input type="text" name="zip3" size="4" value="" />
-<input type="text" name="zip4" size="6" value="" />
<input type="submit" value="確認" />
<input type="reset" value="リセット"/>
</form>
|
〆 郵便番号をチェック (???-???? の形式のみ)
|
JavaScript
|
| File Edit Tool Help |
|
|
<head>
<script type="text/javascript">
// Nullチェック
function NullCheck(arg){
var str = arg.value;
if(str == ""){
// Nullの場合
window.alert("入力が不足しています。入力して下さい！");
return 1;
}else{
return 0;
}
}
// 郵便番号チェック (???-????)の形式のみ
function ZipCheck(arg){
var flag = 0;
var str = arg.value;
flag += NullCheck(arg);
if(flag == 0){
if(str.match(/^\d{3}-\d{4}$/)){
//flag += 0;
window.alert("〒" + str + " が入力されました！");
return false;//(今回のみ)
}else{
// 入力形式が正しくない
flag += 1;
window.alert("\"" + str + "\" は、\"???-????\" の形式で入力してください！");
}
return false;
}
}
}
</script>
</head>
<body>
<form name="form12" method="post"
onSubmit="return ZipCheck(this.zip)">
郵便番号<input type="text" name="zip" size="12" value="" />
<input type="submit" value="確認" />
<input type="reset" value="リセット"/>
</form>
|
〆 メールアドレスをチェック (正規表現を用いる)
|
JavaScript
|
| File Edit Tool Help |
|
|
<head>
<script type="text/javascript">
// Nullチェック
function NullCheck(arg){
var str = arg.value;
if(str == ""){
// Nullの場合
window.alert("入力が不足しています。入力して下さい！");
return 1;
}else{
return 0;
}
}
// メールアドレスチェック
function EmailCheck(arg){
var flag = 0;
var str = arg.value;
flag += NullCheck(arg);
if(flag == 0){
if(str.match(/\b[0-9a-z_.\-]*@[0-9a-z\-]+(\.[0-9a-z\-]+)*\.
(com|net|org|edu|gov|mil|int|biz|info|name|pro|museum|
aero|coop|jobs|travelmobi|cat|tel|asia|post|[a-z][a-z])$\b/)){
//flag += 0;
window.alert("Email: " + str + " が入力されました！");
return false;//(今回のみ)
}else{
// 入力形式が正しくない
flag += 1;
window.alert(str + " : 正しいメールアドレスを入力してください！");
}
return false;
}
}
}
</script>
</head>
<body>
<form name="form13" method="post"
onSubmit="return EmailCheck(this.email)">
メールアドレス<input type="text" name="email" size="20" value="" />
<input type="submit" value="確認" />
<input type="reset" value="リセット"/>
</form>
|
〆 携帯のメールアドレスをチェック (正規表現を用いる)
各携帯通信キャリアの以下のドメインのアドレスのみを許可します。
NTT Docomo
***@docomo.ne.jp
KDDI au
***@ezweb.ne.jp / ***@??.ezweb.ne.jp
Softbank (Vodafone, J-Phone)
***@softbank.ne.jp / ***@?.vodafone.ne.jp / ***@jp-?.ne.jp
ウィルコム
***@pdx.ne.jp / ***@??.pdx.ne.jp
|
JavaScript
|
| File Edit Tool Help |
|
|
正規表現の記述方法は、以下です。
if(str.match(/\b[0-9a-z_.\-]*@(docomo\.ne\.jp|ezweb\.ne\.jp
|[0-9a-z\-]{2}\.ezweb\.ne\.jp|softbank\.ne.jp
|[0-9a-z\-]\.vodafone\.ne\.jp|jp\-[0-9a-z]\.ne\.jp
|pdx\.ne\.jp|[0-9a-z]{2}\.pdx\.ne\.jp)$\b/)){
// メールアドレスが正しい場合の処理
}else{
// メールアドレスが正しくない場合の処理
}
〆 ドロップダウンメニューが選択されたかのチェック
|
JavaScript
|
| File Edit Tool Help |
|
|
<head>
<script type="text/javascript">
// ドロップダウンリストチェック
function SelectCheck(arg){
var str = arg.value;
if(str == ""){
// ドロップダウンリストが選択されていいない場合
window.alert("選択して下さい！");
return 1;
}else{
return 0;
}
}
// 色(ドロップダウンリスト)のチェック
function ColorCheck(arg){
var flag = 0;
flag += SelectCheck(arg);
if(flag == 0){
// 選択されている場合
window.alert("好きな花：" + arg.options[arg.selected="selected"Index].text);
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form9" method="post" action=".\test.pl"
onSubmit="return ColorCheck(this.color)">
好きな花
<select name="color">
<option value="">▼選択してください</option>
<option value="1">スイセン</option><option value="2">梅</option>
<option value="3">桜</option><option value="4">はなみずき</option>
<option value="5">ベゴニア</option><option value="6">あじさい</option>
<option value="7">朝顔</option><option value="8">ひまわり</option>
<option value="9">ヒガンバナ</option><option value="10">キンモクセイ</option>
<option value="11">ポインセチア </option>
</select>
<input type="submit" value="確認" />
<input type="reset" value="リセット"/>
</form>
|
〆 チェックボタンの内容チェック
|
JavaScript
|
| File Edit Tool Help |
|
|
<script type="text/javascript">
// チェックボタンチェック
// (Javascriptから呼ばれる汎用の関数)
function CheckboxCheck(arg){
var flag = 0;
// チェック確認
if(!arg.checked){
// チェックが入ってない場合
window.alert("チェックが入ってません！");
return 1;
}else{
// チェックが入っている場合
return 0;
}
}
// 同意チェックボタンのチェック
// (Javascriptではなく、フォームから呼ばれる関数)
function AgreeCheck(arg){
var flag = 0;
flag += CheckboxCheck(arg);
if(flag == 0){
// 選択されている場合
window.alert("同意されました！");
// チェックがある
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form8" method="post" onSubmit="return CheckboxCheck(this.agree)">
上記に同意しますか？<span class="attention"></span>
<input type="checkbox" name="agree" value="yes" id="r5" />
<label for="r5"> はい </label>
<input type="submit" value="送信" />
<input type="reset" value="リセット"/>
</form>
|
〆 ラジオボタンの内容チェック
|
JavaScript
|
| File Edit Tool Help |
|
|
<script type="text/javascript">
// ラジオボタンチェック
function RadioCheck(arg){
var flag = 0;
// チェック確認
for(i = 0; i < arg.length; i ++){
if(arg[i].checked){
// チェックが入ってる場合
return 1;
}
}
// チェックが入っていない場合
return 0;
}
// 男女のラジオボタンのチェック
function SexCheck(arg){
var flag = 0;
flag += RadioCheck(arg);
if(flag == 0){
// 選択されていない場合
window.alert("選択されていません。どちらかを選択してください！");
// 送信を中止
return false;
}else{
// 選択されている場合
if(arg[i].value == "m"){
window.alert(arg[i].value + " : 男性が選択されました！");
}else{
window.alert(arg[i].value + " : 女性が選択されました！");
}
//return true;
return false;//(今回のみ)
}
}
</script>
</head>
<body>
<form name="form15" method="post" action=".\test.pl"
onSubmit="return SexCheck(this.sex)">
<input type="radio" name="sex" value="m" id="r1" />
<label for="r1"> 男 </label>
<input type="radio" name="sex" value="w" id="r2" />
<label for="r2"> 女 </label>
<input type="submit" value="確認" />
</form>
|
〆 ラジオボタンのチェック内容によるボタンのアクティブ化と非アクティブ化
|
JavaScript
|
| File Edit Tool Help |
|
|
<script type="text/javascript">
// ラジオボタンチェック
function RadioCheck(arg){
var flag = 0;
// チェック確認
for(i = 0; i < arg.length; i ++){
if(arg[i].checked){
// チェックが入ってる場合
return 1;
}
}
// チェックが入っていない場合
return 0;
}
// 承認のラジオボタンのチェック
function AgreeCheck2(arg){
var flag = 0;
flag += RadioCheck(arg.agree2);
if(flag == 0){
// 選択されていない場合
arg.button.disabled = true;
}else{
// 選択されている場合
if(arg[0].checked){
// Yesが選択されている場合
arg.button.disabled = false;
}else{
// Noが選択されている場合
arg.button.disabled = true;
}
}
}
</script>
</head>
<body>
<form name="form10" method="post" action=".\test.pl"
onSubmit="return AgreeCheck2(this)">
<input type="radio" name="agree2" value="yes" id="r3" />
<label for="r3"> 承諾する </label>
<input type="radio" name="agree3" value="no" id="r4" />
<label for="r4"> 承諾しない </label>
<input type="submit" value="確認" />
<input type="reset" value="リセット"/>
</form>
|
〆 フォームの右クリックとCtrl+Cから貼り付け入力を禁止する
|
JavaScript
|
| File Edit Tool Help |
|
|
<form name="form3">
// 貼り付けを利用不可なテキストボックスです
メールアドレス ：
<input type="text" name="email2" size="40" style="ime-mode:disabled" />
メールアドレス再入力：
<input type="text" name="email3" size="40"
oncontextmenu="return false"
onkeydown="if(event.ctrlKey == true && event.keyCode == 86)
return false;" style="ime-mode:disabled" />
</form>
|
〆 フォーム入力制限(日本語入力(IME)をオフにし、数字のみ入力可能にする)
※IE独自拡張のナビゲータオブジェクト event を利用しているのでIEのみで動きます
|
JavaScript
|
| File Edit Tool Help |
|
|
<script type="text/javascript">
// 数値のみを入力可能にする
function NumOnly() {
var str = String.fromCharCode(event.keyCode);
if("1234567890\b".indexOf(str, 0) < 0){
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form16">
// 数字入力不可(IEのみ)とIMEを利用不可なテキストボックスです
会員番号：<input type="text" name="userId" size="20"
onkeyDown="return NumOnly()" style="ime-mode:disabled" />
</form>
|
TOP 
Web
The link to this site is free. /
Last Updated : 28.May.2012