HTMLスキル - 第4章 Lesson9

<input>タグでチェックボックスを作る方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<input>タグを使って、チェックボックスを作成する方法について解説します。



この動画で学べること

・チェックボックスの作り方



フォームにチェックボックスを追加しよう

フォームの中にチェックボックスを作る方法を見ていきましょう。
今回は、「規約に同意します」のチェックボックスを作っていきます。



まずは、「確認」と「規約に同意します」の2つの文章を「本文」の<textarea>タグの下に記述してください。
次に「規約に同意します」の部分に<input>タグを入れ、必要な属性を追加していきましょう。
type属性の値はcheckboxに、name属性の値はは確認に、value属性の値は規約に同意します、に設定してください。
<input>タグの記述ができたら、<input>タグの下にラベルを書いて紐付けすると、このようになります。



 <label>確認</label>
<input type="checkbox" id="varify" value="規約に同意します" name="varify">
<label for="varify">規約に同意します</label>




ここまでできたら保存してブラウザで見てみましょう。
このように、チェックボックスが追加されました。