• 締切済み

JavaScriptのエラー ( 関数の未定義)

htmlであるボタンを押すと、そこで実行するはずの関数が未定義になる、 という不具合が出ていたのですが、 JavaScript(<script>)の記述場所を変更する事により、対処することができました。 でもまだ、理解ができずにいます。 たとえば <head> <script ・・・・外部jsファイル> </head> <body> <input type="text" name="hizuke" ・・・> <input type="button" name="newdisp" value="表示" onclick="hyouji();">  ・  ・ <input type="hidden" name="syori" value="">  ・  ・  ・ </body>  ・  ・ ※外部jsファイルでhyouji()関数記述 のようなhtmlで、今回「表示」ボタンをクリックするとエラーになり、 エラーの詳細を見ると    hyouji()が未定義です となり、 JavaScriptの関数がまだ読み込まれていないから 記述を後に移動したほうがいいというアドバイスを受け、 このhtmlを <head> </head> <body> <input type="text" name="HIZUKE" ・・・> <input type="button" name="newdisp" value="表示" onclick="hyouji();">  ・  ・  ・ <input type="hidden" name="syori" value="">  ・ <script ・・・・外部jsファイル> </body>  ・  ・ のように変更して、エラーをなくすことができました。 外部jsファイルのhyouji()関数の処理は 「syori」のhiddenに「hyouji」というような処理識別をセットし、 submitしています。 hyouji()関数の前にもたくさんの関数が定義されていて その中には    var aaa = document.form1.xxxx.value; などの記述もたくさんあります。 <script>の記述場所を移動したことで    htmlを読み込んで、    「表示」ボタンを表示し、    jsファイルを読み込む・・・ という処理順序になると思うのですが 表示ボタンをクリックしたときには、 jsファイルの読込みは終了しているのでしょうか??? ボタンをクリックした時にはjsの読込みを終了していないといけないと 思うのですが、なぜjsの記述を<inputボタン>の記述より後のほうに移動させて、 未定義関数が解決されるのかがわかりません。 エラーの内容が   オブジェクトが見つかりません などだと、hidden項目が後に記述されているからか・・・と理解できるのですが。 うまく伝わるか不安ですが、 ボタンクリックの前にはJavaScriptの関数が読込みが 終了していなければならないのはわかるのですが、 なぜ、ボタンの表示より、後に記述することで解決できるのか 解説していただけると助かります。 よろしくお願いします。

  • jg1wjz
  • お礼率91% (148/162)

みんなの回答

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.4

原始的なプリントデバッグになりますが、外部スクリプトの位置を最初に戻し、スクリプト末尾に alert(typeof 関数名); を追加して下さい。関数が定義されていれば中身が表示されますし、未定義なら undeinfed が表示されます。また、アラートが出ない場合はスクリプトが読み込まれていないか、途中でエラーを出しています(IE は静かに死ぬことがあります)。スクリプトが読み込まれているかを確認するには、alert() をスクリプト冒頭に移動してアラートが出れば良い。 IE が静かに死ぬケースにはいくつかパターンがあったはずですが、今思い出せません(すみません)。可能性のひとつはスクリプトファイルの文字化けです。 また、キャッシュが悪さをすることもあります。不可解なバグに悩まされたときは、ブラウザを再起動すると何事もなく動くことがあります。 ただまあ、Firefox で未定義であったということは、読み込まれていなかった可能性が高いと思うのです。

jg1wjz
質問者

お礼

ありがとうございます。 現象が出ているときに、alert・・・は入れて確認しました。 結果は、 alertが出るときは、当たり前に情報の表示がされます。 同じマシン、同じ環境で何度か「表示」ボタンを押すと、 そのうち(15分くらい経過後)、alertが出なくなり、 iframe内は空白のままで、ステータスにエラーがでます。 不可思議な動きでした。。。 今は<script>を下部に移動して、なぜか?!うまく動いています。 この方法を次の案件にも対応させるかどうか、決めなければならないときになりそうです。 どうしたらいいでしょう!!!

jg1wjz
質問者

補足

お礼の補足になりますが。。。 IEは静かに死んでしまった感じでしょうか。 スクリプトフアイルの文字化け・・・もあるんですね。。。 ブラウザを再起動させてもしばらくはダメのようでした。 時間を置けばまだしばらくちゃんと動いてくれ、しばらくするとまたダメ・・・になる。 この原因を調べろ って言われてますが どんな原因でこうなるのか、 未だわかりませんし、 解決方法も正しいのか判断できません。 そういえば、前にもキャッシュの問題で苦労しました。 消したはずの外部jsファイルなのに、その中の関数がいつまで経っても動いてしまうんです。 キャッシュを何回もクリアしても、その関数は生きてました。 そのとき、IEをアンインストール、インストールしてもらってもダメだったので 確かIEのバージョンを変えてもらって対処できたような記憶があります。 ちょっと話がそれてしまいましたが、 スクリプトファイルの文字ばけのあたりについても調べてみたいと思います。 文字化けしない方法って<META・・>以外に特別に何かあるでしょうか?

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.3

No.2 補足より: > 特に今回の事象の解決策はこれでした。 > ・onMousemove、onClickで指定された関数は、HTMLのロードが完了した後に定義しなければならない。 いいえ、そんなことはありません。 > <HEAD>内記述の外部Scriptファイルが読み込みが終わっていないのに、<BODY>の表示が開始され であれば、HTML 4.0(1) および HTML(5) の規定に違反しています。現状、私はそのようなブラウザの存在を聞いたことがありません。 --- 今のところ、ふたつの可能性があります。 ・単純に、外部スクリプトの URI ミスであった。script を移動したときに @src を書き直し、たまたま直った。 ・『HTMLのロードが完全に終わっていない状態でgetElementByIdなどを呼び出す』箇所があり、そこでエラーを出して止まっていた。そのため、それより後ろで定義されている関数(この場合は関数式)が未定義のままになった。 とにかく、仰る現象と解決方法は、理屈にも(拙いながら)私の経験にも合いません。と言うより、もし仰ることが本当なら、繰り返しますが HTML(5) の規定に適合しませんので、ちょっと大きな問題になります。 script には @defer がなかったんですよね?

jg1wjz
質問者

お礼

ありがとうございます。 補足に追記します。 (補足に書いていいのかわからないのですが)

jg1wjz
質問者

補足

> 単純に、外部スクリプトの URI ミスであった。 > script を移動したときに @src を書き直し、たまたま直った。 これはないです。 > 『HTMLのロードが完全に終わっていない状態で > getElementByIdなどを呼び出す』箇所があり、 > そこでエラーを出して止まっていた。 > そのため、それより後ろで定義されている関数(この場合は関数式)が > 未定義のままになった。 getElementByIdはたくさん使っていますが、全てjs外部ファイルの関数内の処理になっています。 CGIアプリで吐き出すhtmlの<SCRIPT>内に直接記述はありません。 > script には @defer がなかったんですよね? バージョンはHTML 4.01 になります。 cgiアプリの処理の流れは、  js外部ファイル読込み→上部から画面表示→「表示」ボタン表示→  「iframe」(枠だけ)表示→onLoad処理でiframe内に最新情報表示 です。 (iframe・・・、何か影響ありますか?) 現象としましては いつまで経ってもiframe内に情報が表示されないので、 「表示」ボタンを押したらエラーになった。 IEでは   オブジェクトを指定してください ライン1 文字1 のエラーになったと申告がありました。 IEの問題なのかと、別の方がfirefoxで確認したところ、 エラーコンソールに「(ボタンクリック時のjs関数) is not defined」 と表示された と申告がありました。 キャッシュのクリアやIEの設定のリセットなど、 いろいろやってもらったのですが 現象は発生しました。    ↓ (※実際、<SCRIPT>外部ファイルの記述を下部に移動したら解決しました!) 今まで(過去5年間)で私はこの現象はおきたことはありません。 開発部隊からの申告も今までは何もありませんでした。 (5年前から変更のない処理になります) 今でも開発環境では発生しません。 何箇所かで動いているシステムなので 今後、IEのバージョンアップや社内LAN環境が変わったりして 同じような現象が発生すると困るので状況の把握をしておくことと 対処を調べておくよう言われています。 js関数は同じ関数名だと後から読み込まれたほうが動くと言うことですが、 例えば、今回下部に移動したjs外部ファイルの読込みSCRIPTを 上部にも、ファイル名を変えて同じ内容のjs外部ファイルの読込みSCRIPTを 記述したらどうなるのでしょう? エラーにならなければ・・・なんて思うのですが 安易ですよね。。。 ボタンクリックのイベント処理で、js外部ファイルを読み込みますが、 (そのようにhtmlとして吐き出していますが) その際に、読み込まれてたjs関数が一旦、 クリアされるなんてないですよね?

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.2

何かの勘違いの可能性が高いように思われます。 @defer や @async がない限り、外部スクリプトの読み込みはページ描画をブロックします。head 内に 6 個も 7 個も外部スクリプトを並べれば、それらが全部読み込まれるまで、閲覧者は白紙のまま待たされることになります。そうならないよう、外部スクリプトの読み込みを body の末尾に移動させるのです。 ですが、ボタンの場合は別です。ボタンが表示された時点で、ボタンが機能しなければなりません。つまり、ボタンに関する外部スクリプトはボタンの前に読み込んでおかねばならないのです(ここで「え、ボタンがまだ読み込まれていないのに?」と思った方は、バブリングを調べて下さい。まあ、準備が整うまで disabled にしておく手もありますが)。 それを踏まえれば、ボタン制御のスクリプトを事前に読み込んでおくのは真っ当な方法です。それで関数の未定義エラーが出るのなら、単純に、外部スクリプトが読み込まれていなかった可能性が高いと思われます。あるいは、他に原因があります。

jg1wjz
質問者

お礼

ありがとうございます。 #ボタンの場合は別です。ボタンが表示された時点で、 #ボタンが機能しなければなりません。 #つまり、ボタンに関する外部スクリプトはボタンの前に #読み込んでおかねばならないのです これだと理解できます。 が、未定義エラー・・・になってしまったのです。 なぜか今回、下のほうに移動してしまってエラーを回避できましたが それこそ変ですよね。 逆に・・・未定義になる可能性大??? 修正前の現象では、 <HEAD>内記述の外部Scriptファイルが読み込みが終わっていないのに、<BODY>の表示が開始され、ボタンも表示されたので ボタンをクリックした結果、未定義エラーになってしまった... という感じになります。 #それで関数の未定義エラーが出るのなら、 #単純に、外部スクリプトが読み込まれていなかった可能性が #高いと思われます。 #あるいは、他に原因があります 単純に外部スクリプトが読み込まれていなかった可能性って、 どういう事態でしょうか? 他の原因って 何かありますでしょうか。 5年前に開発したWEBシステムで、IE6で確認を行い、localでも、 社内イントラでもこのような事象はおきませんでした。 2年前にも同じシステムを導入し、IE8でも確認しましたが、localでも、 イントラでも事象はおきませんでした。 変わったことといえば、社内イントラ環境がバージョンアップされたのかも???くらいです。 IE6は構文エラーなどの不具合をカバーしてくれてしまうようですが、 IE8では厳しくなってそこでエラーになりますよね。 2年前のIE8ではエラーは出なかったんですが、今調べてみると、 チョロチョロと構文エラーがあります。 それでもまだ互換性モードにしているので、フォローされてるのだと思いますが。 外部ファイルには全てのJavaScript処理を記述していて、200kbくらいあります。 画面によっては関係ない処理も入っています。 これを整理して関係のある関数だけのjsファイルの記述だけにするよう、 分割したほうがいいのでしょうか? (かなりの手直しになりそうですが)

jg1wjz
質問者

補足

下記のサイトを見つけました。 http://blog.ohanasiya.net/?m=blog&eid=e6f9208db4d7cb5baf5dc167469e4be62e189bac 中ごろのコメントに #また、関数を定義する順番としては #以下のような注意点があります。 # ・HTMLのロードが完全に終わっていない状態で #  getElementByIdなどを呼び出すと、 #  失敗してスクリプトの実行がそれ以上進まなくなる場合がある。 # ・onMousemove、onClickで指定された関数は、 #  HTMLのロードが完了した後に定義しなければならない。 とあります。 特に今回の事象の解決策はこれでした。 # ・onMousemove、onClickで指定された関数は、 #  HTMLのロードが完了した後に定義しなければならない。 これは決まりごとなのでしょうか? W3Cの? 決まりごとであれば、無条件に従い、 次のシステムにも反映したいと思いますが。

  • utun01
  • ベストアンサー率40% (110/270)
回答No.1

「外部jsファイル」の中身が問題になります。 javascriptをheadに直接書く場合、そのまま実行してしまうとHTMLの内容がロードされる前に実行されてしまう場合があります。 この時、javascript内でHTML内の要素を扱うような処理を行っていると、その部分がエラーになってしまいます。 この為、下に記述することで解決したのでしょう。 ちなみに、この順序問題は色んな解決方法が用意されています。 特にDOM要素を弄る処理が多いのであれば、jQueryを使われる事をお勧めします。 ちなみにjQueryを使用すると、「$(document).ready(function(){処理});」の書き方で、HTMLが全て読み込まれた状態から処理を開始してくれるようになる為、headに記述しても問題無くなりますよ。

jg1wjz
質問者

お礼

ありがとうございます。 やはり他の要素でエラーになり、 該当関数の読込みまで処理が進まない状況だったのかもしれませんね。 その場合、その要素を扱う部分でのエラーだと理解できたのですが、 イベントを挙げた関数ではあったのですが、 なぜ、その先(!)の関数の未定義のエラーだったのでしょうか。 そこが理解できずにいます。 それともJavaScriptのエラーはそんなものなのでしょうか? 何台かのパソコンで、同じ「未定義のエラー」でした。 対応はしていないのですが、firefoxで調べてくれたときも「未定義エラー」でした。 せめて、要素を扱う処理あたりでエラーになっていてくれればわかりやすいのに。。。 すみません、もう少し 他の方のアドバイスも待ちたいと思います。

