Kuro's Homepage
初心者のためのホームページ作成講座 Ver.3
【特設単科講座A】アンケートを作ろう!

【第2講】フォーム(1)・選択項目

(1998年12月14日更新)

Line

【There have been visitors since 1997. 9.24.】

Line

 第2講では、質問について、いくつかの項目から回答を選ぶ選択項目の作り方について説明します。

【一つ選ぶ】
<INPUT  TYPE="radio"  NAME="name"  VALUE="value">
<INPUT  TYPE="radio"  NAME="name"  VALUE="value"  CHECKED>
name={質問項目の識別語}
value={回答項目の識別語}

 これはラジオボタンといって、各選択肢のをクリックすることによって回答を選択する機能です。ただし、このラジオボタンは1つしか選択できません。1つしか選択できないというのは、nameの値が同じものの中から1つという意味です。質問ごとにnameの値を変えておけば、それぞれの質問に対して1つずつ回答を選択することができます。また、それぞれの質問に対して、どれを選択したかという情報を送信させるために、valueに回答を示すキーワードを入れておきます。

 なお、項目(1つだけ)に「CHECKED」とつけておくと、その項目の選択状態を初期設定にすることができます。

<FORM>
性別:
<INPUT TYPE="radio" NAME="sex" VALUE="male">男性
<INPUT TYPE="radio" NAME="sex" VALUE="female">女性
<BR>
学年:
<INPUT TYPE="radio" NAME="grade" VALUE="1">1回生
<INPUT TYPE="radio" NAME="grade" VALUE="2" CHECKED>2回生
<INPUT TYPE="radio" NAME="grade" VALUE="3">3回生
<INPUT TYPE="radio" NAME="grade" VALUE="4">4回生
</FORM>

(表示結果)


性別: 男性 女性
学年: 1回生 2回生 3回生 4回生

【複数選ぶ】
<INPUT  TYPE="checkbox"  NAME="name"  VALUE="value">
<INPUT  TYPE="checkbox"  NAME="name"  VALUE="value"  CHECKED>
name={質問項目の識別語}
value={回答項目の識別語}

 これはチェックボックスといって、各選択肢のをクリックすることによって回答を選択する機能です。チェックボックスは、ラジオボタンと違い、選択数に制限はありません。namevalueの意味は同じです。「CHECKED」の結果も同じです。

<FORM>
好きな科目を選んでください:
<INPUT TYPE="checkbox" NAME="class" VALUE="JA">国語
<INPUT TYPE="checkbox" NAME="class" VALUE="SO">社会
<INPUT TYPE="checkbox" NAME="class" VALUE="MA">数学
<INPUT TYPE="checkbox" NAME="class" VALUE="SC">理科
<INPUT TYPE="checkbox" NAME="class" VALUE="EN">英語
</FORM>

(表示結果)


好きな科目を選んでください: 国語 社会 数学 理科 英語

【リストから選ぶ】
<SELECT  NAME="name"  SIZE="size"  MULTIPLE>
<OPTION  SELECTED>value  …
</SELECT>
name={質問項目の識別語}
size={number}
value={回答項目の識別語}

 これは、リストを表示して選択させる機能です。SELECTタグの開始と終了の間に選択肢の数だけOPTIONタグを入れます。MULTIPLEがあると複数選択、ないと1つのみ選択になります。また、SELECTEDがある項目は最初から選択されています。

<FORM>
性別:
<SELECT NAME="sex">
<OPTION>男性
<OPTION>女性
</SELECT>

学年:
<SELECT NAME="grade" SIZE=3>
<OPTION>1回生
<OPTION SELECTED>2回生
<OPTION>3回生
<OPTION>4回生
</SELECT>

好きな科目:
<SELECT NAME="class" SIZE=3 MULTIPLE>
<OPTION>国語
<OPTION>社会
<OPTION>数学
<OPTION>理科
<OPTION>英語
</SELECT>
</FORM>

(表示結果)


性別: 学年: 好きな科目:

Line

NEXT【第3講】フォーム(2)・入力項目
Q&A【第2講】に関する質問フォーム
BACK【第1講】アンケートの作り方

Line

Clickablemap(Next)

© Koji Kuroda, 1996-