検索フォームを作成する方法には、標準検索フォームを利用する方法と、一から自分で作成する方法があります。一から作成する場合の手順は、ややWeb上級者向けになります。ここでは、一から作成する方法を説明します。標準検索フォームを使用する場合はこちらをご覧ください。検索フォームの果たす役割は、ユーザーが指定した出発駅や到着駅などの情報をURL引数(URLの?以降の部分)に乗せて検索結果表示ファイルに渡すことです。2.0が存在するディレクトリへの相対パス、そしてデータファイル名です。検索フォームの送信先は検索結果表示ファイルです。従って、<form>タグのaction属性の値は検索結果表示ファイルへの相対パスを設定します。URL引数でフォームデータを送信するので、method属性の値は"get"とします(デフォルト値なので省略可)。フォームから上の表に示した引数を送信しなければならないので、vl、lev、arv、dir、fnの名前(name属性)を持った<input>要素または<option>要素が必要です。送信される値は各<input>要素(または<option>要素)のvalue属性の値です。value="〜">)を使って指定します。vl、lev、arvについては、ユーザーの操作によってvalueの値を設定するように設計する必要があります。JavaScriptで動的に変化させるか、セレクトボックスやラジオボタンを使用するのが有効です。データファイルからの路線名・駅名の抽出データファイルから路線名や駅名を抽出する場合は、datasystem.jsとデータファイルをこの順で読み込んでおく必要があります。両ファイルを読み込んでおくと、下記JavaScriptコードで路線名や駅名などを抽出することが出来るようになります。総路線数、駅数は、それぞれlines配列およびstationList.staList配列の長さから取得できます。2.0の検索フォームを作成することが可能です。標準検索フォームは、サンプルファイルや本サイトトップページの「実装例」で採用されているものです。標準検索フォームは、検索結果を表示させたい箇所に以下のコードを挿入するだけで作成できます。このままではデザインが大きく崩れるので後述のCSSファイルを読み込んでおく必要があります。src="faredio2.0/createForm.js"></script>外部JavaScriptの読み込みを行っている部分(italic体で示した箇所)については、実際の環境に合わせ各JavaScriptファイルへの相対パスを指定して下さい。検索フォームを正しく表示するには別途CSSファイル(faredio.css、faredioBox.css)を読み込んでおく必要があります。<head>〜</head>内に以下の2行を追加してください。/>italic体で示した箇所については、実際の環境に合わせ各CSSファイルへの相対パスを指定して下さい。2.0では、標準検索フォームの駅名一覧をポップアップ表示するように変更しましたが、検索フォームの設置位置によってはポップアップが画面の外側にはみ出してしまい、うまく表示されないようです。その場合は、farediobox.cssの下記の赤字の部分の値を適宜変更してください。none;}positionの指定方法は以下の通りです。staticまたはfixedに指定すると上手く動作しませんので、必ずrelativeかabsoluteのどちらかを指定するようにしてください。値ボックス位置の指定方法static特に配置方法を指定しません。top、bottom、left、right属性は使用できません。relativeデフォルトではこの値に指定してあります。top、bottom、left、right属性によって、本来の位置からどの程度ずらすかを指定できます。absolute検索フォームを配置する場所の親ボックスを基準に絶対位置でボックスの位置を指定する場合に使用します。fixedabsoluteと基本的に同様ですが、ページをスクロールしても位置が固定されます。2.0のシステムは、最新版のFirefox、Opera、IEで動作確認を行っています。