lesson 10
第 10 回

第 10 回の講義メモ

5 章つづき

5.2

5.2.8

rowspan 属性や colspan 属性を使ってセルを伸張することができる. 伸張したぶん,次のセルを減らさなければならないことに注意.

伸張はセルの位置関係の構造を壊す(教科書図5.7 参照)ので注意が必要.

5.2.9

テーブルをレイアウト目的に使用すべきではない. やむを得ずレイアウト目的に使用するときは教科書 p.62 の項目に注意すること.

9 章

CGI とダイナミック HTML について説明します.

9.1

フォームについて説明します.

9.1.1
9.1.2

method 属性が get を指定し, action 属性が google のサーチプログラムを指定する以下の例を wtest.html に作成せよ.

<div class="google">
<form method="get" action="http://www.google.com/search">
<p>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" 
 alt="Google" ></a>
<input type="text" name="q" size="31" maxlength="255" value="">
<input type="hidden" name="hl" value="ja">
<input type="submit" name="btnG" value="Google 検索">
</p>
</form>
</div> <!-- google -->
type 属性
入力方法の種類
name 属性
入力の名前
value 属性
デフォルト値

上の例は以下のように表示され,利用することができる. (div.google に対して背景色などのスタイル指定を行っている)

Google

select 要素を使ってメニュー選択式の入力ができる.書式は例 9.3 を参照.

textarea 要素を使って複数行にわたる長い文章を入力できる. 前述の type="text" の input 型では一行の入力しかできない.

button 要素でボタンに画像やテキストを使うことができる.

9.2

フォームはブラウザによる画像表示がないと理解しにくいものになりやすいため, ユーザのアクセシビリティに配慮する必要がある. アクセシビリティ向上のための手段を説明する.

9.2.1

入力要素に対してそれが何の入力かがわかりやすいことは重要である. 通常は入力要素の横に「氏名:」など,入力するものの説明(ラベル)をおく. これはブラウザの表示に依存しているので, あいまいなくラベルと入力要素を関連づける手段が label 要素である. 書式は例 9.7 を参照.

9.2.2

fieldset 要素でコントロールをグループ化することができる. 教科書 p.137 の例 9.9 と図 9.3 を参照.

9.2.3

optgroup 要素でメニューの選択枝をグループ化できる. 教科書 p.138 の例 9.10 と図 9.4 を参照.

9.2.4

通常は TAB キーを押すことで HTML 文書に記述された順番で入力対象が切り替わる. tabindex 属性を用いることでこの順番を入れ換えることができる.

accesskey 属性で入力の選択にキーによるショートカットを設けることができる. 操作はブラウザにより異なる.教科書の例 9.12 を見よ.

9.3

フォームで入力されたデータが CGI という仕組みによって処理される手続きについて説明します.

9.3.1

CGI を用いたときのデータの流れは教科書 p.141 の図 9.7 を参照.

CGI の利用制限はプロバイダによる.

9.3.2

以下は URL エンコードの概略である.

  1. 空白文字を+に変換
  2. 特殊な文字を % と数字の組み合わせに変換
  3. 変数名と内容を = で結ぶ
  4. 各項目のデータを & で連結する
9.3.3

get は CGI プログラムにクライアントの要求を表したデータを渡し, サーバからそれに応じたデータを送信してもらう手続き. URI の一部としてリクエストが送信される. http サーバへは例 9.15 のようなリクエスト行のみ送信される.

サーチエンジンへ検索結果を要求する場合に使用する. 9.1.2 節の例 のメソッドが get であることを参照せよ.

post はまとまったデータをサーバへ登録してもらう手続き. http サーバへは例 9.16 のようにリクエスト行(最初の 1 行)と, 送信する情報をボディとしたものが送られる.

掲示板へ自分の意見を投稿する場合のメソッドとして使われる.

9.3.4

get メソッドはリクエストのパラメータ情報が URI の一部にエンコードされ,ブラウザのアドレス欄にも表示される.

これを利用して get 要求のデータが埋め込まれた URI を直接指定することで form を使うことなしに CGI プログラムにリクエストできる.

自分の index.html を W3C html 検証サービス に検証させた ときのアドレス欄を確認せよ. 入力データのうち : や / が URL エンコードされていることを確認せよ.

アドレス欄に表示された文字列のうち, 変数の区切りの & を &amp;として書き直した文字列を href 属性とする以下のようなアンカータグを wtest.html に作成せよ.

<p>
<a href="上記で作成した文字列">
index.html をチェック
</a>
</p>

上記のリンクの動作を確認せよ.

第 9 回へ戻る, 第 11 回へ進む


上の記述は本科目の教科書である 神崎正英 著, ユニバーサル HTML/XHTML の内容のうち授業でポイントを置いて説明する点を山本が要約, 補足したものを含みます.詳しい内容を必ず教科書で確認してください. Updated in November 28, 2003, schedule, Yamamoto Hiroshi