アンケートなどに役立つ！HTMLでチェックボックスを作成する方法【初心者向け】
初心者向けにHTMLでチェックボックスを作成する方法について解説しています。サイト内でアンケートなど項目をチェックさせる際に便利です。実際にソースコードを書きながら解説しているので、HTMLに詳しくない人でもすぐ理解できるでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでチェックボックスを作成する方法 webページでよく見かけるチェックボックス。自分で作成するとなると一見難しそうですが、実はHTMLで簡単に書くことができます。
今回はHTMLでチェックボックスを作成する方法について解説していきたいと思います。
HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
チェックボックスを作成するタグとその書き方
チェックボックスはinputタグを使用することで作成することができます。
以下のコードのようにinputタグのtype要素を”checkbox”に指定することによって、チェックボックスを生成することができます。
<input type="checkbox">チェックボックス1
このようにとても簡単にチェックボックスを生成することができます。
チェックボックスって何ですか？
formタグの部品で、複数回答ができる選択肢を作れるタグなんだよ。
アンケートや複数カテゴリーの選択に向いてそうですね。
その通り！では、実際に書いてみよう。
実際に書いてみよう
それでは実際にチェックボックスを作成していきましょう。
今回は簡単な例として1,2,3と三つチェックボックスを作成していきましょう。
<input type="checkbox" name=“sample” value="1">1 <input type="checkbox" name=“sample” value="2">2 <input type="checkbox" name=“sample” value="3">3
まずinputタグを作成し、typeをcheckboxに指定します。そのあとのname、valueですが、checkboxを使用して、実際にデータを受け渡しする際に必要になってくる要素です。
上の例の場合sampleというパラメーター要素の中に選択したvalueが入るというcheckboxになります。
また、checkboxは以下のようにcheckedを指定すると、選択された状態のcheckboxを作成することもできます。
<input type="checkbox" name=“sample” value="1" checked="checked">
まとめ
いかがでしたでしょうか。今回は、HTMLでチェックボックスを作成する方法について解説していきました。
HTMLでタグのタイプを変更するだけで簡単にチェックボックスが作成できたことがわかっていただけたかと思います。
inputタグはこの他にも色々なtypeを使用することができるので、気になる方は検索してみましょう。
checkedとvalue属性とname属性が新たに追加されてますね。
checkedは、最初に表示されているときに、あらかじめチェックした状態にしておくことが出来るんだよ。
value属性の値が違うのに、name属性は3つとも同じになっていますね。
フォームで送信したデータは、PHPプログラムなどで受け取ることが出来るんだよ。nameは種類を表していて、その種類の値がvalue値だった、というふうに受け取れるんだよ。今は、まだ覚えなくてもいいよ。
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
