7.フォーム 7-1 フォームとは 皆 さんの 中 には ホームページを 閲 覧 していて アンケートに 答 えたり 申 込 書 のような 書 式 に 入 力 した 経 験 がある 人 もいるでしょう すなわち そのような 書 類 を 作 成 し 例 えば 電 子 メールの 形 式 であらかじめ 決 めておいたメールアドレスに 送 信 させる このような 機 能 を 持 つブロックがフ ォームタグで 作 成 できるのです ここでは 前 節 とは 逆 に まず 実 例 を 体 験 してからタグの 詳 しい 説 明 をすることにします 以 下 の HTML 文 書 を 作 成 して ブラウザで 閲 覧 してみましょう なお 次 の 点 に 注 意 して 入 力 してく ださい メールアドレスを 入 力 する 箇 所 には 自 分 のメールアドレスを 入 力 します 住 所 と 性 別 の 前 には 全 角 のスペースを3 文 字 分 入 れます( 全 角 スペースは 文 字 として 認 識 されるので ブラウザ 画 面 でもその 分 が 空 白 になります) ただし ブラウザ 上 で 最 後 の 送 る ボタンをクリックしても 本 学 の 環 境 では 送 信 できませ ん [ 例 8]フォーム ファイル 名 : rei8.html <head> <title>フォームの 例 </title> </head> <body> <h1>アンケートにお 答 え 下 さい</h1> <form action="mailto:ysakuray@ell.u-bunkyo.ac.jp" method="post" enctype="text/plain"> 氏 名 :<input type="text" name="name" size="20"> 住 所 :<input type="text" name="address" size="30"><p> 年 齢 :<input type="text" name="age" size="5"> 性 別 :<input type="radio" name="seibetsu" value="woman" checked> 女 <input type="radio" name="seibetsu" value="man"> 男 <p> 最 も 深 刻 だと 思 われる 環 境 問 題 をあげてください<br> <input type="radio" name="problem" value=" 温 暖 化 " checked> 地 球 温 暖 化 <br> <input type="radio" name="problem" value=" 破 壊 "> 環 境 破 壊 <br> <input type="radio" name="problem" value="ごみ">ごみ 問 題 <br> <input type="radio" name="problem" value="その 他 ">その 他 <p> 実 行 しているごみ 対 策 を 教 えてください( 複 数 回 答 可 )<br> <input type="checkbox" name=" 分 別 " value="on">ごみ 分 別 <br> <input type="checkbox" name=" 生 ごみ 処 理 機 " value="on"> 生 ごみ 処 理 機 を 利 用 <br> <input type="checkbox" name="リサイクル" value="on"> 資 源 ごみのリサイクル<br> <input type="checkbox" name=" 買 い 物 袋 " value="on"> 買 い 物 袋 を 持 参 する<br> 40
<input type="checkbox" name="ごみ 持 ち 帰 り" value="on"> 行 楽 のごみは 持 ち 帰 る<br> <input type="checkbox" name="その 他 " value="on">その 他 <p> 最 も 環 境 対 策 が 進 んでいる 国 は?<br> <select name="nation"> <option value=" 日 本 " selected> 日 本 <option value="アメリカ">アメリカ <option value="ドイツ">ドイツ <option value="スウェーデン">スウェーデン <option value="イギリス">イギリス </select><p> メッセージ: 思 ったことを 書 いてください<br> <textarea name="message" rows= 5 cols= 30 ></textarea><p> <input type="submit" value=" 送 る"> <input type="reset" value=" 取 り 消 し"> </form> </body> この HTML 文 書 をブラウザで 表 示 してみると 次 のような 画 面 が 現 れます 図 7-1 フォームの 例 41
7-2 フォームのタグ フォームは <form > </form>ではさまれた 範 囲 に テキストボックス ラジオボタン チ ェックボックス テキストエリアなどを 配 置 する 形 をしています ここでは 最 も 頻 繁 に 使 用 され る 主 要 なタグとアトリビュートに 絞 ってフォームを 説 明 していきます 他 のフォーム 用 タグやアト リビュートに 関 しては 必 要 に 応 じてタグリファレンスなどを 調 べてください 1フォームの 定 義 タグ<form>:フォームの 全 体 枠 を 定 義 します <form action="mailto:ysakuray@ell.u-bunkyo.ac.jp" method="post" enctype="text/plain"> </form> action="mailto:ysakuray@ell.u-bunkyo.ac.jp" :フォームで 入 力 されたデータの 送 り 先 を 指 定 通 常 メールアドレスかフォームデータ 処 理 用 プログラム(CGI)のある URL を 指 定 する method="post":データの 送 受 信 方 法 を 指 定 値 としては get と"post"があるが セキュリテ ィの 観 点 から"post"にしておく enctype="text/plain" :エンコードタイプの 指 定 エンコード 指 定 にもいくつか 種 類 はあるが メールでデータを 送 信 し 日 本 語 も 使 用 する 場 合 は"text/plain"にして おく 21 行 サイズの 部 品 <input>:type アトリビュートで 指 定 した1 行 サイズの 部 品 を 作 ります <input type="text" name="name" value="on" size="20" maxlength= 30 checked> :ここに 書 かれているアトリビュートは すべて 同 時 に 使 用 するわけではな く 組 合 せによるので 注 意 してください type="text":1 行 サイズの 部 品 を 指 定 text 1 行 のテキストボックス radio ラジオボタン checkbox チェックボックス reset リセットボタン submit サブミットボタン password パスワード 入 力 用 テキストボックス image サブミットボタン 代 わりのイメージ 続 けて src= でイメージ のソースを 与 える file ファイルを 選 択 するボックス 選 択 されたファイル 名 が フォ ーム 送 信 時 に 同 時 に 送 信 される name="name": 入 力 されたデータを 管 理 するための 名 前 名 前 = 入 力 データ の 形 で 受 信 さ れる value="on":テキストボックスでは 最 初 に 表 示 されるテキスト ラジオボタンとチェックボッ 42
クスでは 送 り 返 されるときの 値 リセットボタンとサブミットボタンではボタン に 表 示 されるテキスト size="20" :テキストボックスのサイズを 文 字 数 で 指 定 maxlength= 30 :テキストボックスに 入 力 できる 最 大 文 字 数 checked :ラジオボタンとチェックボタンにおいて 初 期 状 態 のチェック 状 態 を 指 定 3 選 択 ボックス<select>:<option>タグで 定 義 される 項 目 を 選 択 するボックスを 作 ります <select name="nation" size="5" multiple> <option value= 日 本 selected> <option value= アメリカ > </select> name="nation": 入 力 されたデータを 管 理 するための 名 前 名 前 = 入 力 データ の 形 で 受 信 さ れる size="5" : 選 択 ボックスの 縦 サイズを 行 数 で 指 定 これを 指 定 するとリストボックスの 形 式 に なる multiple: 複 数 項 目 の 選 択 を 可 能 にする value="on": 送 り 返 されるときの 値 selected:checked でもよい 初 期 状 態 のチェック 状 態 を 指 定 4 複 数 行 テキストボックス<textarea>: 複 数 行 にわたるテキストボックスを 作 ります <textarea name="message" rows= 5 cols= 30 > </textarea> name="message": 入 力 されたデータを 管 理 するための 名 前 名 前 = 入 力 データ の 形 で 受 信 される rows= 5 :テキストボックスの 縦 の 文 字 数 ( 行 数 ) cols= 30 :テキストボックスの 横 の 文 字 数 ( 列 数 ) [ 練 習 7-1]フォーム 上 記 のファイル rei8.html を 使 用 して 以 下 の 練 習 をしてください 練 習 項 目 はそれぞれ 個 別 に 確 かめましょう 最 後 に ファイル 名 renshu7-1.html 保 存 します 1 実 際 にアンケートに 答 えて 送 信 し 自 分 宛 に 届 いたデータのメールを 見 ながら どのような 形 で データが 送 られてくるのか また 名 前 = 入 力 データなど 指 定 通 りかどうかを 確 かめます 2<input type="submit" value=" 送 る">を<input type="image" src="univ04.jpg" value=" 送 る">で 置 き 換 えて type="image"の 意 味 を 確 認 します 3<input type="submit" value=" 送 る">の 前 に<input type="file" size= 50 name= Filename > <p>を 挿 入 して ファイル 名 を 入 力 するボックスに 参 照 ボタン がついて 現 れるのを 確 認 し 43
実 際 にファイルを 検 索 して 送 付 して 送 られてきたデータメールの 内 容 も 確 認 しましょう 4<select name="nation">を<select name="nation" size="5" multiple>で 置 き 換 え コンボボッ クスに 変 わってリストボックスが 現 れ 複 数 の 項 目 を 選 択 できることも 確 かめましょう 8.フレーム 8-1 フレームとは フレームとはブラウザ 画 面 をいくつかの 部 分 (フレーム)に 分 割 することで HTML4.0 から 正 式 に 規 格 化 されたものです 分 割 された 各 フレームは まるで 一 つのブラウザ 画 面 のごとく 扱 え あるフレーム 内 のリンク 先 の 内 容 を 他 のフレームに 表 示 させることも 可 能 なので 画 面 の 有 効 利 用 画 面 のダイナミックなレイアウト 画 面 表 示 内 容 の 整 理 などによく 利 用 されています この 章 では 再 度 最 初 にタグを 説 明 してから 例 題 で 確 認 する 順 序 を 採 用 します 8-2 フレームのタグ ブラウザ 画 面 は <frameset > </frameset>タグでフレームに 分 割 されます 各 フレームの 内 容 を 定 義 するには<frame>タグを 使 用 します また リンクされたファイルの 内 容 を 別 のフレー ムに 表 示 させるには 通 常 の<a> </a>を target アトリビュートを 加 えた 形 で 利 用 します では その 詳 細 を 見 ていきましょう 1フレーム 分 割 タグ<frameset> <frameset rows="25%,75%"> </frameset>: 行 単 位 で( 上 下 に) 分 割 <frameset cols="25%,75%"> </frameset>: 列 単 位 で( 左 右 に) 分 割 25% 75% 25% 75% 図 8-1 行 単 位 の 分 割 図 8-2 列 単 位 の 分 割 rows="25%,75%" : 行 単 位 で( 上 下 に)25%と 75%に 画 面 を 分 割 分 割 の 割 合 はパーセント かピクセルで 指 定 する ただし パーセントの 場 合 は 合 計 100%になるよ うに 与 える 必 要 がある 二 つ 以 上 に 分 割 するには rows="25%,25%,50%" のように 必 要 な 分 割 個 数 分 だけ 分 割 割 合 を 並 べればよい cols="25%,75%": 列 単 位 で( 左 右 に)25%と 75%に 画 面 を 分 割 その 他 の 機 能 は rows とまっ たく 同 じ 44
デフォルトでは フレームには 枠 がつきますが 枠 を 表 示 させたくない 場 合 は<frameset>タグに frameborder= no border= 0 framespacing= 0 のアトリビュートを 付 け 加 えます 2フレーム 内 容 の 定 義 タグ<frame>:<frameset>タグで 分 割 されたフレームに 表 示 する 内 容 を 定 義 します <frameset>タグは 画 面 を 分 割 するだけで 内 容 の 表 示 までは 行 いません <frame name= title src= title.html marginwidth= m marginheight= n scrolling= auto > </frame> name= title : 分 割 されたフレームに 付 ける 名 前 リンクターゲットの 名 前 になる src= title.html :フレーム 内 に 表 示 する 内 容 のソースファイル 指 定 marginwidth= m :フレーム 内 での 左 右 マージンをピクセルで 指 定 marginheight= n :フレーム 内 での 上 下 マージンをピクセルで 指 定 scrolling= auto :フレームにスクロールバーをつけるかどうかを 指 定 yes : 必 ず 付 ける no : 付 けない auto : 内 容 が 収 まらないときには 自 動 的 につける(デフォルト) 3リンクターゲット:リンク 先 ファイルを 表 示 するフレームを 指 定 します <a href= rei1.html target= text > </a> target= text :リンクターゲットは text という 名 前 のついたフレームになる すなわち こ のリンクがどのフレームで 張 られていても リンクファイル rei1.html の 内 容 がフレーム text に 現 れる target としては フレーム 名 以 外 に 次 のよ うな 特 殊 なフレームを 指 定 することもできる _blank: 新 しいウィンドウを 生 成 し そこに 表 示 _self:リンクタグのあるフレームに 表 示 _parent:リンクタグのあるフレームの 親 フレームに 表 示 _top:すべてのフレームを 破 棄 し トップウィンドウに 表 示 なお target= _blank という 指 定 は 通 常 のリンクタグでも 使 用 できる 画 面 を 左 右 と 上 下 を 組 み 合 わせて 分 割 する 場 合 は それぞれの<frameset>タグを 適 切 に 組 み 合 わ せます 次 節 の 例 を 参 考 にしてください 45
8-3 フレームの 例 題 では 実 際 にフレームを 使 用 する HTML 文 書 を 作 成 しましょう まず フレームが 多 いと そ こに 表 示 する 内 容 をもつ HTML 文 書 の 数 も 最 低 同 じだけ 必 要 であり 表 示 内 容 を 次 々と 変 えてい くのなら さらに 多 くの HTML 文 書 が 必 要 になることを 頭 に 入 れておきましょう そこで 今 ま で 作 成 してきた HTML 文 書 rei1.html rei2.html 等 を 有 効 利 用 することにします それで も3つのフレームに 分 割 する 場 合 最 低 4つの HTML 文 書 を 作 っておきます [ 例 9]フレーム まず 画 面 を 上 下 に 15% 対 85%に 分 割 し 上 の 部 分 にはその 内 容 を 表 示 し 下 の 85%の 部 分 を さらに 左 右 に 25% 対 75%に 分 割 し それぞれの 部 分 にその 内 容 を 表 示 するようにします つまり title sample text という 名 の 付 いた 3 っつのフレームを 作 成 し 内 容 を 表 示 するプログ ラムを 作 ります ファイル 名 : rei9.html <head> <title>html の 例 と 練 習 </title> </head> <frameset rows="15%,85%"> <frame name="title" src="title.html"> <frameset cols="25%,75%"> <frame name="sample" src="sample.html"> <frame name="text" src="text.html"> </frameset> </frameset> 次 に それぞれのフレームの 内 容 を 担 当 する HTML 文 書 を 作 ります ファイル 名 : title.html <body background="greenred_marble.gif" text="#0000ff"> <center> <h1> HTML の 例 と 練 習 </h1> </center> </body> 46
ファイル 名 : sample.html <body background="yellow_fabric.gif" text="#000000"> <h3> 目 次 </h3> <h3><a href="napoleon.html" target="text">ナポレオン 物 語 </a><br> <a href="rei1.html" target="text"> 例 1</a><br> <a href="rei2.html" target="text"> 例 2</a><br> <a href="rei3.html" target="text"> 例 3</a><br> <a href="rei4.html" target="text"> 例 4</a><br> <a href="rei5.html" target="text"> 例 5</a><br> <a href="rei6.html" target="text"> 例 6</a><br> <a href="rei7.html" target="text"> 例 7</a><br> <a href="rei8.html" target="text"> 例 8</a><br> <br><br> <a href="rei9.html" target="_top"> 最 初 に 戻 る</a></h3> </body> <body> </body> ファイル 名 : text.html ここでまず 注 意 すべきことは すべて 必 要 となるファイルが 同 じフォルダ 内 にあることです 確 認 しておきましょう また text フレームの 最 初 の 内 容 は 白 紙 とし sample フレームでリン ク 例 1 ~ 例 8 をクリックすると 初 めてその 内 容 が 現 れるようになっていることにも 注 意 し ておきましょう 最 初 の 画 面 は 次 ページの 図 のようになります 47
図 8-3 [ 例 9]の 最 初 の 画 面 [ 練 習 8-1]フレーム 以 下 の 練 習 をしましょう 1ブラウザ 画 面 でフレーム 境 界 枠 をマウスでドラッグして 適 切 と 思 われる 位 置 に 移 動 させてみま しょう なお これは 一 時 的 で ソースプログラムには 影 響 しません 2これらのフレームの 枠 をなくしましょう 3どうすれば 以 下 のような 分 割 が 可 能 か 考 えて 見 ましょう また できればそれを 試 してみまし ょう 図 8-4 複 雑 なフレームの 作 成 48