YahooやGoogleの検索をHPにいれる

質問

教えてください。前回、プルダウンの件で質問をして、答えを頂いたのですがお礼を言うのを忘れていました。Flagstaffの名前に返信いただいた方、ありがとうございました。

YahooやGoogleの検索窓を、リンクキットのソースをコピペして貼ることは出来るのですが、Yahoo、Googleなど検索サイトの窓をそれぞれつけると場所をとってしまうので、下記のような検索を作りたいと考えております。どなたか教えていただけませんでしょうか。また参考になるサイトがあれば教えてください。

１．検索する情報をいれるテキストフィールドを１つだけにする。

２．テキストフィールどの幅に合わせてその下に「Yahoo検索」と「Google検索」のボタンを２つ同じ大きさで設置する。

３．テキストフィールドに検索文字を入力してYahooで検索するときはYahooボタン、Googleで検索するときはGoogleボタンを押して検索する。

４．１．のテキストフィールドの横幅を変更して調整できるようにする。

５．２．のボタンを設置する際にボタンの横幅を調整できるようにする。

以上、どなかたご存知のかた教えてください。よろしくお願いします。

回答No.4

souta_n

ここのサイトで検索窓を無料配布しています。

参考URL：

http://useing.com/free/search.html

回答No.3

flowermaze

＞１、３
YahooとGoogleでキーワードを入れるフィールドの名前が違うので、そのままではひとつのフォームを共有できません。
ページの下部などに隠しフォームを用意して、テキストフィールドに入力された値を、それぞれのボタンが押された時に対応するフォームに送って送信します。

概要を書くので、フォームの書き方など詳しい所は調べてください。

[スクリプト部分]
KeywordField = new Array();
KeywordField['Yahoo'] = 'p'; // Yahooのキーワード入力エリア名
KeywordField['Google'] = 'q'; // Googleのキーワード入力エリア名

function {
Search (Form) {
document[Form].KeywordField[Form].value = document.dammy.keyword.value; //入力された値を該当のキーワード入力エリアに代入
document[Form].submit(); // 該当のフォームを送信
}
[ダミーフォーム]
<form name="dammy">
<input type="text" name="keyword"><br>
<input type="button" value="Yahoo検索" onclick="Search('Yahoo')">
<input type="button" value="Google検索" onclick="Search('Google')">
</form>

[隠しフォーム]
Yahoo, Googleのサイトで配布されているフォームを張り付ける。フォーム部品の属性を全てhiddenに書き換えて、見えなくしておく。
<form name="Yahoo">のように、各フォームには名前を付けておく。

ダミーフォームのテキストフィールドやボタンの横幅は、HTMLとCSSで適当に調整してください。

回答No.2

noname#96725

下のようにして見て下さい。

まず2列2行の表を作ってやります。
上の行に検索窓をそれぞれ入れ、下の行にはそのボタンを入れます。
その表のサイズを調整する事でご希望のデザインになります。但しある程度寸法には制限があって、テキストフィールドの高さに合わせる必要があると思います。
ソースを貼り付けられたのですからある程度HTMLは読めますよね。

もしわからない箇所があっても挑戦して見て下さい。そのコツはHTMLを部分毎に一つ記述を変えてみてそれがどう見え方に影響を与えるかを確認する、それを繰り返すのです。一度に変えるのは一箇所だけにしないと解らなくなります。
表である事を感じさせまいとすれば、table　border="0"と記述してやれば良いです。

私もそのようにして自分の好みのデザインに変えてHPに貼り付けました。
このように自分で研究すれば知識は確実なものになるので、この手は良く使っています。

回答No.1

Blackwingls

こんばんわぁ、Blackwinglsです。

そういえば昔
http://okweb.jp/kotaeru.php3?q=732344
という回答をしました。
参考になりますかねぇ・・・・

４と５の要望は、結構面倒な処理が必要となりそうです。
必須条件かどうか再度検討されたら如何でしょうか。

ではでは～☆彡

参考URL：

http://okweb.jp/kotaeru.php3?q=732344

お礼

ありがとうございました。参考になりました。