SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [フォームコントローラ]
Dynamic HTMLの参考書 Java Scriptの参考書

フォームコントローラ

機能

一般的なフォームは初期値から内容が変更されても見かけ上、何の変化もありません。 ユーザーインターフェースを考えた際に、この見栄えが変わることで良いこともあります。 これを実現したサンプルになります。

フォームの各コントロールの内容が初期値から変更されたときに、背景色を変更します。

類似サンプル

  1. なし

利用方法

フォーム全体をイベントハンドラし、４つの関数をコールしています。 全てを使っても良いですし、必要に応じて必要な関数のみを使用しても構いません。 ただし、フォーム、その各コントロールに対して名前を指定しています。 各関数ではこの名前を直接記述していますので、name属性値に合わせて内容を変更する必要があります。

以下に各関数の説明を行います。 サンプルを前提に説明しますが、コントロール部品の追加や削除、名前の変更なども ここを参考に行って下さい。

ただし、フォームの名前は「name="frm"」とし、変更する場合は、「document.frm」の「frm」の 部分も同様に変更して下さい。

テキスト用関数
フォーム
「name="name"」と指定したと仮定
スクリプト
「document.frm.name」でアクセス
初期値の時の背景色
DefaultColorText
初期値変更時の背景色
ChangedColorText
コントロールの追加
「<input type="text" name="tuika" value="">」 などのように異なるname属性のものを新たに追加します。 次に下記のように新たにスクリプトを追加します。 
function chgText(){
	inival = document.frm.name.defaultValue;
	val = document.frm.name.value;
	if(val != inival){
		document.frm.name.style.backgroundColor = ChangedColorText;
	}else{
		document.frm.name.style.backgroundColor = DefaultColorText;
	}
	inival = document.frm.tuika.defaultValue;
	val = document.frm.tuika.value;
	if(val != inival){
		document.frm.tuika.style.backgroundColor = ChangedColorText;
	}else{
		document.frm.tuika.style.backgroundColor = DefaultColorText;
	}
}
ラジオボタン用関数
フォーム
「name="sex"」と指定したと仮定
スクリプト
「document.frm.sex[i]」でアクセス
初期値の時の背景色
DefaultColorRadio
初期値変更時の背景色
ChangedColorRadio
項目の追加
「<input type="radio" name="sex">」 のように、同じname属性値のコントロールを追加します。削除の場合も消すだけです。 スクリプトを扱う必要はありません。
コントロールの追加
「<input type="radio" name="tuika">」 のように、他とは異なるname属性値を持つコントロールを追加します。 次に下記のように新たにスクリプトを追加します。 
function chgRadio(){
	for(i = 0; i < document.frm.sex.length; i++){
		inival = document.frm.sex[i].defaultChecked;
		val = document.frm.sex[i].checked;
		if(val != inival){
			document.frm.sex[i].style.backgroundColor = ChangedColorRadio;
		}else{
			document.frm.sex[i].style.backgroundColor = DefaultColorRadio;
		}
	}
	for(i = 0; i < document.frm.tuika.length; i++){
		inival = document.frm.tuika[i].defaultChecked;
		val = document.frm.tuika[i].checked;
		if(val != inival){
			document.frm.tuika[i].style.backgroundColor = ChangedColorRadio;
		}else{
			document.frm.tuika[i].style.backgroundColor = DefaultColorRadio;
		}
	}
}
チェックボックス用関数
フォーム
「name="hobby"」と指定したと仮定
スクリプト
「document.frm.hobby[i]」でアクセス
初期値の時の背景色
DefaultColorCheckbox
初期値変更時の背景色
ChangedColorCheckbox
項目の追加
ラジオボタン用関数と同様
コントロールの追加
ラジオボタン用関数と同様
セレクト(コンボボックス)用関数
フォーム
「name="sel"」と指定したと仮定
スクリプト
「document.frm.sel」でアクセス
初期値の時の背景色
DefaultColorSelect
初期値変更時の背景色
ChangedColorSelect
項目の追加
「<option>SGML</option>」 のように、単にOPTION要素を追加するだけです。 スクリプトを扱う必要はありません。
コントロールの追加
「<select name="tuika">」 のように、他とは異なるname属性値を持つコントロールを追加します。 次に下記のように新たにスクリプトを追加します。 
function chgSelect(){
	num = document.frm.sel.selectedIndex;
	val = document.frm.sel.options[num].defaultSelected;
	if(!val){
		document.frm.sel.style.backgroundColor = ChangedColorSelect;
	}else{
		document.frm.sel.style.backgroundColor = DefaultColorSelect;
	}
	num = document.frm.tuika.selectedIndex;
	val = document.frm.tuika.options[num].defaultSelected;
	if(!val){
		document.frm.tuika.style.backgroundColor = ChangedColorSelect;
	}else{
		document.frm.tuika.style.backgroundColor = DefaultColorSelect;
	}
}

