HTML&CSSシェアするLINE!こんにちは、AWAKOJIです。この記事ではアンケートフォームの書き方について簡単にわかりやすく説明しました。プログラミング初心者の僕が3か月前の自分に向けて書いた記事です。よかったらご覧ください。今回の記事で作りたいアンケートフォームは以下のとおりです。Cグループ提出書類:自由入力欄:好きなこと書いてね評価:100点80点60点40点20点0点リセット:送信:これを目標にして一つずつ解説していきます。3.formタグまずformタグです。これはアンケートを作成するときに必ず書かないといけないタグです。アンケートフォーム全体をformタグで囲みます。formタグの中で指定できる属性は主に2つです。actionmethod3-1.action属性action属性でアンケートに書いた情報をどこのページに送信するかを指定します。今回は、sampleform.htmlというページに飛ばしましょう。3-2.method属性method属性では、情報の送信方法をgetにするかpostにするかをしていします。今回は、postを指定します。※getとpostについてはまた別記事で説明します。3-3.サンプル実際にformタグを書いてみます。method="post"></form></body></html>結果以下の表示になります。※クリックで拡大表示されます。何も表示されていません。4.inputタグinputタグがフォームを書くときの主役になります。inputタグは、空要素といってタグを閉じる必要はありません。(一般的なタグは<p>~</p>みたいにタグを閉じる必要がある)inputタグで指定できる属性はtypenamevaluecheckedなどがあります。それぞれ説明していきます。4-1.type属性type属性で指定する値によってアンケートフォームの種類を変えることができます。指定できる主な値は以下の通りです。textradiocheckboxfileresetsubmitそれぞれ見ていきましょう。4-1-1.text1行の空欄をうめるフォームを作ることができます。type="text"></p></form></body></html>ブラウザ表示を確認します。※クリックで拡大表示されます。名前の入力欄ができました。4-1-2.radio選択肢を作ることができるフォームです。radioによる選択肢は1つだけしか選択できません。1度選択するとすべての選択肢をはずすことができなくなります。type="radio">60才以上</p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。年齢の選択肢ができました。※ただこれだけでは複数の選択が可能です。あとで説明するname属性を書く必要があります。4-1-3.checkboxcheckboxも選択肢を作ることができます。radioによる選択肢との違いは複数の選択が可能ということです。一度選択したものを外すことも可能です。type="checkbox">Cグループ</p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。所属の選択肢を作ることが出来ました。4-1-4.fileファイルを添付することのできるフォームを作ることができます。type="file"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。ファイルを添付するためのフォームができました。4-1-5.resetresetは、入力したものをリセットするためのボタンを作ります。type="reset"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。リセットボタンが追加されました。※「リセット:」の部分は重複してしまうので必要ないでしょう。actionで指定したファイル先に飛ばすためのボタンを作ります。type="submit"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。送信ボタンができました。※「送信:」の部分は重複してしまうので必要ないでしょう。typeで指定した値ごとに、nameを書く必要があります。nameで値を指定することで、アンケートで答えたデータを送信先のファイルで受け取ることができます。それぞれのタイプにnameを書きます。name属性で指定する値は、任意の値になりますがnameを見て何の質問事項に対する答えかわかるように意味ある値にしましょう。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で何を選択したかのデータを受け取ることができます。type="submit"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。名前入力欄に初期値が入りました。radioとcheckboxの表示はかわっていません。4-4.checked属性checked属性は値はいりません。radioやcheckboxの選択肢に、checkedを記載しておけば、最初から選択している状態にすることができます。radioボタンの性質上(一つしか選択できない)、複数の選択肢にcheckedを入れることはできません。type="submit"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。radioボタンは20才未満にチェックが入り、checkboxボタンはAグループとBグループにチェックが入りました。type=”text”>では一行の入力欄を作ることができました。textareaタグを使えば、複数行の入力欄を作ることができます。inputタグは閉じる必要のない空要素でしたがtextareaタグは通常のタグと同じで閉じる必要があります。<textarea>と</textarea>ではさまれた文字は初期値になります。type="submit"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。初期値が入った複数行の入力欄ができました。textareaタグで指定できる属性は主に以下の3つです。name(4-2と同じでデータを受け取るため名前をつける)cols(入力欄に入力できる1行あたりの文字数を指定する。初期値20文字)rows(入力欄の行数を指定する。type="submit"></p></form></body></html>textareaに初期値が入り、枠の大きさが変わりました。colsは40と指定しましたが、実際入力できる文字数は、ブラウザの種類などで変わってきます。6.select,optionタグselectとoptionはセットで使うタグになります。これらを使うとメニューの選択肢を表示することができます。実際見てもらった方が理解しやすいでしょう。type="submit"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。評価を選択するメニューができました。selectタグで指定する主な属性name(4-2と同じでデータを受け取るため名前をつける)size(メニューに表示される行数を指定する)optionタグで指定する主な属性value(何を選択したかのデータを受け取ることができる)selected(最初から選択した状態にできる)それぞれ値を指定します。type="submit"></p></form></body></html>ブラウザで表示を確認します。※クリックで拡大表示されます。メニューが6行になって、最初から80点が選択されています。アンケートフォームまとめ今回説明したタグ、属性、属性値をまとめます。