HTMLで「チェックボックス」を作る基本(選択するボックス)。ちょっとHTMLのレベルUP感ある

HTMLでチェックボックスを作成

「チェックボックス」は、選択して✔️をつけるやつ。

「好きな食品」を選んでください(複数選択可)





↑ 見た目だけチェックができるだけで、特に何か作動するということはありません。HTML勉強中で作ってみました。

アンケートや、個人情報などの入力で使いますね。

↑ のコンテンツ内容は、「医学的に「健康に良い食べ物」は5つしかない」から引用。

健康に良い食べ物5つ

魚、野菜・くだもの、玄米など、オリーブオイル、ナッツ類が健康に良いんですね。ダークチョコレート、コーヒー、納豆なんかも良いみたい。

逆に牛肉や豚肉、白いご飯が健康に悪いとは、なんとも意外・・・(ハンバーガーとか結構好きなんですが汗)。グループ4のフルーツジュースも微妙なのかなあ・・。

そんな私はHTMLを勉強中です。

今回、他の情報を絡めつつ、マークアップ(HTMLのコードを書くこと)できたので、ちょっとレベルUP感。

健康についても興味があるので、良い情報ゲットした感があります。

ちなみに、上で紹介した「チェックボックス」は、こんなコードで書いています。

<fieldset>
<legend>「好きな食品」を選んでください(複数選択可)</legend>
<input id="fish" type="checkbox">
<label for="fish">お魚</label>
<input id="vegetable" type="checkbox">
<label for="vegetable">野菜・くだもの</label>
<input id="brown rice" type="checkbox">
<label for="brown rice">玄米などの茶色い炭水化物</label>
<input id="olive oil" type="checkbox">
<label for="olive oil">オリーブオイル</label>
<input id="nuts" type="checkbox">
<label for="nuts">ナッツ類</label>
</fieldset>

本記事では、チェックボックスの作成手順を紹介。

✔️本記事の内容

  • チェックボックス【複数選択可】
  • チェックボックス【1つだけ選んでください】

ちなみに、WordPressは、コードエディターで遊べます。

コードエディターを使う
Atomエディターでは、Plain Textを「html」に設定してコードを作成後、保存してから、Google Chromeにドラッグ&ドロップ

ドットインストールのHTML基礎文法入門を参考にされるといいです。(参考:AtomエディターはPCに導入する必要があります。【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタン

Atomエディターを使うにはHTMLへ

本記事は、ドットインストール#24〜#25で学んだ内容です。よかったら見てみてください。

チェックボックス【複数選択可】

複数を選択できるチェックボックス

作る手順を紹介します。

  • チェックボックスを作る手順①:fieldsetタグで全体を囲む、legendタグでタイトルを囲む
  • チェックボックスを作る手順②:inputタグで、idの値を付け、type=”checkbox
  • チェックボックスを作る手順③:labelタグで、for属性で値を付ける

チェックボックスを作る手順①:fieldsetタグで全体を囲む、legendタグでタイトルを囲む

<fieldset>
<legend>「好きな食品」を選んでください(複数選択可)</legend> </fieldset>

全体をfieldsetタグで囲む。

そして、コンテンツ(「好きな食品」を選んでください(複数選択可)の部分。ここはwebページに表示されます)をlegendタグで囲む。

チェックボックスを作る手順②:inputタグで、idの値を付け、type=”checkbox”

<input id="fish" type="checkbox">

idは一つ一つ名前を付けてあげます。↑は「魚」の例で、fishとしました。

「type=”checkbox”」。

これで、チェックボックスの箱ができます。

チェックボックスを作る手順③:labelタグで、for属性で値を付ける

<label for="fish">お魚</label>

idで名前をつけた値と、for属性の値を結びつけます。labelタグを閉じて終わり。

あとは、コンテンツの数だけ同じ物を作る。まとめるとこうです。

<fieldset>
<legend>「好きな食品」を選んでください(複数選択可)</legend>
<input id="fish" type="checkbox">
<label for="fish">お魚</label>
<input id="vegetable" type="checkbox">
<label for="vegetable">野菜・くだもの</label>
<input id="brown rice" type="checkbox">
<label for="brown rice">玄米などの茶色い炭水化物</label>
<input id="olive oil" type="checkbox">
<label for="olive oil">オリーブオイル</label>
<input id="nuts" type="checkbox">
<label for="nuts">ナッツ類</label>
</fieldset>

チェックボックス【1つだけ選んでください】

「1番好きな食品」を選んでください





コードはこれ。

<fieldset>
<legend>「1番好きな食品」を選んでください</legend>
<input id="dark chocolate" name="foods" type="radio">
<label for="dark chocolate">ダークチョコレートとコーヒー</label>
<input id="natto" name="foods" type="radio">
<label for="natto">納豆</label>
<input id="yogurt" name="foods" type="radio">
<label for="yogurt">ヨーグルト</label>
<input id="vinegar" name="foods" type="radio">
<label for="vinegar">酢</label>
<input id="tea" name="foods" type="radio">
<label for="tea">お茶</label>
</fieldset>>

name=”foods”を入れて、type=”radio”としてあげてください。

ドットインストール#24〜#25でも確認できます。

(ちなみに、WordPressの仕様の関係で、ドットインストールの内容とは、id属性・name属性・type属性の順番が違いますが順番を変えても問題ありません。

WordPressでは、更新すると勝手にid属性が先頭に来るようです。ドットインストールで解説されている順番で、WordPressでコードを書いて更新してみると、id属性が先頭に来てしまうのが分かるかと思います。)。

以上となります。では!