対応ブラウザ

IE4,NN6以上

サンプル

［サンプルを見る］ ［ダウンロード］

[Go To Top]

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>フォームコントローラ</title>

<style type="text/css">
<!--
.MainForm{
	width:				400px;
	padding:			10px;
	border:				2px outset #999;
	background-color:	#999;
}
.FormPart{
	margin:				5px 0px;
}
-->
</style>

<script language="JavaScript">
<!--
function chgForm(){
	chgText();				// テキスト用関数
	chgRadio();				// ラジオボタン用関数
	chgCheckbox();			// チェックボックス用関数
	chgSelect();			// セレクト(コンボボックス)用関数
}

// テキスト用関数
var DefaultColorText = "#fff";			// 初期値の時の背景色
var ChangedColorText = "#f99";			// 初期値変更時の背景色
function chgText(){
	inival = document.frm.name.defaultValue;
	val = document.frm.name.value;
	if(val != inival){
		document.frm.name.style.backgroundColor = ChangedColorText;
	}else{
		document.frm.name.style.backgroundColor = DefaultColorText;
	}
}

// ラジオボタン用関数
var DefaultColorRadio = "#999";		// 初期値の時の背景色
var ChangedColorRadio = "#f99";		// 初期値変更時の背景色
function chgRadio(){
	for(i = 0; i < document.frm.sex.length; i++){
		inival = document.frm.sex[i].defaultChecked;
		val = document.frm.sex[i].checked;
		if(val != inival){
			document.frm.sex[i].style.backgroundColor = ChangedColorRadio;
		}else{
			document.frm.sex[i].style.backgroundColor = DefaultColorRadio;
		}
	}
}

// チェックボックス用関数
var DefaultColorCheckbox = "#999";		// 初期値の時の背景色
var ChangedColorCheckbox = "#f99";		// 初期値変更時の背景色
function chgCheckbox(){
	for(i = 0; i < document.frm.hobby.length; i++){
		inival = document.frm.hobby[i].defaultChecked;
		val = document.frm.hobby[i].checked;
		if(val != inival){
			document.frm.hobby[i].style.backgroundColor = ChangedColorCheckbox;
		}else{
			document.frm.hobby[i].style.backgroundColor = DefaultColorCheckbox;
		}
	}
}

// セレクト(コンボボックス)用関数
var DefaultColorSelect = "#fff";		// 初期値の時の背景色
var ChangedColorSelect = "#f99";		// 初期値変更時の背景色
function chgSelect(){
	num = document.frm.sel.selectedIndex;
	val = document.frm.sel.options[num].defaultSelected;
	if(!val){
		document.frm.sel.style.backgroundColor = ChangedColorSelect;
	}else{
		document.frm.sel.style.backgroundColor = DefaultColorSelect;
	}
}
// -->
</script>

</head>

<body>

<p style="font-size:14pt; font-weight:bold; color:#00f">
フォームの各コントロールは、初期値から変更されると背景色が変わります。
</p>

<form name="frm" class="MainForm" onmousemove="JavaScript:chgForm()"
	onkeydown="JavaScript:chgForm()" onkeyup="JavaScript:chgForm()">

Name
<input type="text" name="name" class="FormPart" value="Input your name"><br>

<input type="radio" name="sex" class="FormPart">Male
<input type="radio" name="sex" class="FormPart">Female
<input type="radio" name="sex" class="FormPart">Neutral<br>

<input type="checkbox" name="hobby" class="FormPart">Sport
<input type="checkbox" name="hobby" class="FormPart">Movie
<input type="checkbox" name="hobby" class="FormPart">Music<br>

<select name="sel" class="FormPart">
	<option>HTML</option>
	<option>CSS</option>
	<option selected="selected">XML</option>
	<option>JavaScript</option>
</select>

</form>

</body>
</html>
[Go To Top]
Last modified Jan,2001
Copyright(C)2001 T.Miyazaki , All Rights Reserved.