フォーム関連の要素は、お問い合わせフォームなどユーザーが入力・選択したデータをサーバーに送信する際に使用されるもので、HTML5では、さらにフォーム関連要素の属性がたくさん追加されています。

フォーム関連要素

フォーム関連の要素はinput要素やtextarea要素などいろいろありますが、いくつか代表的な要素を見ていきましょう。

input要素

input要素は、ユーザーがデータを入力・選択する際の部品となる要素です。以下がinput要素のtype属性で指定できるキーワードになります。

キーワード種類
text1行テキストの入力フィールド
radioラジオボタン
checkboxチェックボックス
submit送信ボタン
image画像の送信ボタン
resetリセットボタン
passwordパスワード用の入力フィールド
hidden表示しないで送信するテキスト
button汎用ボタン
file送信するファイルを選択
search検索用の入力フィールド（HTML5から追加）
tel電話番号用の入力フィールド（HTML5から追加）
urlURL用の入力フィールド（HTML5から追加）
emailメールアドレス用の入力フィールド（HTML5から追加）
number数値を入力（HTML5から追加）
rangeスライダーでおおまかな数値を入力（HTML5から追加）
date日付を入力（HTML5から追加）
time時刻を入力（HTML5から追加）
color色を入力（HTML5から追加）

textarea要素

textarea要素は、複数行のテキストを入力するための入力フィールドです。

select要素

select要素は、選択肢を作ってその中から選ぶ形式の部品になります。選択肢となる部分はoption要素を使ってマークアップします。

label要素

label要素は、その要素内容であるラベルとフォーム部品を関連付けるための要素です。ラベルとは、その部品が何の項目であるのかを示すテキストのことです。

button要素

button要素は、要素内容をそのままラベル（テキスト）として表示されるボタン要素です。button要素の属性値に「submit」をつけると送信ボタンになり、「reset」をつけるとリセットボタンになります。また、「button」をつけると送信もリセットもしないボタンとなります。

fieldset要素

fieldset要素は、フォーム関連要素をグループ化したいときに使用する要素です。fieldset要素内でlegend要素を使ってグループ名を付けることができます。

すべてではありませんが、以上がフォーム関連要素の説明になります。input要素の属性に関しては特にHTML5から多数追加されていますので、フォームを作る際には試してみてください。

おすすめの記事