• 締切済み

背景色を変えて未入力チェックをしたいのですが。。。

アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- // 入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++) { cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == "") { cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag = BgChange(); if (flag == true){ alert("入力漏れがあるみたいよ"); } return flag; { alert("登録します、お疲れ様でした。"); } return flag; } //チェックボックス <!-- var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック&ハイライト<BR> <FORM name="myFORM" action="mailto***:@*.ne.jp" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所:<INPUT class="white" name="Address"><BR> 氏名:<INPUT class="white" name="yourName"><BR> 年齢:<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話 <INPUT type="radio" name="電話" value="1">携帯<INPUT type="radio" name="電話" value="2">公衆電話</TD> </TR> <TR> <TD>容器 <INPUT type="radio" name="容器" value="1">ビン <INPUT type="radio" name="容器" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

みんなの回答

  • Redpython
  • ベストアンサー率56% (9/16)
回答No.1

こんにちは。 どのブラウザを対象としたコーディングをなさっているのでしょうか? Firefox を使用してテストをしてみましたが、CSS レベルでチェックボックスとラジオボタンに対し background-color 属性を指定できませんでした。 本当に CSS の機能として、これらフォームオブジェクトに対し、background-color 属性がサポートされているのでしょうか? わたくしの利用しているサイトの一つには、これらフォームオブジェクトには、この CSS 属性が適用できるとは書いておりませんでした(参考 URL)。 ご確認くださいませ。

参考URL:
http://www.tagindex.com/stylesheet/form/background_color.html

関連するQ&A