【HTML&CSS】アンケートフォームの書き方(基本)

こんにちは、AWAKOJIです。

この記事ではアンケートフォームの書き方について簡単にわかりやすく説明しました。

プログラミング初心者の僕が3か月前の自分に向けて書いた記事です。

よかったらご覧ください。

1.アンケートフォームの目標

今回の記事で作りたいアンケートフォームは以下のとおりです。

名前:
年齢:20才未満20才以上60歳未満60才以上
所属:AグループBグループCグループ
提出書類:

自由入力欄:
評価:

リセット:
送信:

これを目標にして一つずつ解説していきます。

3.formタグ

まずformタグです。

これはアンケートを作成するときに必ず書かないといけないタグです。

アンケートフォーム全体をformタグで囲みます。

formタグの中で指定できる属性は主に2つです。

  • action
  • method

3-1.action属性

action属性でアンケートに書いた情報をどこのページに送信するかを指定します。

今回は、sampleform.htmlというページに飛ばしましょう。

3-2.method属性

method属性では、情報の送信方法をgetにするかpostにするかをしていします。

今回は、postを指定します。

※getとpostについてはまた別記事で説明します。

3-3.サンプル

実際にformタグを書いてみます。

結果以下の表示になります。

※クリックで拡大表示されます。
まだ何も表示されていません。

4.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行の空欄をうめるフォームを作ることができます。

ブラウザ表示を確認します。

※クリックで拡大表示されます。

名前の入力欄ができました。

4-1-2.radio

選択肢を作ることができるフォームです。

radioによる選択肢は1つだけしか選択できません。また1度選択するとすべての選択肢をはずすことができなくなります。(必ずどれかを選択しなければいけないということ)

ブラウザで表示を確認します。

※クリックで拡大表示されます。
年齢の選択肢ができました。

※ただこれだけでは複数の選択が可能です。
あとで説明するname属性を書く必要があります。

4-1-3.checkbox

checkboxも選択肢を作ることができます。

radioによる選択肢との違いは複数の選択が可能ということです。

また一度選択したものを外すことも可能です。

ブラウザで表示を確認します。

※クリックで拡大表示されます。
所属の選択肢を作ることが出来ました。

4-1-4.file

ファイルを添付することのできるフォームを作ることができます。

ブラウザで表示を確認します。

※クリックで拡大表示されます。

ファイルを添付するためのフォームができました。

4-1-5.reset

resetは、入力したものをリセットするためのボタンを作ります。

ブラウザで表示を確認します。

※クリックで拡大表示されます。リセットボタンが追加されました。

※「リセット:」の部分は重複してしまうので必要ないでしょう。

4-1-6.submit

submitはアンケートフォームに入力したデータをform actionで指定したファイル先に飛ばすためのボタンを作ります。

ブラウザで表示を確認します。

※クリックで拡大表示されます。
送信ボタンができました。
※「送信:」の部分は重複してしまうので必要ないでしょう。

4-2.name属性

inputでアンケートフォームを作るとき、 typeで指定した値ごとに、nameを書く必要があります。

nameで値を指定することで、アンケートで答えたデータを送信先のファイルで受け取ることができます。

それぞれのタイプにnameを書きます。

name属性で指定する値は、任意の値になりますがnameを見て何の質問事項に対する答えかわかるように意味ある値にしましょう。

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で何を選択したかのデータを受け取ることができます。

ブラウザで表示を確認します。

※クリックで拡大表示されます。
名前入力欄に初期値が入りました。
radioとcheckboxの表示はかわっていません。

4-4.checked属性

checked属性は値はいりません。

radioやcheckboxの選択肢に、checkedを記載しておけば、最初から選択している状態にすることができます。

radioボタンの性質上(一つしか選択できない)、複数の選択肢にcheckedを入れることはできません。

ブラウザで表示を確認します。

※クリックで拡大表示されます。

radioボタンは20才未満にチェックが入り、checkboxボタンはAグループとBグループにチェックが入りました。

5.textareaタグ

<input type=”text”>では一行の入力欄を作ることができました。

textareaタグを使えば、複数行の入力欄を作ることができます。

inputタグは閉じる必要のない空要素でしたがtextareaタグは通常のタグと同じで閉じる必要があります。

<textarea>と</textarea>ではさまれた文字は初期値になります。

ブラウザで表示を確認します。

※クリックで拡大表示されます。
初期値が入った複数行の入力欄ができました。

textareaタグで指定できる属性は主に以下の3つです。

  • name(4-2と同じでデータを受け取るため名前をつける)
  • cols(入力欄に入力できる1行あたりの文字数を指定する。初期値20文字)
  • rows(入力欄の行数を指定する。初期値は2行)

textareaに初期値が入り、枠の大きさが変わりました。

colsは40と指定しましたが、実際入力できる文字数は、ブラウザの種類などで変わってきます。

6.select,optionタグ

selectとoptionはセットで使うタグになります。

これらを使うとメニューの選択肢を表示することができます。

実際見てもらった方が理解しやすいでしょう。

ブラウザで表示を確認します。

※クリックで拡大表示されます。

評価を選択するメニューができました。

selectタグで指定する主な属性

  • name(4-2と同じでデータを受け取るため名前をつける)
  • size(メニューに表示される行数を指定する)

optionタグで指定する主な属性

  • value(何を選択したかのデータを受け取ることができる)
  • selected(最初から選択した状態にできる)

それぞれ値を指定します。

ブラウザで表示を確認します。

※クリックで拡大表示されます。メニューが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』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。

おすすめ記事

フォローする