こんにちは、AWAKOJIです。
この記事ではアンケートフォームの書き方について簡単にわかりやすく説明しました。
プログラミング初心者の僕が3か月前の自分に向けて書いた記事です。
よかったらご覧ください。
この記事の内容
１．アンケートフォームの目標
今回の記事で作りたいアンケートフォームは以下のとおりです。
これを目標にして一つずつ解説していきます。
３．formタグ
まずformタグです。
これはアンケートを作成するときに必ず書かないといけないタグです。
アンケートフォーム全体をformタグで囲みます。
formタグの中で指定できる属性は主に２つです。
- action
- method
3-1.action属性
action属性でアンケートに書いた情報をどこのページに送信するかを指定します。
今回は、sampleform.htmlというページに飛ばしましょう。
3-2.method属性
method属性では、情報の送信方法をgetにするかpostにするかをしていします。
今回は、postを指定します。
※getとpostについてはまた別記事で説明します。
3-3.サンプル
実際にformタグを書いてみます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> </form> </body> </html> |
結果以下の表示になります。
※クリックで拡大表示されます。
まだ何も表示されていません。
４．inputタグ
inputタグがフォームを書くときの主役になります。
inputタグは、空要素といってタグを閉じる必要はありません。
(一般的なタグは<p>~</p>みたいにタグを閉じる必要がある)
inputタグで指定できる属性は
- type
- name
- value
- checked
などがあります。
それぞれ説明していきます。
4-1.type属性
type属性で指定する値によってアンケートフォームの種類を変えることができます。
指定できる主な値は以下の通りです。
- text
- radio
- checkbox
- file
- reset
- submit
それぞれ見ていきましょう。
4-1-1.text
1行の空欄をうめるフォームを作ることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text"></p> </form> </body> </html> |
ブラウザ表示を確認します。
※クリックで拡大表示されます。
名前の入力欄ができました。
4-1-2.radio
選択肢を作ることができるフォームです。
radioによる選択肢は１つだけしか選択できません。また1度選択するとすべての選択肢をはずすことができなくなります。(必ずどれかを選択しなければいけないということ)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text"></p> <p>年齢:<input type="radio">20才未満 <input type="radio">20才以上60歳未満 <input type="radio">60才以上 </p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
年齢の選択肢ができました。
※ただこれだけでは複数の選択が可能です。
あとで説明するname属性を書く必要があります。
4-1-3.checkbox
checkboxも選択肢を作ることができます。
radioによる選択肢との違いは複数の選択が可能ということです。
また一度選択したものを外すことも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text"></p> <p>年齢:<input type="radio">20才未満 <input type="radio">20才以上60歳未満 <input type="radio">60才以上 </p> <p>所属:<input type="checkbox">Aグループ <input type="checkbox">Bグループ <input type="checkbox">Cグループ </p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
所属の選択肢を作ることが出来ました。
4-1-4.file
ファイルを添付することのできるフォームを作ることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text"></p> <p>年齢:<input type="radio">20才未満 <input type="radio">20才以上60歳未満 <input type="radio">60才以上 </p> <p>所属:<input type="checkbox">Aグループ <input type="checkbox">Bグループ <input type="checkbox">Cグループ </p> <p>提出書類:<input type="file"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
ファイルを添付するためのフォームができました。
4-1-5.reset
resetは、入力したものをリセットするためのボタンを作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text"></p> <p>年齢:<input type="radio">20才未満 <input type="radio">20才以上60歳未満 <input type="radio">60才以上 </p> <p>所属:<input type="checkbox">Aグループ <input type="checkbox">Bグループ <input type="checkbox">Cグループ </p> <p>提出書類:<input type="file"></p> <p>リセット:<input type="reset"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
リセットボタンが追加されました。
※「リセット：」の部分は重複してしまうので必要ないでしょう。
4-1-6.submit
submitはアンケートフォームに入力したデータをform actionで指定したファイル先に飛ばすためのボタンを作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text"></p> <p>年齢:<input type="radio">20才未満 <input type="radio">20才以上60歳未満 <input type="radio">60才以上 </p> <p>所属:<input type="checkbox">Aグループ <input type="checkbox">Bグループ <input type="checkbox">Cグループ </p> <p>提出書類:<input type="file"></p> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
送信ボタンができました。
※「送信：」の部分は重複してしまうので必要ないでしょう。
4-2.name属性
inputでアンケートフォームを作るとき、 typeで指定した値ごとに、nameを書く必要があります。
nameで値を指定することで、アンケートで答えたデータを送信先のファイルで受け取ることができます。
それぞれのタイプにnameを書きます。
name属性で指定する値は、任意の値になりますがnameを見て何の質問事項に対する答えかわかるように意味ある値にしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text" name="name"></p> <p>年齢:<input type="radio" name="old">20才未満 <input type="radio" name="old">20才以上60歳未満 <input type="radio" name="old">60才以上 </p> <p>所属:<input type="checkbox" name="group">Aグループ <input type="checkbox" name="group">Bグループ <input type="checkbox" name="group">Cグループ </p> <p>提出書類:<input type="file" name="document"></p> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
radioとcheckboxでは、それぞれの選択肢で書くnameの同じにします。
(radioはold、checkboxはgroupとしました)
さきほど、4-1-2.radioの説明で、選択肢は1つしか選べないと書きました。
ここのnameの値をすべて同じものにすることによって選択肢を一つしか選べなくなります。
またresetとsubmitに関しては、nameを書く必要はありません。
resetとsubmit自体に、データは入っていないからです。
※nameを書いてもブラウザ表示は変わりません。
4-3.value属性
type属性の値がtextの場合
value属性で値を指定すると、初期値を入れることができます。
type属性の値がradio、checkboxの場合
value属性で値を指定すると、radioやcheckboxで何を選択したかのデータを受け取ることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text" name="name" value="名前入れてね"></p> <p>年齢:<input type="radio" name="old" value="20">20才未満 <input type="radio" name="old" value="20-60">20才以上60歳未満 <input type="radio" name="old" value="60">60才以上 </p> <p>所属:<input type="checkbox" name="group" value="A">Aグループ <input type="checkbox" name="group" value="B">Bグループ <input type="checkbox" name="group" value="C">Cグループ </p> <p>提出書類:<input type="file" name="document"></p> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
名前入力欄に初期値が入りました。
radioとcheckboxの表示はかわっていません。
4-4.checked属性
checked属性は値はいりません。
radioやcheckboxの選択肢に、checkedを記載しておけば、最初から選択している状態にすることができます。
radioボタンの性質上(一つしか選択できない)、複数の選択肢にcheckedを入れることはできません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text" name="name" value="名前入れてね"></p> <p>年齢:<input type="radio" name="old" value="20" checked>20才未満 <input type="radio" name="old" value="20-60">20才以上60歳未満 <input type="radio" name="old" value="60">60才以上 </p> <p>所属:<input type="checkbox" name="group" value="A" checked>Aグループ <input type="checkbox" name="group" value="B" checked>Bグループ <input type="checkbox" name="group" value="C">Cグループ </p> <p>提出書類:<input type="file" name="document"></p> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
radioボタンは２０才未満にチェックが入り、checkboxボタンはAグループとBグループにチェックが入りました。
５．textareaタグ
<input type=”text”>では一行の入力欄を作ることができました。
textareaタグを使えば、複数行の入力欄を作ることができます。
inputタグは閉じる必要のない空要素でしたがtextareaタグは通常のタグと同じで閉じる必要があります。
<textarea>と</textarea>ではさまれた文字は初期値になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text" name="name" value="名前入れてね"></p> <p>年齢:<input type="radio" name="old" value="20" checked>20才未満 <input type="radio" name="old" value="20-60">20才以上60歳未満 <input type="radio" name="old" value="60">60才以上 </p> <p>所属:<input type="checkbox" name="group" value="A" checked>Aグループ <input type="checkbox" name="group" value="B" checked>Bグループ <input type="checkbox" name="group" value="C">Cグループ </p> <p>提出書類:<input type="file" name="document"></p> <p>自由入力欄:<textarea>好きなこと書いてね</textarea></p> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
初期値が入った複数行の入力欄ができました。
textareaタグで指定できる属性は主に以下の３つです。
- name(4-2と同じでデータを受け取るため名前をつける)
- cols(入力欄に入力できる1行あたりの文字数を指定する。初期値20文字)
- rows(入力欄の行数を指定する。初期値は2行)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text" name="name" value="名前入れてね"></p> <p>年齢:<input type="radio" name="old" value="20" checked>20才未満 <input type="radio" name="old" value="20-60">20才以上60歳未満 <input type="radio" name="old" value="60">60才以上 </p> <p>所属:<input type="checkbox" name="group" value="A" checked>Aグループ <input type="checkbox" name="group" value="B" checked>Bグループ <input type="checkbox" name="group" value="C">Cグループ </p> <p>提出書類:<input type="file" name="document"></p> <p>自由入力欄:<textarea name="free" cols="40" rows="5">好きなこと書いてね</textarea></p> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
textareaに初期値が入り、枠の大きさが変わりました。
colsは40と指定しましたが、実際入力できる文字数は、ブラウザの種類などで変わってきます。
６．select,optionタグ
selectとoptionはセットで使うタグになります。
これらを使うとメニューの選択肢を表示することができます。
実際見てもらった方が理解しやすいでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text" name="name" value="名前入れてね"></p> <p>年齢:<input type="radio" name="old" value="20" checked>20才未満 <input type="radio" name="old" value="20-60">20才以上60歳未満 <input type="radio" name="old" value="60">60才以上 </p> <p>所属:<input type="checkbox" name="group" value="A" checked>Aグループ <input type="checkbox" name="group" value="B" checked>Bグループ <input type="checkbox" name="group" value="C">Cグループ </p> <p>提出書類:<input type="file" name="document"></p> <p>自由入力欄:<textarea name="free" cols="40" rows="5">好きなこと書いてね</textarea></p> <p>評価： <select> <option>100点</option> <option>80点</option> <option>60点</option> <option>40点</option> <option>20点</option> <option>0点</option> </select> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
評価を選択するメニューができました。
selectタグで指定する主な属性
- name(4-2と同じでデータを受け取るため名前をつける)
- size(メニューに表示される行数を指定する)
optionタグで指定する主な属性
- value(何を選択したかのデータを受け取ることができる)
- selected(最初から選択した状態にできる)
それぞれ値を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>アンケートフォーム</title> </head> <body> <form action="sampleform.html" method="post"> <p>名前:<input type="text" name="name" value="名前入れてね"></p> <p>年齢:<input type="radio" name="old" value="20" checked>20才未満 <input type="radio" name="old" value="20-60">20才以上60歳未満 <input type="radio" name="old" value="60">60才以上 </p> <p>所属:<input type="checkbox" name="group" value="A" checked>Aグループ <input type="checkbox" name="group" value="B" checked>Bグループ <input type="checkbox" name="group" value="C">Cグループ </p> <p>提出書類:<input type="file" name="document"></p> <p>自由入力欄:<textarea name="free" cols="40" rows="5">好きなこと書いてね</textarea></p> <p>評価： <select name="evaluation" size="6"> <option value="100">100点</option> <option value="80" selected>80点</option> <option value="60">60点</option> <option value="40">40点</option> <option value="20">20点</option> <option value="0">0点</option> </select> <p>リセット:<input type="reset"></p> <p>送信:<input type="submit"></p> </form> </body> </html> |
ブラウザで表示を確認します。
※クリックで拡大表示されます。
メニューが6行になって、最初から80点が選択されています。
アンケートフォームまとめ
今回説明したタグ、属性、属性値をまとめます。
| タグ | 属性 | 値 | 内容 |
| form(全体を囲む) | action | 送信先のページ | データ送信 |
| method | post または get | 送信方式の選択 | |
| input(フォーム部品) | type | text | 1行テキスト |
| radio | ラジオボタン | ||
| checkbox | チェックボタン | ||
| file | 添付ファイル | ||
| reset | リセットボタン | ||
| submit | 送信ボタン | ||
| name | 任意の文字列 | データ受信 | |
| value | 任意の文字列 | 初期値 | |
| checked | ー | チェック入れておく | |
| textarea(複数行テキスト) | name | 任意の文字列 | データ受信 |
| cols | 数値 | 1行文字数 | |
| rows | 数値 | 行数 | |
| select(メニュー) | name | 任意の文字列 | データ受信 |
| size | 数値 | 表示する行数 | |
| option(選択肢) | value | 任意の文字列 | データ受信 |
| selected | ー | チェック入れておく |
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール
独学でプログラミングを勉強するのは大変じゃないですか？
- ググるのが面倒
- エラーの対応に1日消費
- 重要なコードがわからない
お金はかからないものの、かなり効率が悪いです。
『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。
代表的なスクールは以下の２つ。
- TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方 - テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方
この２つには以下のような特典もあります。
TechAcademy
- 1週間の無料体験
- １コース申し込むと、もう１コースプレゼント
テックアカデミー
- 1週間以内に申告あれば全額返金
- 転職できなかったら全額返金
かなりお得です。
確かにどのスクールも本格的にやれば20～30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。
目安の報酬をまとめておくと、
- ランサーズ：1件10万くらい
- 中小企業：1件30万くらい
- 大手企業：桁違い
こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。
この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。
テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。