アンケートなどに役立つ!HTMLでチェックボックスを作成する方法【初心者向け】

初心者向けにHTMLでチェックボックスを作成する方法について解説しています。サイト内でアンケートなど項目をチェックさせる際に便利です。実際にソースコードを書きながら解説しているので、HTMLに詳しくない人でもすぐ理解できるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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] HTML/CSSで挫折しない学習方法を動画で公開中

まとめ

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

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