12月10日(水)1コマ目
今日、やったこと
フォーム
今日のホワイトボード
フォームとは
Webブラウザでサーバーに送信するデータを入力・選択する画面。
Webアプリケーションでよく見かける画面。
フォームを作る
まずは、頻出タグの紹介。
<form>タグ
フォームの始まり、終わりを表す。
method属性でサーバーに送信する際のHTTPのコマンドを指定。大抵、POSTコマンド。
action属性でリクエストするサーバーのURLを指定。
<input>タグ
type属性の違いで、入力・選択用の部品がいろいろと作ることができる。
<button>タグ
ボタンを作る。type属性をsubmitにすると、<form>タグで指定したURLにリクエスト送信。
|
| 図 フォームをつくる |
|
| 図 作成した画面 |
HTMLは以下のとおり。
送信ボタンをクリックすると
type属性がsubmitのボタンをクリックすると、<form>タグのaction属性で指定したサーバーのURLに、method属性で指定したHTTPのコマンドでリクエスト。
このとき、<form></form>内の<input>タグや<select>タグで入力・選択された内容が、name属性と一緒に送信される。
|
| 図 送信ボタンをクリックすると |
①クライアント側で入力、ボタンクリック
下図のように入力し、送信ボタンをクリック。
|
| 図 送信ボタンクリック前 |
②サーバーでの処理
受信データを使って、下図の画面を出力するHTMLを生成し、クライアントへ送信。
|
| 図 送信ボタンクリック後 |
|
| 図 サーバーで処理して、クライアントへ返信 |
選択系の部品を使う
チェックボックス(<input type="checkbox">)やラジオボタン(<input type="radio">)、選択リスト(<select>と<option>)は選択された項目のvalue属性を送信する。
|
| 図 選択系のタグたち |
以下の画面を作成。
|
| 図 作成した画面 |
HTMLファイルは以下のとおり。
送信ボタンをクリックすると
name属性とともに、選択された項目のvalue属性値が送信される。
下図のように選択して、送信ボタンをクリックする。
|
| 図 送信ボタンクリック前 |
下図のように、name属性とvalue属性値がペアになって送信される。
|
| 図 送信ボタンクリック後 |
次回は
フォームの練習問題。
