チェックボックス
inputタグとtype属性checkboxを使うと、チェックボックスを作ることができます。
checked属性を使うと、あらかじめチェックされた状態になります。
fieledsetタグを使うと、入力部品をグループ化することができます。
legendタグを使うことで、グループ名をつけることができます。
![](https://tumaboki.com/wp-content/uploads/2020/10/f7306b467a27e8bedc62aed181a350ed.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/32cc998cb9ab5bcd21569e75afc8bd38.png)
ラジオボタン
inputタグとtype属性radioを使うと、ラジオボタンを作ることができます。
name属性で値を統一する必要があるので注意してください。
![](https://tumaboki.com/wp-content/uploads/2020/10/c9b743ba88dea814c98a431357e8a02d.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/4b78d1acdcb51c41473b86ac7259c6b9.png)
いろいろな部品
inputタグとtype属性colorを使うと、色を選択する部品がつくれます。
inputタグとtype属性dateを使うと、日付を選択する部品がつくれます。
inputタグとtype属性numberを使うと、数字のみ入力可能な部品がつくれます。
inputタグとtype属性rangeを使うと、スライダー部品がつくれます。
![](https://tumaboki.com/wp-content/uploads/2020/10/3ca252c1d855457ceef718ff53ee3656.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/7326e4e20a788ea3d5ae779b7645b29f.png)
まとめ
inputタグとさまざまなtype属性を組み合わせることで簡単に部品がつくれます♪
ユーザーが使いやすいWebページを心がけましょう♪
一緒に一歩踏み出しましょう♪
コメント