Page 1 of 7 ホームページ 作 成 Note HOME HPビルダー HTML/CSS CGI/Perl ez-html WebDesign Link SiteMap HTML 入 力 フォーム WebブラウザにHTMLファイルを 表 示 させる 通 常 の 静 的 なページ に 対 し メールフォ ーム 掲 示 板 ブログなどのようにWebブラウザから 入 力 された 要 求 に 対 して Webサー バ 側 でプログラムを 呼 び 出 し 処 理 した 結 果 を 返 すしくみを CGI (Common Gateway Interface )といいます このようなページを 動 的 なページ といいます この 動 的 なページには サーバ 側 でPerl PHPやC 言 語 などのプログラムが 使 われた り JavaScriptのようにブラウザ 側 で 処 理 します このときWebサーバのCGIプログラムに 渡 すパラメータは テキストボックスやチェックボックスなどのフォーム 部 品 で 指 定 します これらのデータを 入 力 するためのユーザインターフェース 部 分 を HTMLでは<form> 要 素 で 記 述 します form 要 素 の 構 造 form 要 素 は <form>~で 一 つの 入 力 フォームを 形 成 します フォームの 中 に は <input> <select> <textarea> などのフォーム 部 品 を 配 置 して 通 常 一 つのサブミ ット( 実 行 )ボタンを 持 ちます 各 入 力 部 品 に 値 を 入 力 した 後 サブミットボタンを 押 すと method 属 性 で 指 定 した 転 送 方 法 で action 属 性 で 指 定 したアクション( 転 送 先 URI )を 呼 び 出 します method 属 性 値 はデータの 送 信 方 法 により get と post の 二 種 類 があります これら はそれぞれ HTTP 要 求 メソッドの GET と POST に 対 応 しています <form method="post" action="uri"> ~ <form method="post" action="./cgi-bin/xxx.cgi"> 名 前 <input type="text" name=" 名 前 " value=" 太 郎 "> <input type="radio" name=" 性 別 " value=" 男 " checked> 男 性 <input type="radio" name=" 性 別 " value=" 女 "> 女 性 <input type="reset" value=" 取 消 "> 名 前 太 郎 男 性 女 性 送 信 取 消 GET と POST HTTP メソッドの GETと POSTは データの 送 信 方 法 が 異 なります GETは action 属 性 に 指 定 した URI に? をつけ その 後 にデータをつけて URI として 送 られます それを 受 け 取 ったサーバは? 以 降 を 環 境 変 数 に 入 れて CGI プログラムに 渡 しま す 送 信 できる 情 報 量 には 制 限 があります POSTは URI の 一 部 ではなく 独 立 した 本 文 として 送 られます セキュリティの 面 で も 有 利 な POST が Web ページの 入 力 フォームにはよく 使 われます
Page 2 of 7 <input>フォーム 部 品 フォーム<form> 内 のテキスト 入 力 や 実 行 ボタンなどの 各 フォーム 部 品 を 表 示 します 下 記 の type 属 性 の 値 によって 見 栄 えも 動 作 も 異 なる 部 品 となります type 属 性 text 一 行 テキストの 入 力 を 行 なうフィールド password パスワードの 入 力 フィールド file ファイルをアップロードするためのファイル 入 力 フィールド checkbox チェックボックスで 複 数 項 目 の 選 択 radio ラジオボタンで 一 つの 項 目 の 選 択 submit 実 行 ボタンを 形 成 して action 指 定 の URI にフォームデータを 渡 す reset 取 消 ボタンを 形 成 してフィールド 内 すべてをデフォルト 値 にリセット button 汎 用 ボタンを 形 成 してスクリプトを 起 動 hidden 表 示 させないで サーバ 側 にコントロールデータを 渡 す 属 性 name value checked size フィールドのデータ 名 で submit と reset 以 外 すべてのタイプに 必 要 スクリプトに 渡 される 値 で submit reset はボタン 名 として 表 示 選 択 フォーム checkbox radio の 選 択 された 初 期 値 text や password フィールドの 長 さを 文 字 数 で 指 定 初 期 値 は20 以 下 <input>フォーム 部 品 の 記 述 例 と 表 示 例 を 示 します 実 行 送 信 ボタンはサン プルなのでできません type="text" 一 行 テキスト 入 力 フィールド 名 前 <input type="text" value=" 日 本 太 郎 "> 一 般 的 な 一 行 テキスト を 入 力 するフィールドで す フィールドの 長 さは size で 半 角 英 数 字 の 文 字 数 を 指 定 します デフォルト 値 は 20 文 字 です 名 前 日 本 太 郎 type="password" パスワード 入 力 フィールド パスワード <input type="password" name="pass" value="abcde"> 他 人 にパスワードを 見 られないように 入 力 文 字 は すべてアスタリスク * または で 表 示 されます name 属 性 は 通 常 半 角 英 数 字 にします パスワード type="file" ファイル 名 入 力 フィールド ファイル 名 <input type="file" name="upfile"> ブラウザからサーバーに ファイルをアッ
Page 3 of 7 プロードする 際 に 用 います 入 力 フィール ドの 横 には 参 照 ボタンが 表 示 されます サ ーバー 側 には ファイルを 受 け 取 るための ファイル 名 Browse... CGIスクリプトなどを 設 置 しておく 必 要 があります セキュリティ 上 初 期 値 を 設 定 したり スクリプトで 値 を 操 作 することはできません type="checkbox" チェックボックス <input type="checkbox" name="hobby" value=" 映 画 " checked> 映 画 <input type="checkbox" name="hobby" value=" 旅 行 "> 旅 行 <input type="checkbox" name="hobby" value="テニス"> テニス オン オフの 値 を 持 つチェックボックスを 表 示 しま す 複 数 項 目 を 選 択 できます 通 常 どれかのボック スに checked をいれて 選 択 状 態 にしておきます 映 画 旅 行 テニス type="radio" ラジオボタン <input type="radio" name="color" value=" 赤 " checked> 赤 <input type="radio" name="color"> value=" 青 "> 青 <input type="radio" name="color"> value=" 黄 "> 黄 同 じ name 属 性 をもつラジオボタンで 1つのラジオ ボタングループを 形 成 します 複 数 の 中 でどれかひと つしかチェックできない 点 がチェックボックスと 異 なりま 赤 青 黄 す これもどれかのボタンに checked をいれてデフォルト 値 を 選 択 状 態 にしておきます type="submit" 実 行 ボタン <input type="submit" value=" 実 行 "> このボタンを 押 すと <form> タグの action 属 性 で 指 定 したアクションが 呼 び 出 されます 実 行 type="reset" 取 消 ボタン <input type="reset" value=" 取 消 "> このボタンを 押 すと それまでに 入 力 した 情 報 をす べてキャンセルして 最 初 から 入 力 をやり 直 すことが できます 取 消 type="button" 汎 用 ボタン <input type="button" value="click!"> <input type="button" onclick="...">のようにボ
Page 4 of 7 タンをクリックしたとき JavaScript などを 起 動 する 際 によく 用 いられます Click! button 要 素 button 要 素 は type 属 性 により input 要 素 の button: 汎 用 ボタン submit: 実 行 ボタン reset:リセットボタンと 同 様 のボタンを 作 成 します form 要 素 内 に 配 置 してフォ ーム 部 品 とするほか フォーム 以 外 のJavaScript でも 利 用 できます <button type="button">クリック</button> クリック type="hidden" 隠 しフィールド 入 力 必 須 項 目 (メールアドレス メッセージ)をCGIプログラムに 指 定 する 例 <input type="hidden" name="need" value="email メッセージ"> 実 行 ボタンが 押 されても 画 面 上 には 表 示 されませ ん ユーザが 知 る 必 要 のないコントロールデータを CGI プログラムに 送 信 する 場 合 などに 使 用 します 送 信 <textarea>フォーム 部 品 :テキストエリア <form method="post" action="xyz.cgi"> <textarea name="msg" cols="25" rows="4"> ここにメッセージをどうぞ </textarea> <input type=submit value=" 送 信 "> <input type=reset value="クリア"> ここにメッセージをどうぞ 送 信 クリア 複 数 行 のテキストを 入 力 するフィールドです input 要 素 とは 異 なり 開 始 タグと 終 了 タグ を 使 います タグの 間 に 記 述 された 内 容 が 初 期 値 となります データの 名 前 を 指 定 する name 属 性 のほかに 入 力 エリアの 行 数 列 数 を 示 す rows 属 性 と cols 属 性 を 指 定 しま す ( 必 須 ) <select> select>セレクト 部 品 <select> は <form> で 作 成 されるフォーム 内 の 選 択 部 品 (セレクトボックス)を 表 示 し ます size 属 性 で 画 面 に 一 度 に 表 示 する 選 択 肢 の 行 数 を 指 定 します それぞれの 選 択 肢 を 記 述 するには <option> を 用 います どれかに selected を 入 れてデフォルト 値 を 選 択 状 態 にします プルダウン 式 で 表 示 する 場 合 size 属 性 指 定 しないデフォルト 値 (size=1)で プルダウンメニュー 表 示 します <form action="xxx.cgi"> <select name="os"> Windows 送 信
Page 5 of 7 <option value="win" selected>windows</option> <option value="mac">macintosh</option> <option value="unix">unix</option> <option value="other">その 他 </option> </select> リスト 形 式 で 表 示 する 場 合 size 属 性 で 表 示 行 数 を 指 定 することで リストボックス 形 式 で 表 示 します <form action="xyz.cgi"> <select name="browser" size="4"> <option value="ie6">internet Explorer6</option> <option value="ie7">internet Explorer7</option> <option value="fox2">mozilla Firefox2</option> <option value="opera9" selected>opera9x</option> <option value="other">その 他 </option> </select> Internet Explorer6 Internet Explorer7 Mozilla Firefox2 Opera9x 送 信 <optgroup> オプショングループ メニューは 選 択 肢 が 多 くなると 使 いにくくなります そこで optgroup 要 素 で 選 択 肢 の option 要 素 をグループ 化 します グループには label 属 性 で 名 前 を 付 けます ( 必 須 ) <select name="area"> <optgroup label=" 首 都 圏 "> <option selected> 東 京 都 </option> <option> 千 葉 県 </option> <option> 神 奈 川 県 </option> <option> 埼 玉 県 </option> </optgroup> <optgroup label=" 京 阪 神 "> <option> 大 阪 府 </option> <option> 京 都 府 </option> <option> 奈 良 県 </option> <option> 兵 庫 県 </option> </optgroup> </select> 東 京 都 <form>で 囲 まれたフォームの 入 力 部 品 をグループ 化 します <legend>でグループのタ イトルを 記 述 することができます グループ 化 することで フォーム 部 品 が 多 い 場 合 などに 見 やすくなるのと 非 視 覚 系 ブラウザ( 音 声 ブラウザ)などのアクセシビリティに 役 立 ちま す <fieldset> フォームのグループ 化 視 覚 的 にはタイトル 付 き 角 丸 ボックス 表 示 (IEの 場 合 )になるので 他 の 表 示 にも 応 用 できそうですが 本 来 のフォームのグループ 化 以 外 には 使 用 しないようにしましょう 非 視 覚 系 ブラウザなどでは 混 乱 することになります フォーム 以 外 に 用 いる 場 合 は スタイル シート CSS を 使 いましょう こちらの CSS 応 用 例 を 参 照 してください <form method="post" action="xyz.cgi"> <fieldset> <legend> 申 込 者 </legend> お 名 前 :<input type="text" name="name1" size="20"> 電 話 番 号 :<input type="text" name="tel1" size="20"><br>
Page 6 of 7 ご 住 所 :<input type="text" name="address1" size="60"> </fieldset> <fieldset> <legend>お 届 け 先 </legend> お 名 前 :<input type="text" name="name2" size="20"> 電 話 番 号 :<input type="text" name="tel2" size="20"><br> ご 住 所 :<input type="text" name="address2" size="60"> </fieldset> <input type="submit" value=" 送 信 する"> <input type="reset" value="リセット"> 申 込 者 お 名 前 : 電 話 番 号 : ご 住 所 : お 届 け 先 お 名 前 : 電 話 番 号 : ご 住 所 : 送 信 する リセット フォーム 上 の 実 行 リセット 操 作 の 前 に 確 認 ダイアログを 表 示 多 くのフォーム 部 品 で 構 成 された 入 力 フォームで 入 力 した 後 最 後 に 実 行 ボタンや リセット ボタ ンを 押 して CGI スクリプトに 送 信 する 前 に JavaScript を 使 用 して 簡 単 に 右 図 のような 確 認 ダイ アログを 表 示 することができます 特 に リセット ボタンの 場 合 誤 って 消 去 してしまう と 再 入 力 する 気 力 をなくし いらだったりする 要 因 になります そのような 操 作 ミスの 可 能 性 を 減 らすことができます あるいは リセットボタンは 特 別 に 必 要 性 がないかぎり 設 置 し ないほうがよいかもしれません 実 行 ボタンの 場 合 は 通 常 CGI スクリプトのほうで 確 認 メッセージが 入 るでしょうから ここで 表 示 すると うっとうしい と 嫌 がられるかもしれませんが JavaScript の onsubmit 属 性 や onreset 属 性 を 使 って 下 記 のようにします <form method="post" action="xyz.cgi" onsubmit="if(!confirm(' 本 当 に 送 信 していいですか?')) return false;" onreset ="if(!confirm(' 本 当 に 消 去 していいですか?')) return false;"> <input ~( 省 略 )> <input type="submit" value=" 送 信 する"> <input type="reset" value="リセット"> お 名 前 : 電 話 番 号 : ご 住 所 :
Page 7 of 7 送 信 する リセット Next >>スタイルシート スタイルシートCSS CSSの 基 礎 >>Top HOME HPビルダー HTML/CSS CGI/Perl ez-html WebDesign Link SiteMap Copyright (C)2007-2010 Homepage Note