画面の構成と FORM と 入力


  画面を構成する一般的な例




  

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>ブラウザのタイトルバーに出力される文字列</TITLE>
<HEAD>
<BODY BGCOLOR=#D5D5D5>

<H1 align=center title="H1は一番大きな見出しです">画面を構成する一般的な例</H1>
<HR size=1 color=black title="HRは横線を引きます">

<FORM name=frmMain onSubmit='return frmCheck()'>

<TABLE border=1 cellpadding=5>
	<TH>行のヘッダです</TH>
	<TR>
		<TD>
			おなまえ
		</TD>
		<TD>
			<INPUT type=text name=Onamae>
		</TD>
	</TR>
	<TR>
		<TD>
			Eメール
		</TD>
		<TD>
			<INPUT type=text name=Email>
		</TD>
	</TR>
	<TR>
		<TD>
			題  名
		</TD>
		<TD>
			<INPUT type=text name=Daimei>
			<INPUT type=submit value="投稿する">
			<INPUT type=reset  value="リセット">
		</TD>
	</TR>
	<TR>
		<TD>
			コメント
		</TD>
		<TD>
			<TEXTAREA name=Comment cols=40 rows=10></TEXTAREA>
		</TD>
	</TR>
</TABLE>

</FORM>

</BODY>
</HTML>
  

  JavaScript のソースをインクルードする

ソースの先頭に以下の記述を行う

  

<SCRIPT language=JavaScript src=inpchk1.js></SCRIPT>
  

  JavaScript のソース

inpchk1.js

  

// *******************************************************************
// フォームの入力チェック
// 
// 機能1 : おなまえ(name=Onamae) 欄が未入力またはスペースが入力
//     された場合、エラーメッセージを表示して送信アクション
//     をキャンセルする
// *******************************************************************
function frmCheck()
{

	// おなまえ
	strWork = document.frmMain.Onamae.value;
	strWork = AllReplace( strWork, " ", "" );	// 半角空白
	strWork = AllReplace( strWork, " ", "" );	// 全角空白

	if ( strWork == '' ) {
		alert( "おなまえを入力して下さい" );
		return false;
	}

	return true;
}

// *******************************************************************
// 文字列置き換え関数
//
// 機能 : sBase に含まれる sTarget を全て sValue に置き換える
// *******************************************************************
function AllReplace( sBase, sTarget, sValue ) {

	var sRet;

	sRet = sBase;

	while( sRet.indexOf( sTarget ) != -1 ) {
		sRet = sRet.replace( sTarget, sValue );
	}

//  Regular Expression オブジェクト を使用すると以下のようになります
//	rgExp = new RegExp(sTarget,"g") ;
//	sRet = sRet.replace( rgExp, sValue );

	return sRet;
}
  

  文字列置き換え関数の説明

indexOfメソッド
文字列内を、指定された文字列で先頭から検索します

indexOf メソッドの戻り値は、String オブジェクト内で見つかったサブストリングの先頭位置を示す整数値です。
サブストリングが見つからなかった場合は、-1 が返されます。

replace メソッド
文字列を置換した結果のコピーを返します。

  入力チェックの説明

  

<FORM name=frmMain onSubmit='return frmCheck()'>
  

上記タグは、CGI に渡す為の送信ボタンが押された時に、「frmCheck()」関数を
呼び出す為の記述方法です。


  

	if ( strWork == '' ) {
		alert( "おなまえを入力して下さい" );
		return false;
	}
  

上記条件式によって、未入力時にメッセージボックスを表示して関数の戻り値を「false」
としています。


  動作チェック用の為、画面の最後に表示スクリプトを追加

  

<SCRIPT language=JavaScript>

	document.write( location );

</SCRIPT>
  

location は現在のURLに関する情報です
( ※ つまり、アドレスバーに表示される情報です )


  FORM タグと CGI


FORM タグは何も指定しないと、method=GET となり、method=POST とする事によって
CGIアプリケーションへ直接データの受け渡しが可能となります(ACTION=url で受け渡し先を指定)。

method=GET は、アンカーでリンクするのと同じ結果となり、ACTION=url でリンク先を指定
して、フォーム内の入力データがリンク先の引数( ?以降 )として付加されます




CGI と関係するフォーム内の入力コントロール


1) 入力フィールド

  

<INPUT type=text>
  

2) 送信ボタン

  

<INPUT type=submit>
  

3) チェックボックス

  

<INPUT type=checkbox>
  

4) ラジオボタン

  

<INPUT type=radio>
name パラメータで同一名称を指定して同期させる
  

5) パスワードフィールド

  

<INPUT type=password>
入力文字が * に変更される
  

6) 隠しフィールド

  

<INPUT type=hidden>
画面には表示されない
  

7) コンボボックス

  

<SELECT>
<OPTION>001
<OPTION>002
</SELECT>
  

8) リストボックス

  

<SELECT size=2>
<OPTION>001
<OPTION>002
</SELECT>
  

  メールアドレスの簡単なチェック

@が含まれているかどうかをチェックするには?
@の前後に文字列があるかどうかをチェックするには?


  

	strWork = document.frmMain.Email.value;
	if ( strWork.indexOf( "@" ) == -1 ) {
		alert( "メールアドレスのフォーマットが正しくありません(1)" );
		return false;
	}
	strWorkArray = strWork.split( "@" )
	if ( strWorkArray[0] == "" ) {
		alert( "メールアドレスのフォーマットが正しくありません(2)" );
		return false;
	}
	if ( strWorkArray[1] == "" ) {
		alert( "メールアドレスのフォーマットが正しくありません(3)" );
		return false;
	}
  

  例えば、電話番号フィールドの入力チェックとは?

1) 文字列の長さ
  

	strWork = document.frmMain.Tel.value;
	alert( "電話番号に入力された文字数は " + strWork.length + " です" );
  

2) 部分文字列
  

	strCheck = "0123456789-";
	for ( i = 0; i < strWork.length; i++ ) {
		if ( strCheck.indexOf( strWork.substr( i, 1 ) ) == -1 ) {
			alert( "電話番号ではありません" );
			return false;
		}
	}
  




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[sjscript]
claudebot
24/03/29 21:44:41
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube