自作ホームページに自作検索フォームを設置する方法

このQ&Aのポイント
  • 自作ホームページに自作の検索フォームを設置する方法をご紹介します。JavaScriptを使用して、ラジオボタンで検索に使用するサイトを選択するフォームを作成します。
  • 自分のブラウザのホームページに検索フォームを設置したい場合、JavaScriptを使用してフォームを作成することができます。具体的な方法は、ラジオボタンを使用して検索に使用するサイトを選択するフォームを作成し、選択されたサイトに対応する検索エンジンのURLを設定することです。
  • ホームページに検索フォームを設置する際、JavaScriptを使用してラジオボタンで検索エンジンを選択するフォームを作成することができます。選択されたラジオボタンに応じて、検索エンジンのURLを変更することで、検索フォームの動作を制御することができます。
回答を見る
  • ベストアンサー

自作ホームページに自作検索フォームを設置したい(javascript使用)

みなさんこんばんは。 今、自分のブラウザのホームページ(ローカルに保存)を自作している最中なのですが、 その中に検索サイトへの検索フォームを設置する際に、ラジオボタンで検索に使用する検索サイトを選ぶような形のフォームを自作して設置したいのです。 絵でかくと、 ┏━━━━━━━━━━━━━━━━━━━┓ ┃┏━━━━━━━━━━━━┓┏━━━┓┃ ┃┃(検索語句を入力する場所) ┃┃検索!┃┃ ┃┗━━━━━━━━━━━━┛┗━━━┛┃ ┃                         ...... ┃ ┃○Yahoo JP ○Yahoo EN ○Google  .....  ┃ ┗━━━━━━━━━━━━━━━━━━━┛ こんなのが作りたいんですが、formタグにデフォルトで使用する検索サイトを入れて、後は、ラジオボタンが選択されたとき検索に使用するサイトを 変えるのをJavaScriptで制御すればよいとおもうのですが、Scriptはどのようなソースを書いたらいいでしょうか? 方針としては、ラジオボタンのonclickにactionの値を変える関数を仕込めばよいと思うのですが、javascriptは書いたことが無いので分からないです。 お忙しいところ申し訳ないですが、どうか教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

関連リンクを見てください。 これはドロップダウンボックスでサーチエンジンを選びますが、HTMLの知識があれば、ラジオボタンに変更する事もできます。

参考URL:
http://weapon.milkcafe.to/text/other/lecture010.html
strife
質問者

お礼

早速のお答えありがとうございます。 これを参考にすれば、思っていたとおりのものが作れそうです。 本当に助かりました。ありがとうございました。

関連するQ&A

  • ホームページに検索フォームを設置する方法

    ホームページにプルダウン式で 「Yahoo」「Google」「Yahoo&Googleの同時検索」「サイト内検索」の4項目で検索方法を指定できる検索フォームを設置したいと思っています。 (サイト内検索はなくてもよい) わかりにくいかもしれませんが、 検索方法指定|文字入力フォーム|検索ボタン (プルダウン式) という形にしたいと思っています。 こうゆうことが可能なのかもわからないのですが、 設置方法がわかるかたいましたら、ぜひ教えてください。 よろしくお願いします。

  • 検索窓設置

    初めまして。 http://help.yahoo.co.jp/guide/jp/ysearch/searchbox/instructions.html 上記Yahooの検索窓を設置しようと思っているのですが、 下記の様な感じにしたいと思っています。 -------------------------------------------------------- 入力フォーム | サイト内検索ボタン | Web検索ボタン | 辞書検索ボタン・・・ -------------------------------------------------------- 下記の様なプルダウンで選ぶ方式ではなく、ボタンに対して検索が 行えるようにしたいのですが、サイト内検索と組み合わせると、 中々うまく動きません。 ---------------------------------------------- 入力フォーム | プルダウンメニュー | 検索ボタン ---------------------------------------------- どうしたらうまく組み合わせられますでしょうか? すみませんがよろしくお願い致します。

  • 検索フォームで、検索先を変えられるようにする(ホームページ作成)

    検索フォームで、検索先を変えられるようにするには・・・。 フォーム(入力欄)は1つで、その隣に、ラジオボタンで「検索サイト1」「検索サイト2」「検索サイト3」と表示し、チェックを入れ、検索をすると、その指定したサイトで検索がされるようにしたいのです よろしくお願いします。

  • JavaScriptで「検索フォーム」作成について

    HP内にJavaScriptで「検索フォーム」を作成したいのですが、本やサイト等色々探してみても、その作り方がなかなか見つかりません。もし、詳しい方がいらっしゃれば教えて下さい。 具体的には質問追記欄に記載致します 例)CSSで作られたページに検索フォームを置き、検索された対象のページが新しいウィンドウに表示される。                           ▼フォーム▼   ▼検索ボタン▼ (1)検索フォーム初期状態     ⇒[ここに入力してください。] 「検索」 (2)検索フォームに「光」と入力。  ⇒[光              ] 「検索」 (3)"「検索」"ボタンをクリック。  ⇒[光              ] 「検索」 (4)新しいウィンドウ(name=jisyo)に 対象のページが表示される。

  • ホームページ内検索をフォームとJavaScriptで実現したい。

    簡単なホームページを作っているのですが、例えばページ内の特定のテキストを検索する場合は Ctrl+Fで検索できますが、自分で作っているページなので、FORMとJavaScriptを使って キーワードを formのテキストに入力し、検索ボタンを押すと、1つめのfind位置にジャンプし、 ページ内のキーワード全てに黄色の反転をさせたいのですが、可能でしょうか? DOM?というものを詳しく知る必要があると思いますが、お勧めの書籍がありましたら教えてください。

  • javascript 動的フォームの追加、削除について

    JAVASCRIPTを使って、追加ボタンを押したときに、入力フォーム(textbox)を2個、3個と追加させ、入力フォーム横に設置した削除ボタンで削除ボタン横の入力フォームを削除したいと思っております。 1)delInput2()の引数でボタンごとの情報(何番目のボタンか)を渡したい。 どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。 どうぞよろしくお願い致します。 <script type="text/javascript"> var arInput = 0; var Default = arInput; function addInput() { //追加処理 arInput ++ $("#area").append('<span id=\"group'+arInput+'\"><input type=\"text\" name=\"text'+arInput+'\" value=\"入力項目'+arInput+'\" /><input type=\"button\" onclick=\"delInput2()\" name=\"button'+arInput+'\" value=\"削除'+arInput+'\" /><br></span>\n'); } function delInput() { //削除処理 $("#group"+arInput).remove(); if(arInput > Default){ arInput -- } } function delInput2() { //指定項目削除処理 } </script> <form> <fieldset id="area"> <fieldset> <input type="button" onclick="addInput()" value="一行追加" /> <input type="button" onclick="delInput()" value="一行削除" /> </fieldset> </form>

  • JavaScriptを使ったらサーブレットの検索が出来なくなりました…

    お世話になります。 HTMLでテキストフォームに検索条件を入力し、送信ボタンを押すと 検索するサーブレットにとんで結果をJSPで表示する…という プログラムを作っています。 HTML上で、テキストフォームが未入力の場合はJavaScriptで 警告ウィンドウを表示させる様に作ったのですが、テキストフォームに 検索条件を入力した時にサーブレットにとばなくなってしまいました。 検索条件を入れて送信ボタンを押してもページは変わらず、 フォーム内容はクリアされます。この時は警告は出ません。 JavaScriptのコードを削除するとちゃんと検索結果のJSPにまで 処理が行われるのですが…。 参考までに、HTMLのソースも載せておきます。 <html> <head> <title>検索画面</title> <script language="JavaScript"> <!-- function getError() { txt=document.searchForm.search.value; if (txt=="") { alert("何も入力されていません!"); } } //--> </script> </head> <body> <center> <br><br><br><br><br><br><br><br><br><br> <b><font color=Salmon size=4>検索条件を入力して下さい。</font></b><br><br> <form name="searchForm"> <form method="post" action="../kadai7/Show" > <input type="text" name="search" size="25" maxlength="10">&nbsp; <input type ="submit" value="GO!" onClick="getError()"> </form> <a href=Menu.htm>★MENUに戻る★</a><img src="HTML\poo.gif"> </center> </body> </html> どうすればちゃんと処理されるようになるのか分かりません。 宜しくお願いします。

  • javascriptでフォーム要素の状態を制御

    いつもお世話様です。 phpでフォームを構成しています。 フォーム内のradioボタンの状態で、以降のラジオボタン、プルダウン、テキスト入力を 制御したいです。 <制御内容(やりたいこと)> situmon.phpで、 q1のラジオボタンが1の場合は、q2は回答しなくていい。 (2の場合だけ回答させる。) q3のチェックボックスが1でない場合は、プルダウンとテキストは入力しなくていい。 (1の場合だけ回答させる。) <現状のソース> ちなみに、該当するjavascript部分は、いろいろなサイトをみて、 いろいろ書き換えて試しましたが、どうもうまくいかず、 断念した段階そのままの状態です。 よって、ご回答はこれをベースにしなくても大丈夫です。 よろしくお願いします。 ---situmon.php--- <script type="text/javascript"> <!-- function Check() { document.form.elements["q2"][1].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2"][2].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2t"].disabled = (!document.form.elements["q1"][2].checked); } // --> </script> <body> <form name="form"> <!-- q1 --> <input type="radio" name="q1" id="q1" value="1" onclick="check();"/>はい <input type="radio" name="q1" id="q1" value="2" onclick="check();"/>いいえ <!-- q2 --> <input type="radio" name="q2" id="q2" value="1" />なぜ1 <input type="radio" name="q2" id="q2" value="1" />なぜ2 (その他: <input type="text" name="q2t" id="q2t" value="<php echo h(@$q2t); ?>" />) <!-- q3 --> <input type="checkbox" name="q3c" value="1" />楽しかった <select name="q3s"> <option value="" />▼選んで <option value="1" />めちゃめちゃ <option value="2" />めっちゃ <option value="3" />めちゃ </select> その他なにかあったら書いて <textarea name="q3t" id="q3t"><?php echo h(@$q3t); ?></textarea> </body>

  • JAVASCRIPTで送信フォームを作っています

    JAVASCRIPTで送信フォームを作っています。 ラジオボタンだけが値をだしてくれません。 なにか方法はあるのでしょうか。 アンケートにつかいます。 各項目を答えるごとに裏でテキスト化されて最終的に一括送信できるようにします。

  • HPの検索フォームについて。

    HPの検索フォームについて。 HP内に検索窓を設置しました。 Firefoxやchromeでは正常に表示されますが IE系のブラウザではラジオボタンの周りに 四角の枠が表示されます。 同じ表示にするにはどうしたら良いでしょうか?

    • ベストアンサー
    • HTML

専門家に質問してみよう