コンピュータと情報教育のためのHelpfulnotes
コンピュータと情報教育のためのHelpfulnotes
 
 
 

高校入試問題工房Manavi

 

 

 

 

 

 

 

 


第5章 フォーム

■第9回 フォームの設定


◆フォームは、アンケートや投票システム、掲示板等で用いられる閲覧者から直接の反応を伺い知るうえでも、インタラクティブな入力ツールです。フォームの種類としては、チェックボックス、ラジオボタン、ドロップダウンボックス、リストボックス、テキストボックス、テキスト領域、サブミット、リセット等などがあります。多くの場合CGIやJavaScriptなどと併用されてメリットを発揮します。ここでは、サーバーなどでCGIの利用が可能であるとか、CGIやJavaScriptの知識がある程度あることなどが前提になります。詳細は、他の専門のWebサイトなどで確認してください。


●Webツールの表示

@フォームを使用する上で、以下図:1のようにWebツールがあることを確認します。
もしこのWebツールがツールバーになければ、
Wordのメニュー[表示]⇒[ツールバー]⇒[Webツール]を選択して取り込むようにします。

(図:1

●チェックボックスの挿入
@以下の図:2のWebツール上で赤丸囲みしたチェックボックスのボタンを押します。
すると画面本体部分にチェックボックスのフォームが挿入されます。


(図:2

A任意の数のチェックボックス挿入します。
何のためのチェックボッ クスかを横に文字入力し添えます。以下の図:3。


(図:3

 

Bチェックボックスを任意挿入したら、それぞれのチェックボックスのプロパティを設定します。
画面のように設定するチェックボックスをアクティブにします。
右クリックして表示されたメニューからプロパティを選択すると(以下図:4)のように
プロパティのダイアローグが表示されます。

(図:4

C以下の図:5ABCそれぞれは、
上記Aで挿入したチェックボックスのそれぞれのプロパティです。
[HTMLName] は、すべて、グループして共通のものにします。仮に it-use。

[Value]
は、 仮の想定で、
午前のチェックボックスを選んだ場合のmorning。
午後のチェックボックスを選んだ場合のafternoon。
深夜のチェックボックスを選んだ場合のnight。
としています。

[Checked]
(図:5C)は、
(例えば:ここでは、深夜を選択する確立が高いなどとした時など)初期値の値が一般的な前提となるだろうと想定される場合に、プロパティで「True」にして便宜的に チェックを入れます。 入れなくても構わないものです。 入れると、 ブラウザで表示した時、[Checked]
したところだけ、
事前にチェックマークが入った状態で表示されます。

(図:5
(図:5
(図:5

 

ラジオボタンの挿入
@
以下図:6の赤丸囲みした部分のラジオボタンをClickして、
任意ラジオボタンを挿入し配置します。

(図:6


A配置したラジオボタンに対し個別にプロパティを設定します。
それぞれのラジオボタンを右Clickしてプロパティダイアローグを表示します。

[HTMLName] 。ラジオボタンをグループ化して共通の名称にします。
以下の例ではseibetsuとしています。

[Value]
。ラジオボタンの個別の値をValueに入れます。
以下の例 図:7AB では、男をman 女を womanとしました例です。

[Checked]は設定してもしなくてもかまいません。

(図:7 A (図:7 B



●テキストボックスを挿入
以下図:8の赤丸囲み部分をClickして任意テキストボックスを挿入します。
[Width]
 で入力範囲を広げます。

[MaxLength]
 は入力できる文字数です。0で、無限大の文字数がはいます。

(図:8

[Value]  に値を入力すると、例えば、図:9のように「http://」などを設定しておくと、
ブラウザが
表示されたとき、
あらかじめ「http://」
(図:10)の部分がテキストボックスには入力されます。

(図:9
(図:10)

 


●ドロップダウンボックスの挿入

以下図:11の赤丸囲み部分のドロップダウンボックスボタンをClickし配置します。(プルダウンメニューのことです。)

(図:11

プロパティの設定は
[DisplayValues] 以下ず:12のように複数入力し、それぞれをセミコロンで区切ります。
(以下の例は例えば= 東京駅;名古屋駅;京都駅;大阪駅;岡山駅 とした例です。[Value]
に同様の内容が自動的に入力されます。)

[MultiSelect]
 Trueにするとプルダウンメニューの形式からリストボックスになります。

[Size]
 一度に表示できる項目数のことです。図:13。

(図:12
(図:13

※ブラウザで表示した状態です。以下図:14のように
プルダウンで 表示された項目の中から一つの項目が選択できます。

(図:14

 


●リストボックスの挿入
基本的には、ドロップダウンボックスと同様の設定手順で行います。
ドロップダウンボックスとの違いは、
[MultiSelect]
Trueにすると、 ブラウザで表示したときに複数の項目の選択ができます。

(図:15
(図:16

 


●テキスト領域の挿入

以下図:17のテキスト領域の赤囲み部分をClickします。
プロパティの設定は
[Clumns] テキスト全体の幅の設定
[Rows] 
テキスト全体の高さの設定
[WordWrap]
Virtual もしくはPhysical に設定した場合は、入力した文字がボックス内で折り返されます。
それぞれの違いは、
Virtual の場合: 画面上では折り返され、送信データは折り返しません。
Physical の場合: 画面上でも、送信データ上でも折り返されます。

(図:17

 

●送信・リセットボタンの挿入
以下図:18のテキスト領域の赤囲み部分をClickします。
任意配置した後、プロパティを設定します。

(図:18

(図:19

プロパティの設定は
[Encoding] application/x-www-form-urlencoded
CGIを使う場合はこのままでOKです。

[Method]
一般的には「GET」ではなく「POST」大文字で設定します。
詳細はサーバーで確認する必要があります。

 

 

●マイコン/電子電気エンジニア育成教材販売
革新的な教育システムを創造する株式会社アドウィンのマイコン/電子電気エンジニア育成教材販売をHelpfulnotesで代行販売を開始しました。
●キットで遊ぼう電子回路【全10シリーズ】 および 解説CDシリーズ
●キットで学ぶ!FPGAチャレンジャー入門編
●キットで学ぶ!ARMチャレンジャー入門編
●キットで学ぶ!ARMチャレンジャー応用編

 

 




Copyright (C) 2005 Helpfulnotes. All Rights Reserved.

 

 

GIF89a!,L;