new コンピュータリテラシーiimhiguchi/literacy-a05.pdf · 2014. 10. 24. ·...
TRANSCRIPT
コンピュータリテラシーII(樋口担当)
日本工業大学 情報リテラシーII
５回目
１０/２４
1
本日の予定 2
Webページの作成（続き）
I． フォーム
II. 課題
日本工業大学 情報リテラシーII
I．フォーム
3
日本工業大学 情報リテラシーII
１．フォーム 4
フォーム：Webページの読者に入力してもらうコーナー(ex) ①懸賞ページのアンケート
②検索ページの条件入力③航空機予約や書籍注文等のオンラインショッピングの
注文受付フォーム
フォームの構成(1)フォーム ：ユーザが入力する場所(2)プログラム（CGI） ：入力データを処理する機能
日本工業大学 情報リテラシーII
２．コントロール 5
ユーザの入力を受け付ける要素
（１）テキスト入力フィールド①１行入力②複数行入力③パスワード
（２）選択ボタン①単一選択（ラジオボタン）②複数選択（チェックボックス）
（３）プルダウンメニュー（４）プッシュボタン（５）送信・リセットボタン
日本工業大学 情報リテラシーII
３．フォームのマークアップの基本 6
フォームを記述する場所は<FORM> </FORM>でマークアップする
<FORM action=“入力データを処理するプログラム（CGI）”method=“POSTあるいはGET”
>コントロールのマークアップ</FORM>
<FORM action=“temp.cgi” method=“GET”>
</FORM>
GET;短いフォーム用 POST：長いフォーム用
日本工業大学 情報リテラシーII
３．フォームのマークアップの基本 7
フォームを記述する場所は<FORM> </FORM>でマークアップする
<FORM action=“入力データを処理するプログラム（CGI）”method=“POSTあるいはGET”
>コントロールのマークアップ</FORM>
<FORM action=“temp.cgi” method=“GET”>
</FORM>
GET;短いフォーム用 POST：長いフォーム用
日本工業大学 情報リテラシーII
４．一行テキスト入力フィールド 8
<INPUT type=“text” name=“データ名” size=“横幅”>
type ：入力するコントロールの種類の指定text ：１行入力name ：データ名 どこに入力された情報か判別するための名前size ：横幅(半角文字で指定)
書式（設定）のルール 要素=“値” の組み合わせ
全てのコントロールで共通
日本工業大学 情報リテラシーII
４．一行テキスト入力フィールド 9
<HTML><HEAD><TITLE>一行入力フィールド</TITLE>
</HEAD><BODY><FORM action="thank.html" method="POST">
学科名<INPUT type="text" name="department" size="30"></FROM>
</BODY></HTML>
日本工業大学 情報リテラシーII
５．デフォルトテキストを入れる 10
<HTML><HEAD>
<TITLE>一行入力フィールド</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">学科名<INPUT type="text" name="department" value="創造システム工学科" size="30">
</FROM></BODY>
</HTML>
<INPUT type=“text” name=“データ名” value=“値” size=“横幅”>
日本工業大学 情報リテラシーII
６．パスワード入力フィールド 11
<HTML><HEAD>
<TITLE>パスワード入力フィールド</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">パスワード<INPUT type="password" name="pass" size="16">
</FROM></BODY>
</HTML>
<INPUT type=“password” name=“データ名” size=“横幅”>
日本工業大学 情報リテラシーII
７．入力文字数制限 12
<HTML><HEAD>
<TITLE>一行入力フィールド</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">学科名<INPUT type="text" name="department" size="30" maxlength="8">
</FROM></BODY>
</HTML>
<INPUT type=“text” name=“データ名” size=“横幅” maxlength=“値”>
日本工業大学 情報リテラシーII
８．複数行の入力フィールド 13
<HTML><HEAD>
<TITLE>複数行入力フィールド</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">複数行入力してください<BR><TEXTAREA name="comment" rows="5" cols="30">
(例：複数行入力可能)</TEXTAREA>
</FROM></BODY>
</HTML>
<TEXTERIA name=“データ名” rows=“行数（縦幅）” cols=“横幅”>Defaultの値</TEXTAREA>
日本工業大学 情報リテラシーII
９．単一選択ボタン 14
<HTML><HEAD>
<TITLE>単一選択ボタン</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">血液型<INPUT type="radio" name="bloodtype" value="A">A<INPUT type="radio" name="bloodtype" value="B">B<INPUT type="radio" name="bloodtype" value="O">O<INPUT type="radio" name="bloodtype" value="AB">AB
</FROM></BODY>
</HTML>
<INPUT type=“radio” name=“データ名” value=“値”>
単一選択なので同じデータ名を用いる
日本工業大学 情報リテラシーII
１０．複数選択ボタン 15
<HTML><HEAD>
<TITLE>複数選択ボタン</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">趣味<INPUT type=“checkbox” name=“book” value=“book”>読書<INPUT type=“checkbox” name=“music” value=“music”>音楽<INPUT type=“checkbox” name=“sport” value=“sport”>運動<INPUT type="checkbox" name="other" value="other">その他
</FROM></BODY>
</HTML>
<INPUT type=“checkbox” name=“データ名” value=“値”>
日本工業大学 情報リテラシーII
１１．選択済みボタン 16
<HTML><HEAD>
<TITLE>単一選択ボタン</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">血液型<INPUT type="radio" name="bloodtype" value="A" checked>A<INPUT type="radio" name="bloodtype" value="B">B<INPUT type="radio" name="bloodtype" value="O">O<INPUT type="radio" name="bloodtype" value="AB">AB
</FROM></BODY>
</HTML>
<INPUT type=“radio” name=“データ名” value=“値” checked>
日本工業大学 情報リテラシーII
１２．プルダウンメニュー 17
<HTML><HEAD>
<TITLE>プルダウンメニュー</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">学科名
<SELECT name="department"><OPTION>機械工学科<OPTION>創造システム工学科<OPTION>ものづくり環境学科
</SELECT></FROM>
</BODY></HTML>
<SELECT name=“データ名”><OPTION>項目１<OPTION>項目２・・・・
</SELECT>
日本工業大学 情報リテラシーII
１３．選択済みメニュー 18
<HTML><HEAD>
<TITLE>プルダウンメニュー</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">学科名
<SELECT name="department"><OPTION>機械工学科<OPTION selected>創造システム工学科<OPTION>ものづくり環境学科
</SELECT></FROM>
</BODY></HTML>
<SELECT name=“データ名”><OPTION selected>項目１<OPTION>項目２・・・・
</SELECT>
日本工業大学 情報リテラシーII
１４．入力項目のグループ化 19
<HTML><HEAD>
<TITLE>グループ化</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST"><FIELDSET>
<LEGEND>血液型</LEGEND><INPUT type="radio" name="bloodtype" value="A">A<INPUT type="radio" name="bloodtype" value="B">B<INPUT type="radio" name="bloodtype" value="O">O<INPUT type="radio" name="bloodtype" value="AB">AB
</FIELDSET><BR></FROM>
</BODY></HTML>
<FIELDSET><LEGEND>グループ名</LEGEND>コントロール
</FIELDSET>
日本工業大学 情報リテラシーII
１５．プッシュボタン 20
<HTML><HEAD>
<TITLE>プッシュボタン</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST">ストレス発散にどうぞ<BUTTON type="button" name="punch">
パンチ</BUTTON>
</FROM></BODY>
</HTML>
<BUTTON type=“button” name=“データ名”>ボタンに表示される文字
</BUTTON>
日本工業大学 情報リテラシーII
１６．リセットボタンと送信ボタン 21
<HTML><HEAD>
<TITLE>送信とリセット</TITLE></HEAD><BODY>
<FORM action="thank.html" method="POST"><INPUT type="submit" value="送信"><INPUT type="reset" value="リセット">
</FROM></BODY>
</HTML>
<INPUT type=“submit” value=“ボタンに表示される文字”>
<INPUT type=“reset” value=“ボタンに表示される文字”>
送信
リセット
日本工業大学 情報リテラシーII
II．課題
22
日本工業大学 情報リテラシーII
１．課題 23
自分のWebページの全世界への公開（続き）①次の要件満たす自分のWebページのデータファイルの作成②データファイルをWebサーバ(sstu.nit.ac.jp)にUP
提出方法：自分のホームページを見れるようにすること
先週と同じ
日本工業大学 情報リテラシーII
２．要件 24
先週作成したページにフォーム機能を用いたアンケートページを追加する
なお，結果を送信する先のページは，CGIではなく，アンケートに答えてもらった感謝のメッセージを表示する通常のhtmlページとし，アンケート結果は受け取らなくてよい．
日本工業大学 情報リテラシーII
２．要件の詳細 25
要件１：メニュー部分にアンケートページを追加する
要件２：アンケートページも外部CSSを使用し見た目の統一を図る
要件３：パスワード入力がある（ダミーでOK）
要件４：アンケートページは入力フォームを使用して作成するなお，アンケートする内容ついて詳細は問わないが，次のページの項目を全て含めること
要件５：リセットボタンと送信ボタンがある
要件６：ダミーのプッシュボタンがある（名前は任意）
要件７：送信ボタンを押した後，ちゃんと送信先のページ内容を表示する．送信先はthank.htmlなどとした感謝のメッセージを含むページとする．（これもCSSを使用して見た目の統一を図る）
要件８：感謝ページからトップページに戻れる
日本工業大学 情報リテラシーII
３．アンケート内容 26
（１）名前（グループ化）①名前（１行入力フィールド）②学籍番号（１行入力フィールド，文字数制限７文字）
（２）住所（グループ化）①県（プルダウンメニュー，Default：埼玉県）②市町村（1行入力フィールド， Default：南埼玉郡宮代町）③番地（1行入力フィールド， Default：学園台４－１）④建物・部屋番号（1行入力フィールド， Default： 4号館１０８号室）
（３）アンケート内容（グループ化）①性別（単一選択ボタン，Default：性別不詳）②血液型（プルダウンメニュー，Default：X型）③誕生日（月，日それぞれプルダウンメニューで横に揃える）④複数選択ボタンを用いたアンケート（項目は適宜作成）⑤ご意見欄 (複数行入力フィールド)
日本工業大学 情報リテラシーII
３．採点方法 27
①アンケートページへのリンクがある②アンケートページを表示できる③アンケートページでパスワード入力がある④アンケートページの内容が全て作成されて機能する⑤ダミーボタンがある．⑥リセットボタンがあり，機能する⑧送信ボタンがあり，押すと感謝のページを表示する．⑨アンケートページがCSS対応⑩感謝のページがCSS対応⑪先週までの内容ができている
締め切り基本的に演習時間中(次回までに)
日本工業大学 情報リテラシーII