【HTML】inputタグで生成できるフォーム部品まとめ

どうもおはようポテト(@ohayoupoteto22)です。

いろんな種類のフォーム関連の部品を生成してくれるinputタグですが、ブログ主含め多くの方が思うことはこちら。

自分のための備忘録ですが参考になれば幸いです⸝⸝- ̫ -⸝⸝

inputタグで生成できるフォーム部品まとめ

text

<input type="text" />

テキスト入力用のフィールドです(1行)。

email

<input type="email" />

メールアドレス入力用のフィールドです。

url

<input type="url" />

URL入力用のフィールドです。

tel

<input type="tel" />

電話番号入力用のフィールドです。

number

<input type="number" />

数値入力用のフィールドです。

password

<input type="password" />

パスワード入力用のフィールドです。

search

<input type="search" />

検索用の入力フィールドです。

date

<input type="date" />

日付入力用のフィールドです。

month

<input type="month" />

年月入力用のフィールドです。

week

<input type="week" />

年と週入力用のフィールドです。

time

<input type="time" />

時刻入力用のフィールドです。

datetime-local

<input type="datetime-local" />

ローカルな年月日入力用のフィールドです。

range

<input type="range" />

よく見るスライダーです。

checkbox

<input type="changebox" />

チェックボックスです。

radio

<input type="radio" />

ラジオボタンです。

submit

<input type="submit" />

送信ボタンです。

reset

<input type="reset" />

リセットボタンです。

button

<input type="button" />

汎用ボタンです。

color

<input type="color" />

色を選択できるやつです。

file

<input type="file" />

ファイルを送信するためのものです。

image

<input type="image" />

画像の送信ボタンです。

hidden

<input type="hidden" />

何も表示されない、送信専用のフィールドです。

inputタグに指定できる属性まとめ

おまけというか自分のための備忘録として指定できる属性もまとめました。

inputmode属性に指定できるもの

上で挙げたinputmode属性ですが、指定するキーワードによって入力モードを指定することができます。

そのキーワードとそれに対する入力モードをまとめてみました。

以上になります。

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