アンケートなどに役立つ!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">

[PR] Webデザインで副業する学習方法を動画で公開中

まとめ

いかがでしたでしょうか。今回は、HTMLでチェックボックスを作成する方法について解説していきました。

HTMLでタグのタイプを変更するだけで簡単にチェックボックスが作成できたことがわかっていただけたかと思います。

inputタグはこの他にも色々なtypeを使用することができるので、気になる方は検索してみましょう。

 

大石ゆかり

checkedとvalue属性とname属性が新たに追加されてますね。

田島悠介

checkedは、最初に表示されているときに、あらかじめチェックした状態にしておくことが出来るんだよ。

大石ゆかり

value属性の値が違うのに、name属性は3つとも同じになっていますね。

田島悠介

フォームで送信したデータは、PHPプログラムなどで受け取ることが出来るんだよ。nameは種類を表していて、その種類の値がvalue値だった、というふうに受け取れるんだよ。今は、まだ覚えなくてもいいよ。

 

[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する