今回は【HTML】type属性checkboxの使い方、チェックボックスを作成しよう!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はinput type=”checkbox”について解説しております。
今回は、input type="checkbox"
について詳しく解説していきます。
type=”checkbox”では、「チェックボックス」の選択ができます。
input type="checkbox"
で作成すると、チェックボックスの選択欄が作成されます。
左の図が、input type="text"
になり、通常の入力欄になります。
右の図が、input type="checkbox"
になり、チェックボックスの選択欄になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
type=”checkbox”について
input type="checkbox"
を指定すると、チェックボックスになります。
また、似たような機能である、「ラジオボタン」の違いを解説します。
POINT!
・ラジオボタンradio
:1つだけの選択が可能になります。
・チェックボックスcheckbox
:複数の選択が可能になります。
1つだけ選択したい場合は「ラジオボタン」、複数の選択したい場合は「チェックボックス」
というように覚えておきましょう。
書き方は以下のようになります。
<form method="post">
<div>
<p>ブラウザを選択(※複数可)</p>
<label><input type="checkbox" name="browser" value="ie">IE</label>
<label><input type="checkbox" name="browser" value="chrome">Chrome</label>
<label><input type="checkbox" name="browser" value="firefox">Firefox</label>
</div>
</form>
checked属性(初期のチェック)について
checked属性とは、初期状態でチェックした状態になります。
checkedのみ記述すれば問題ありません。
<form method="post">
<div>
ブラウザを選択(※複数可)
<label><input type="checkbox" name="browser" value="ie" checked />IE</label>
<label><input type="checkbox" name="browser" value="chrome" />Chrome</label>
<label><input type="checkbox" name="browser" value="firefox" />Firefox</label>
</div>
</form>
required属性(必須項目)について
required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。
<form method="post">
<div>規約に同意する
<label><input type="checkbox" name="terms" value="accept"
required />同意する</label>
</div>
<input type="submit" value="チェック" />
</form>
※上記のコードは分かりやすいように、改行を入れております。
valueを指定したときに、フォームで送信される値になります。
nameは、複数のチェックボタンに同じname属性値を指定します。
CSSでinput type=”checkbox”を整える
今回はCSSの「属性セレクタ」を使い整えていきます。
書き方は以下のようになります
input[type="checkbox"] {
/*--type="checkbox"のinput要素にのみ適用されます--*/
}
<form method="post">
<div>規約に同意する
<label><input type="checkbox" name="terms" value="accept"
required />同意する</label>
</div>
<input type="submit" value="チェック" />
</form>
input[type="checkbox"] {
transform: scale(1.4); /*--拡大(1.4)--*/
-ms-transform: scale(1.4); /*--Firefox--*/
-webkit-transform: scale(1.4); /*--Chrome、Safari--*/
padding: 10px;
margin-right: 10px;
}
scale
を使いチェックボックを拡大させています。
チェックボックや、ラジオボタンの装飾(CSS)は少し複雑になりますが、今回はシンプルなコードになります。今後は、装飾(CSS)の記事も書きたいと思っております。
関連記事
まとめ
今回はこれで以上です。
次回も「フォーム」について解説していきます。
- POINT
-
input type="checkbox"
は、 チェックボックスの選択欄を作成します。 - checked属性とは、初期状態でチェックした状態に設定します。
- required属性とは、必須項目に設定します。
- ラジオボタンは1つだけの選択が可能になります。
- チェックボックスは複数の選択が可能になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事