第7回の内容
• 動的なWebサイト
• フォーム
静的なリソース
ファイルシステムのパス
URIのパス
/
d
e
b
c
/
a
e
d
b
c
公開ディレクトリ
GET /b HTTP/1.1
/a/bを送り返す
静的なリソース
ファイルシステムのパス
URIのパス
/
f
e
d
b
c
/
g
e
d
b
c
GET /g/e HTTP/1.1
/f/eを送り返す
動的なリソース
• 商品を紹介するページに、データベースに格納され
ている在庫情報も表示する。
• ユーザーから送られてきた検索キーワードにマッチ
する情報の一覧を表示する。
動的なリソースの生成
① 随時変化するWebサーバ上の情報
② メッセージヘッダで渡される情報
動的なリソースの生成
• データベースに記録されているデータ
• サーバの負荷
• 処理を行った日時
① 随時変化するWebサーバ上の情報
② メッセージヘッダで渡される情報
③ クエリやメッセージボディで渡される情報
動的なリソースの生成
• コンテントネゴシエーション用のヘッダ
•
User-Agentヘッダ
•
Refererヘッダ
① 随時変化するWebサーバ上の情報
② メッセージヘッダで渡される情報
③ クエリやメッセージボディで渡される情報
動的なリソースの生成
① 随時変化するWebサーバ上の情報
② メッセージヘッダで渡される情報
③ クエリやメッセージボディで渡される情報
動的なリソースの生成
① 随時変化するWebサーバ上の情報
② メッセージヘッダで渡される情報
③ クエリやメッセージボディで渡される情報
http://www.example.ac.jp:8080
/path/to/resource
?
qt=%E3%81%82&page=1
#r5
動的なリソースの生成
• ③クエリとして渡された情報を元に①デー
タベースを検索した結果を、②コンテント
ネゴシエーションにより希望されたPNG画
像として提供する
① 随時変化するWebサーバ上の情報
② メッセージヘッダで渡される情報
③ クエリやメッセージボディで渡される情報
フォーム
• ユーザーが情報を入力して送信
•
コントロール
⋯ 情報を入力する部品
• フォームが指定するURIに遷移
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
ラベル
コントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
コントロール
コントロール
ボタン
チェックボックス
ラジオボタン
メニュー
テキスト入力
ファイル選択
隠しコントロール
form要素
<
form
action="./buy" method="post">
<!-- ここにコントロールや、その他のHTML要素を配置 -->
</
form
>
form要素
属性名
属性値
action
フォームデータの送信先URI
<form
action
="
./buy
" method="post">
<!-- ここにコントロールや、その他のHTML要素を配置 -->
</form>
form要素
属性名
属性値
action
フォームデータの送信先URI
method
フォームデータの送信に用いられるメソッド
<form action="./buy"
method
="
post
">
<!-- ここにコントロールや、その他のHTML要素を配置 -->
</form>
form要素
属性名
属性値
action
フォームデータの送信先URI
method
フォームデータの送信に用いられるメソッド
enctype 送信されるフォームデータのメディアタイプ
既定値は
application/x-www-form-urlencoded
<form action="./buy" method="post">
<!-- ここにコントロールや、その他のHTML要素を配置 -->
</form>
フォームの送信
① 送信するデータの特定
② フォームデータの加工
③ フォームデータの送信
送信するデータの特定
送信するデータに含める
フォームの送信
① 送信するデータの特定
② フォームデータの加工
③ フォームデータの送信
フォームの例
<form action="/e" method="post"> <p>
名前：<input type="text" name="name" value=""> <br>
会員種別：
<select name="member">
<option value="g">一般会員</option> <option value="s">学生会員</option>
<option value="n" selected>非会員</option> </select>
<br>
<label><input type="checkbox" name="forum" value="yes">フォーラム参加</label> <label><input type="checkbox" name="party" value="yes">懇親会参加</label> <br>
<button type="submit">送信</button> <button type="reset">リセット</button> </p>
フォームの例
<form action="/e" method="post">
<p>
名前：<input type="text" name="name" value=""> <br>
会員種別：
<select name="member">
<option value="g">一般会員</option> <option value="s">学生会員</option>
<option value="n" selected>非会員</option> </select>
<br>
<label><input type="checkbox" name="forum" value="yes">フォーラム参加</label> <label><input type="checkbox" name="party" value="yes">懇親会参加</label> <br>
<button type="submit">送信</button> <button type="reset">リセット</button> </p>
フォームの例
<form action="/e" method="post"> <p>
名前：<input type="text" name="name" value="">
<br> 会員種別：
<select name="member">
<option value="g">一般会員</option> <option value="s">学生会員</option>
<option value="n" selected>非会員</option> </select>
<br>
<label><input type="checkbox" name="forum" value="yes">フォーラム参加</label> <label><input type="checkbox" name="party" value="yes">懇親会参加</label> <br> <button type="submit">送信</button> <button type="reset">リセット</button> </p> </form>
テキスト入力
フォームの例
<form action="/e" method="post"> <p>
名前：<input type="text" name="name" value=""> <br>
会員種別：
<select name="member">
<option value="g">一般会員</option>
<option value="s">学生会員</option>
<option value="n" selected>非会員</option>
</select>
<br>
<label><input type="checkbox" name="forum" value="yes">フォーラム参加</label> <label><input type="checkbox" name="party" value="yes">懇親会参加</label> <br> <button type="submit">送信</button> <button type="reset">リセット</button> </p> </form>
メニュー
テキスト入力
フォームの例
<form action="/e" method="post"> <p>
名前：<input type="text" name="name" value=""> <br>
会員種別：
<select name="member">
<option value="g">一般会員</option> <option value="s">学生会員</option>
<option value="n" selected>非会員</option> </select>
<br>
<label><input type="checkbox" name="forum" value="yes">フォーラム参加</label> <label><input type="checkbox" name="party" value="yes">懇親会参加</label> <br> <button type="submit">送信</button> <button type="reset">リセット</button> </p> </form>
テキスト入力
メニュー
チェックボックス
フォームの例
<form action="/e" method="post"> <p>
名前：<input type="text" name="name" value=""> <br>
会員種別：
<select name="member">
<option value="g">一般会員</option> <option value="s">学生会員</option>
<option value="n" selected>非会員</option> </select>
<br>
<label><input type="checkbox" name="forum" value="yes">フォーラム参加</label> <label><input type="checkbox" name="party" value="yes">懇親会参加</label> <br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
</p> </form>
