Googleやgoo辞書、Amazonなどの検索フォームを作る

ユーザーのid:limboさんがまとめられているので、下記リンク先をご覧ください。limboさんの日記のサイドバーに実際に各種検索フォームが使われています。（見た方がわかりやすいのでとりあえずリンクさせて頂きます＞id:limboさん）

• はてなダイアリー - 暗中「検索ボックス色々」

こちらでは各々の検索フォームの説明や、スタイル指定に便利な<fieldset>、<legend>というタグが使われています。

<form method="POST" action="searchdiary">
 <fieldset>
  <legend>日記内検索</legend>
   <input size="20" value="" type="text" name="word">
   <input value="検索" type="submit" name="submit">
 </fieldset>
</form>

のように書くと、

日記内検索

となり、検索フォームの説明がつけやすくなります。スタイルシートで指定してやれば、「fieldset」や「legend」の部分の見栄えも変えられます。

■補足：フォームタグについて

フォームというのはブラウザ上からメールソフトを立ち上げたり、アンケートを記入したり、検索したりといった動作を閲覧者が行えるようにするものです。その動作は、プロバイダーやはてなダイアリーのような“webサーバー”が設置している、「CGIプログラム」というものを通して行われています。なのでタグで動作を指定してみても、動作を要求したサーバーがその動作のCGIを提供していなければ利用できません。
はてなダイアリーではフォームを使える場面が少ないと思いますが、もう少し詳しく知りたい方は下記参考リンクなどをご覧ください。

• 【参考リンク】
  • 初心者向けホームページ作成支援 siriasu.net（個人サイト）
    • HTMLで作ろうホームページ、HTML入門編 - 「フォーム」の項を参照
    • メールフォームをつける
    • 検索窓をつけよう

画像を貼ってみるに戻る← | →ヘッダやフッタに何かを入れるに進む