Web制作

HTMLのタグについて理解しよう(No.10)[完結です]

皆さんこんばんにちは、ユウです。

今回でHTMLタグシリーズも最後になります。

他のシリーズは以下にリンクを張っておくので、興味がある方はそちらから足を運んでみて下さい。

HTMLのタグについて理解しよう(No.9)皆さんこんばんにちは、ユウです。 今回は前回のHTMLタグについての記事で紹介した form タグの中身に使用するタグについて紹介...

今回も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電話番号の入力欄を作成
urlurl の入力欄を作成
emailメールアドレスの入力欄を作成
passwordパスワードの入力欄を作成
datatimeUTC (協定世界時)日時の入力欄を作成
date日付の入力欄を作成
month月の入力欄を作成
week週の入力欄を作成
time時間の入力欄を作成
datetime-localUTCではない日時の入力欄を作成
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です。

最後まで読んでいただきありがとうございました!

ABOUT ME
ユウ
プログラミング担当です。夜行性大学生やってます。 メンバーの中で一番プログラミングが得意で、将来はBMIという研究をしてALSの患者さんへの医療機器の開発を目標にしています。 無線LAN有線LANより便利。