資料の一覧へ   アンケートフォームへ

アンケートを作成する

回答方法

<form></form>に挟むアンケートへの回答には、以下のような方法があります。

チェックボックス(複数選択) PC  携帯 その他
ラジオタイプ(一つ選択) PC  携帯 その他
セレクト(一つ選択)
短い言葉を記入
長い文章を記入

各記入箇所は1文字として扱われます。

チェックボックス

Q1:サイト閲覧にどの機器を利用していますか?すべて選んでください。 PC  携帯 その他

というように、項目をいくつでも選択できる回答形式です。上記の項目は、以下のようなタグで構成されています。

<p>
Q1:サイト閲覧にどの機器を利用していますか?すべて選んでください。
<input type="checkbox" name="q1" value="pc">PC
<input type="checkbox" name="q1" value="mobile">携帯
<input type="checkbox" name="q1" value="etc">その他
</p>

<input>

<input>はオープンタグなので、</input>で閉じる必要はありません。

type="checkbox"

<input type="checkbox" name="q1" value="pc">の type="checkbox"で複数選択できる回答形式であることを指定しています。

name="項目名"

<input type="checkbox" name="q1" value="pc">の name="q1"は、項目名です。ここで同じ名前が指定されている<input>は、同じ項目の選択肢(例ならすべてQ1の選択項目)であるという扱いになります。言い換えると、ここで指定する名前が違う=別の項目への回答である、ということです。
例:
<input type="checkbox" name="q1" value="pc">PC←Q1の質問に対する選択肢
<input type="checkbox" name="q2" value="mobile">携帯←Q2への質問に対する選択肢
半角英数字であれば、どのような名前をつけても構いません。

value="選択肢名"

<input type="checkbox" name="q1" value="pc">の value="pc"は、選択肢につける名前です。ここでつけた名前が回答として送信されます。 なので、同じ質問項目の選択肢には、全て異なる名前をつける必要があります。
(Q1とQ2に同じ名前の選択肢があっても構いませんが、同じQ1の中で選択肢の名前が重なってしまうとどの項目が選ばれたのか区別がつかなくなってしまいます。)
半角英数字であれば、どのような名前をつけても構いません。

戻る

ラジオタイプ

Q1:サイト閲覧にもっとも利用している機器はどれですか?一つだけ選んでください。 PC  携帯 その他

というように、並んだ項目から一つしか選択できない回答形式です。
複数の項目にチェックを入れようとすると、先に選択した項目からチェックが外れます。
上記の項目は、以下のようなタグで構成されています。

<p>
Q1:サイト閲覧にもっとも利用している機器はどれですか?一つだけ選んでください。
<input type="radio" name="q1" value="pc">PC
<input type="radio" name="q1" value="mobile">携帯
<input type="radio" name="q1" value="etc">その他
</p>

type="radio"

<input type="radio" name="q1" value="pc">の type="radio"で一つしか選択できない回答形式であることを指定しています。

name="項目名"

チェックボックスと同様、<input type="radio" name="q1" value="pc">の name="q1"は、項目名です。ここで同じ名前が指定されている<input>は、同じ項目の選択肢(例ならすべてQ1の選択項目)であるという扱いになり、一つだけしか選択できなくなります。
言い換えると、

<input type="radio" name="q1" value="pc">PC←Q1の質問に対する選択肢
<input type="radio" name="q2" value="mobile">携帯←Q2への質問に対する選択肢
↑のようにnameの指定が違えば、同時に選択することが可能ということです。

半角英数字であれば、どのような名前をつけても構いません。

value="選択肢名"

チェックボックスと同様、<input type="radio" name="q1" value="pc">の value="pc"は、選択肢につける名前です。ここでつけた名前が回答として送信されます。 なので、同じ質問項目の選択肢には、全て異なる名前をつける必要があります。
(別の質問文に対する選択肢として同じ名前の項目があっても構いませんが、同じQ1の中で選択肢の名前が重なってしまうとどの項目が選ばれたのか区別がつかなくなってしまいます。)
半角英数字であれば、どのような名前をつけても構いません。

