<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" name="q1" value="pc">の
type="checkbox"で複数選択できる回答形式であることを指定しています。
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>
<input type="radio" name="q1" value="pc">の
type="radio"で一つしか選択できない回答形式であることを指定しています。
Q1:サイト閲覧にもっとも利用している機器はどれですか?
というように、枠をクリックすると表示される選択肢から選ぶ回答形式です。上記の項目は、以下のようなタグで構成されています。
<select name="q1">
<option value="empty">機器を選択してください
<option value="pc">PC
<option value="mobile">携帯
<option value="etc">その他
</select>
枠をクリックしたときに表示させたい選択肢を<select></select>で挟みます。
<select name="q1">のname="q1"は項目名で、selectの開始タグに指定します。
チェックボックスやラジオタイプと同様、質問項目ごとに違う名前を指定する必要があります。
半角英数字であれば、どのような名前をつけても構いません。
<option>はオープンタグなので、</option>で閉じる必要はありません。次の<option>までに書かれた文字が選択肢として表示されます。
最初の<option>の後に記述した文字が、選択前の枠内に表示されます。
<option value="pc">PCというように、選択肢の名前であるvalueは<option>で指定します。
ここでつけた名前が回答として送信されるので、同じ質問項目の選択肢には、全て異なる名前をつける必要があります。
半角英数字であれば、どのような名前をつけても構いません。
なお、選択肢の一つめは<option value="empty">選択してくださいとしておくと、項目が選択されなかった場合、回答の代わりに空白が送信されます。
セレクトは他の回答方法と違って未選択を判別することができないので、代わりにこのvalue="empty"を選択肢の一つめとして入れるようにしてください。
Q1:サイト閲覧にもっとも利用している機器はなんですか?欄に記入してください。
というように、短い言葉を記入してもらうための項目です。上記の項目は、以下のようなタグで構成されています。
<p>
Q1:サイト閲覧にもっとも利用している機器はなんですか?欄に記入してください。
<input type="text" name="q1">
</p>
<input type="text" name="q1">の
type="text"で、語句の記入欄を表示します。
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>の前に<br>を入力すると、記入欄が改行され、左端から始まります。
この他にも<textarea>の開始タグに追加できるオプションとして、以下のものがあります。