①イベントを発生させたいタグにid=""を振り、onclick="" onfocus="" onblur=""を配置する。type="submit"やtype="button"は不要
②JavaScriptで関数を記述する
③onclick="" onfocus="" onblur=""に関数名を記述する
<script type="text/JavaScript"> <!-- function change_orange(){ document.getElementById('name').style.backgroundColor = "orange"; // オレンジにする } function change_white(){ document.getElementById('name').style.backgroundColor = "#ffffff"; // ホワイトにする } function sousin(){ alert("成功!"); } //--> </script> <form name="test_form" method="post" action=""> <p>名前(必須)</p> <p id="nyuryoku_hissu" style="display: none; color: red;">【名前を入力して下さい】</p> <p><input type="text" id="name" name="name" value="" onfocus = "change_orange()" onblur = "change_white()"/></p> <p><input type="submit" value="送信する" onclick = "sousin()"/></p> </form>
フォームをクリックすると背景色が変わる例