関連するQ&A

  • jspでjavascript関数へ引数を渡す方法

    最近Webアプリの勉強をし始めたばかりの初心者です。 今、jspでjavascript関数へ引数を渡す方法がうまくいかず困っています。 以下はjspファイルの該当部分の抜粋です。 やりたいこととしては、画面上で参照ボタンを押したときに、"reference"という文字列を 一度javascript関数を介してサーブレットへ渡すということです。 <head> <script type="text/javascript"> <!-- function func(param){ alert(); document.getElementById("param").name = param; } // --> </script> </head> <form action="/tomcat_test/servlet/hello" method="POST"> <input type="hidden" name="param" id="param"> <input type="button" value="参照" onclick=<%= "func('reference')" %>/> </form> いろいろ調べてみたのですが、なかなかうまくいかずに困っています。 そもそも、参照ボタンを押してもonclickがうまく動いていないようで、 まずその問題を解決したいです。 onclickタグの使い方を間違っているのでしょうか。 よろしくお願い致します。

    • ベストアンサー
    • Java
  • 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか?

    お世話になります。 フォーム内に配置した、1から5までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.jsファイルを選択することは出来ないでしょうか? 外部ファイルには、UsualSet.js、EmergencySet.js、PauseSet.jsなどがあって、そのスクリプトファイルの中身は document.write("<input name=\"youbi\" type=\"hidden\" value=\"土曜\"><input name=\"codenumber\" type=\"hidden\" value=\"732\"><input name=\"busho\" type=\"hidden\" value=\"経理\">"); とかいった感じになっています。 つまり、セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの3つ全ていっぺんに変更出来るようにしたい訳です。 しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 まさか、 <FORM ACTION="pro.cgi" METHOD="POST">  <select name="kazu">   <option value="<script language="javascript" src="UsualSet.js>" selected>1</option>   <option value="<script language="javascript" src="EmergencySet.js>" >2</option>   <option value="<script language="javascript" src="PauseSet.js>" >3</option>   <option value="<script language="javascript" src="MorningSet.js>" >4</option>   <option value="<script language="javascript" src="FulleSet.js>" >5</option>  </select>   <input type="hidden" name="kaijou" value="22890">  <input type="hidden" name="boxnumber" value="62">  <input type="submit" name="Submit" value="送信"> </FORM> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。

  • javascript関数について

    <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function extract() { var textbox = document.getElementById("barcode"); var amount = textbox.value.substr(22,3); textbox.value = amount; } </script> </head> <body> バーコード: <input type="text" id="barcode" size="64" value=""> <input type="button" value="部分取り出し" onclick="extract()"> </body> </html> 上記のソースコードでボタンを押せば22行目(先頭から数えて21番目までを削除?し22番目から25番目までを表示)するプログラムをかきましたが、ボタンを押さず表示したいのですが、どうすればいいですか?教えてください。 お願いいたします。

  • JavaScriptがFirefoxで動かない・・・

    よろしくお願いいたします。 IEでは正常に動作するのですが、Firefoxで実行してみると ボタンを押しても何の反応もありません。 どのように変更すればFirefoxで動作するのでしょうか? よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- function warning(){ alert("テストです。"); } //--> </SCRIPT> <FORM><INPUT type="button" value="ボタンを押して。" onClick="warning()"></FORM> 上記のコードを外部に独立させて・・・ 【コード】 <script type="text/javascript" src="sample3.js"></script> <input type = "button" name = "button3" value = "sample3" onclick = "Func3();"> 【sample3.js】 function Func3() { alert("js外部ファイル記述"); } です。 FC2ブログで活用したいのですが・・・ 改行の扱いは「HTMLタグのみ」に設定しています。 ご回答、よろしくお願いいたします。

  • javascriptで取得した値を、FORMで送信する

    いつもお世話になっております。 jspからwindow.openを使い、別ウインドウを表示しました。 別ウインドウでの質問です。 javascriptで前のページ(jsp)の情報を受け取り、それを次のページ(jsp)へFORM(POST)で送りたいのですが、うまくいきません。 ご教授下さい。 <HTML> <HEAD> <script type="text/javascript"> <!-- function sent() { var num = window.opener.document.aaa.number01.value; ここで前ウィンドウの情報を取得しています return num; } function sub() { document.bbb.submit(); } // --> </script> </HEAD> <BODY onload="sub()"> <form name="bbb" METHOD="POST" action="http://okwave.jp"> <input type="hidden" name="timeid" value=""> <input type="hidden" name="number00" value="1"> <input type="hidden" name="number01" value="sent()"> <!--<input type="hidden" name="number01" value="204038054776">--> 当たり前ですが、コメントにしている部分にすると次のページでうまくいきます。 </form> </BODY> </HTML>

  • HTMLのフォーム名とJavaScriptの関数名

    JavaScriptを勉強し始めたばかりの者です。 submitボタンがonClickされたときにcheckという関数を呼び出しているのですが、 フォーム名とJavaScriptの関数名を同じものにすると、その関数が呼び出されなくなっているようなのです。 ------------------ form.html ----------------------------------------------------- <html> <head> <meta http-equiv="Content-type" content="text/html; charset=euc-jp"> <script type="text/javascript" src="test.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>フォーム</title> </head> <body class="blue" marginwidth="100" topmargin="40" bottommargin="80"> <form name="check" method="post" action="form2.cgi"> <table border="1" cellpadding="7"> <caption>フォーム</caption> <tr> <td>※ID</td> <td><input type="text" name="id"></td> <td>テキストボックス</td> </tr> </table> <br> <input type="submit" name="send" value="送信" onClick="check()"> <input type="reset" name="clear" value="リセット"></td> </form> </body> </html> ------------------ test.js ------------------------------------------------------- <!-- function check() { if( document.check.id.value == "" ){ alert( "※のついている項目は入力必須項目です!" ); } return; } --> ------------------------------------------------------------------------------- 上記のソースで、テキストボックスに何も入力せずに送信ボタンを押してもalertは表示されませんが、 フォーム名あるいは関数名のどちらかをcheck1やcheck_1にすると表示されるようになります。 フォーム名と関数名を同じものにするとalertは表示されません。 フォーム名と関数名の関係はこのようなものなのでしょうか? また上記のソースに原因があるようでしたらお教えください。

  • javascriptで困っています。教えてください

    JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>

  • Javascript IEで「識別子がありません」とエラーが出てしまいます。

    ページの読み込みが完了した段階でsubmit()して、 formの内容をactionで指定した先にPOSTしたいのですが、IE6で エラー:識別子がありません コード:0 と出てしまい動作しません。 以下がそのソースです。 --------------- <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body onload="document.export.submit()"> <form action="list.php" method="POST" name="export"> <input type="hidden" name="data[0][text]" value="テキスト"> <input type="hidden" name="mode[export]" value="" /> <input type="submit" name="submitButton" value="エクスポート"/> </form> </body> </html> --------------- なお、Firefox2.0では正常に動作しています。 <body onload="document.form['export'].submit()"> などと、いろいろと弄り回してはみたのですが、 どつぼにハマるばかりだったので、解る方ご教授下さいませ…。

  • JavaScriptの値を、cgiに渡す方法を教えてください。

    JavaScriptの値を、cgiに渡す方法を教えてください。 jsファイルの変数に、テキストボックスの入力値が入っています。 それを、cgiに渡して、その変数の値を、ファイルに 書込みたいと考えています。 __test.html_________ <head><script src="keep.js"></script></head> <form name="f1" action="keep.js"> <input type="text" name="a_text"> <input type="button" value="クリック" onclick="keep()"> </form> _________________________ ___keep.js_______________ function keep() { var a_text = document.f1.a_text.value; ■この変数「a_text」をcgiファイルに渡したいです。 } __________________________ __●.cgi_______________ ■なんだかの方法で、上記keep.jsの変数、a_textを取得して、 この●.cgiでファイルをopenして、a_textの値を 書込みたいです。 ______________ よろしく、お願いします。

  • javascriptについて

    Javascriptを使用して簡単なツールを作りたいのですが、初心者なので分からず困っています。詳しく教えて頂けると助かります! 現状このような感じで、機能していない状態です。ここにjavascriptで、プルダウンで選択したものによって表示する内容を変えるためにはどのような文にしたら良いのでしょうか? 例えば、プルダウンで【卵】【焼く】を選択した時には、【目玉焼き】 【ゆでる】に変えると、【ゆで卵】といったように、組み合わせこどに表示される内容を変えたいです。 また、検索ボタンやリセットボタンを連動させたいです。検索ボタンを押すと結果が余っているスペースに表示されるようにしたいです。色々と申し訳ありませんが、教えて頂けると助かります! <!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> </head> <body> <h1>見出し</h1> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="材料"> <option value="1">卵</option> <option value="2" selected>じゃがいも</option> <option value="3">にんじん</option> </select> </form><br> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="調理"> <option value="1">焼く</option> <option value="2" selected>ゆでる</option> <option value="3">蒸す</option> </select> </form> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <input type=" submit" name="search" value=" 検索" /> <input type="reset" value="リセット"> </form> </body> </html>