皆さんこんばんにちは、ユウです。
今回でHTMLタグシリーズも最後になります。
他のシリーズは以下にリンクを張っておくので、興味がある方はそちらから足を運んでみて下さい。
今回もNo.9の記事に引き続き form タグの中身のタグについて紹介していきたいと思います。
No.9の記事の使用例にもここで紹介しているタグを使っているので、No.9の記事を読んで疑問に感じたタグがあった場合は、読んでおいた方が良いです。
お時間がある方は、最後まで読んでいただけると嬉しいです。
<fieldset> フォームの入力項目をグループ化する
fieldset タグはフォームの項目をグループ化することが出来るタグです。
fieldset タグの中にある input タグ、select タグ、textarea タグ、フォーム部品をグループ化することが出来ます。
基本的には、グループ化した fieldset タグの周りは黒線で囲まれるようになります。
ブラウザによっては多少違いがあるかもしれません。
fieldset タグの属性である form の属性値を form タグの id の属性値と同じにすることで関連付けることが出来ます。
＜使用例＞
See the Pen
yLBWdVO by 悠(人) (@yutohanabusa)
on CodePen.
<legend> 入力項目のグループに説明などをつける
legend タグは fieldset タグでグループ化したグループに名前や説明をつけることが出来るタグです。
fieldset タグ中の先頭に配置することが出来ます。
＜使用例＞
See the Pen
LYPoKyd by 悠(人) (@yutohanabusa)
on CodePen.
<label> フォーム部品と項目名を関連付ける
label タグはフォーム部品と項目名を関連付けることが出来るタグです。
関連付ける方法としては、2種類あります。
1つ目は、 label タグの属性である for 属性の属性値と form タグの id の属性値を同じにします。
2つ目は、label タグの中に form 部品を入れるだけで大丈夫です。
label タグは form 以外のところでも使えるタグなので覚えておくようにしましょう。
＜使用例＞
See the Pen
YzKboLd by 悠(人) (@yutohanabusa)
on CodePen.
<input> フォームの入力部品を作成する
input タグはフォームの中に、入力するための部品を作っていくことが出来ます。
input タグでは、type属性の属性値を変えることで、入力出来る種類を変えていくことが出来ます。
type 属性の属性値一覧は以下の表を見て下さい。
| 属性値 | 効果 |
| hidden | 画面には表示されない隠しデータを指定 |
| text | 一行テキストボックスを作成 |
| serch | 検索テキストの入力欄を作成 |
| tel | 電話番号の入力欄を作成 |
| url | url の入力欄を作成 |
| メールアドレスの入力欄を作成 | |
| password | パスワードの入力欄を作成 |
| datatime | UTC (協定世界時)日時の入力欄を作成 |
| date | 日付の入力欄を作成 |
| month | 月の入力欄を作成 |
| week | 週の入力欄を作成 |
| time | 時間の入力欄を作成 |
| datetime-local | UTCではない日時の入力欄を作成 |
| number | 数値の入力欄を作成 |
| range | 度合いを表示する入力欄を作成 |
| color | 色の入力欄を作成 |
| checkbox | チェックボックスを作成 |
| radio | ラジオボタンを作成 |
| file | サーバーへファイルを送信 |
| submit | 送信ボタンを作成 |
| image | 画像ボタンを作成 |
| reset | リセットボタンを作成 |
| button | 汎用ボタンを作成 |
このくらいになります。書き漏らしていたらスミマセン。
input タグは type 属性値を変えていくことで様々な入力欄などを作成することが出来ます。
入力部品を作成したい場合は、適切な属性値を選ぶようにしましょう。
ブラウザによっては、属性値と効果が違うテキストを入力した場合送信されなくなるものがあるので気をつけるようにして下さい。
＜使用例＞
See the Pen
GRKaVEo by 悠(人) (@yutohanabusa)
on CodePen.
最後に
今回は form タグの中に使うタグについて紹介してきました。
特に input タグの type 属性値は種類が沢山あり、覚えるのに苦労します。
これに関しては、扱っていくうえで慣れるようにしていきましょう。
今回でHTMLタグの紹介は終了となります。（涙）
作成していくうえで気づいた細かい機能などは、今後とも紹介していこうとは思います。
HTMLのタグめちゃくちゃ多いですよね。
あの機能つけたいけどどうしよう？っていうときに、すっと出てくると作業効率が格段に上がるので頭に片隅にでも置いておいてもらえると、あとはググればOKです。
最後まで読んでいただきありがとうございました！
