【html】検索ボックスを作りたい

解決済

質問者：パソコンHTML初心者
質問日時：2022/04/02 17:25
回答数：4件

https://www.google.com/search?q=

の後をテキストボックスで任意に指定してgoogleで検索できるようにしたいです。

テキストボックスだけが見えるようにして、エンターを押したら検索みたいな感じにしたいです。

初心者ですがよろしくお願いします

送信ボタンみたいなのは見えないようにしたいです

補足日時：2022/04/02 21:58
通報する
皆さん忙しい中答えてくれてありがとうございます！

補足日時：2022/04/05 23:21
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： Ogre7077
回答日時：2022/04/03 08:46

<form action="//www.google.com/search">

<input name=q>
</form>

「暗黙のsubmit」により、これだけで動作します。
詳しくは以下を参照
https://html.spec.whatwg.org/multipage/form-cont …

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます。
まさにこれです。最高！

通報する

お礼日時：2022/04/05 23:20

No.3

回答者： t_fumiaki
回答日時：2022/04/02 19:24

以下を色々カスタマイズして下さい。

尚、投稿で半角">を使うと上手く行かない(htmlの制約)ので、コピペしたら直してね！

＠⇒半角ダブルクォーテーション
＞⇒半角>

<form method=get action="http://www.google.co.jp/search＠＞
<table bgcolor="#FFFFFF"><tr><td>
<a href="http://www.google.co.jp/＠＞
<img src="http://www.google.com/logos/Logo_40wht.gif＠ border="0" alt="Google" align="absmiddle＠＞</a>
<input type=text name=q size=31 maxlength=255 value=""＞
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google検索">
</td></tr></table>
</form>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
今回はシンプルなものを作りたかったのですが、ロゴとかも入っていてこれはこれで良いですね！また別の機会にいろいろいじってみたいと思います。

通報する

お礼日時：2022/04/05 23:19

No.2

回答者： fujillin
回答日時：2022/04/02 19:16

こんばんは

以下、一例です。
HTMLだけでは難しいので、スクリプトを利用しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div>
<input type="text" name="text" />
<button name="search">googleで検索</button>
</div>

<script>
document.querySelector('button[name="search"]').addEventListener('click', e=>{
location.href = "h" + "ttps://www.google.com/search?q="
+ encodeURIComponent(e.target.previousElementSibling.value);
});
</script>
</body>
</html>