戻る

セレクト

Q1:サイト閲覧にもっとも利用している機器はどれですか?

というように、枠をクリックすると表示される選択肢から選ぶ回答形式です。上記の項目は、以下のようなタグで構成されています。

<select name="q1">
<option value="empty">機器を選択してください
<option value="pc">PC
<option value="mobile">携帯
<option value="etc">その他
</select>

<select></select>

枠をクリックしたときに表示させたい選択肢を<select></select>で挟みます。

name="項目名"

<select name="q1">のname="q1"は項目名で、selectの開始タグに指定します。
チェックボックスやラジオタイプと同様、質問項目ごとに違う名前を指定する必要があります。
半角英数字であれば、どのような名前をつけても構いません。

<option>

<option>はオープンタグなので、</option>で閉じる必要はありません。次の<option>までに書かれた文字が選択肢として表示されます。
最初の<option>の後に記述した文字が、選択前の枠内に表示されます。

value="選択肢名"

<option value="pc">PCというように、選択肢の名前であるvalueは<option>で指定します。
ここでつけた名前が回答として送信されるので、同じ質問項目の選択肢には、全て異なる名前をつける必要があります。
半角英数字であれば、どのような名前をつけても構いません。

なお、選択肢の一つめは<option value="empty">選択してくださいとしておくと、項目が選択されなかった場合、回答の代わりに空白が送信されます。
セレクトは他の回答方法と違って未選択を判別することができないので、代わりにこのvalue="empty"を選択肢の一つめとして入れるようにしてください。

戻る

短い言葉を記入

Q1:サイト閲覧にもっとも利用している機器はなんですか?欄に記入してください。

というように、短い言葉を記入してもらうための項目です。上記の項目は、以下のようなタグで構成されています。

<p>
Q1:サイト閲覧にもっとも利用している機器はなんですか?欄に記入してください。
<input type="text" name="q1">
</p>

type="text"

<input type="text" name="q1">の type="text"で、語句の記入欄を表示します。

name="項目名"

チェックボックスと同様<input type="text" name="q1">の name="q1"は項目名指定で、質問項目ごとに異なる名前をつけます。
半角英数字であれば、どのような名前をつけても構いません。

value="選択肢名"

textには選択肢がないので特につける必要はありませんが、<input type="text" name="q1" value="機器を入力">と記述すると、というように, 記入欄にvalueで指定した文字が表示されます。
ここで指定する文字は、半角英数字である必要はありません。

その他オプション

この他にも<input type="text">に追加できるオプションとして、以下のものがあります。

戻る

長い文章を記入

Q2:携帯でサイトを閲覧する場合に、不自由に感じる点はありますか?自由に書いてください。

というように、文章を記入してもらうための項目です。記入欄に入りきれない量の文字が入力された場合は、自動的にスクロールバーが表示されます。
上記の項目は、以下のようなタグで構成されています。

<p>
Q2:携帯でサイトを閲覧する場合に、不自由に感じる点はありますか?自由に書いてください。
<textarea name="q2"></textarea>
</p>

<textarea></textarea>

<textarea></textarea>で、文章の記入欄が表示されます。
<textarea>と</textarea>の間には、特に文字を挟む必要はありませんが、文字を挟んだ場合、記入欄に挟まれた文字が表示されます。
<textarea>ここに記入してください</textarea>→

また、<textarea>の前に<br>を入力すると、記入欄が改行され、左端から始まります。

name="項目名"

チェックボックスと同様<textarea name="q2">の name="q2"は項目名指定で、質問項目ごとに異なる名前をつけます。
半角英数字であれば、どのような名前をつけても構いません。

その他オプション

この他にも<textarea>の開始タグに追加できるオプションとして、以下のものがあります。

戻る