rowspan 属性や colspan 属性を使ってセルを伸張することができる. 伸張したぶん,次のセルを減らさなければならないことに注意.
伸張はセルの位置関係の構造を壊す(教科書図5.7 参照)ので注意が必要.
テーブルをレイアウト目的に使用すべきではない. やむを得ずレイアウト目的に使用するときは教科書 p.62 の項目に注意すること.
CGI とダイナミック HTML について説明します.
フォームについて説明します.
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 -->
上の例は以下のように表示され,利用することができる. (div.google に対して背景色などのスタイル指定を行っている)
select 要素を使ってメニュー選択式の入力ができる.書式は例 9.3 を参照.
textarea 要素を使って複数行にわたる長い文章を入力できる. 前述の type="text" の input 型では一行の入力しかできない.
button 要素でボタンに画像やテキストを使うことができる.
フォームはブラウザによる画像表示がないと理解しにくいものになりやすいため, ユーザのアクセシビリティに配慮する必要がある. アクセシビリティ向上のための手段を説明する.
入力要素に対してそれが何の入力かがわかりやすいことは重要である. 通常は入力要素の横に「氏名:」など,入力するものの説明(ラベル)をおく. これはブラウザの表示に依存しているので, あいまいなくラベルと入力要素を関連づける手段が label 要素である. 書式は例 9.7 を参照.
fieldset 要素でコントロールをグループ化することができる. 教科書 p.137 の例 9.9 と図 9.3 を参照.
optgroup 要素でメニューの選択枝をグループ化できる. 教科書 p.138 の例 9.10 と図 9.4 を参照.
通常は TAB キーを押すことで HTML 文書に記述された順番で入力対象が切り替わる. tabindex 属性を用いることでこの順番を入れ換えることができる.
accesskey 属性で入力の選択にキーによるショートカットを設けることができる. 操作はブラウザにより異なる.教科書の例 9.12 を見よ.
フォームで入力されたデータが CGI という仕組みによって処理される手続きについて説明します.
CGI を用いたときのデータの流れは教科書 p.141 の図 9.7 を参照.
CGI の利用制限はプロバイダによる.
以下は URL エンコードの概略である.
get は CGI プログラムにクライアントの要求を表したデータを渡し, サーバからそれに応じたデータを送信してもらう手続き. URI の一部としてリクエストが送信される. http サーバへは例 9.15 のようなリクエスト行のみ送信される.
サーチエンジンへ検索結果を要求する場合に使用する. 9.1.2 節の例 のメソッドが get であることを参照せよ.
post はまとまったデータをサーバへ登録してもらう手続き. http サーバへは例 9.16 のようにリクエスト行(最初の 1 行)と, 送信する情報をボディとしたものが送られる.
掲示板へ自分の意見を投稿する場合のメソッドとして使われる.
get メソッドはリクエストのパラメータ情報が URI の一部にエンコードされ,ブラウザのアドレス欄にも表示される.
これを利用して get 要求のデータが埋め込まれた URI を直接指定することで form を使うことなしに CGI プログラムにリクエストできる.
自分の index.html を W3C html 検証サービス に検証させた ときのアドレス欄を確認せよ. 入力データのうち : や / が URL エンコードされていることを確認せよ.
アドレス欄に表示された文字列のうち, 変数の区切りの & を &として書き直した文字列を href 属性とする以下のようなアンカータグを wtest.html に作成せよ.
<p> <a href="上記で作成した文字列"> index.html をチェック </a> </p>
上記のリンクの動作を確認せよ.