【HTML】inputタグの属性まとめ

こんにちは！CODE CLUB965のKです！

今回は、HTMLにおけるinputタグの属性を簡単にまとめておきたいと思います。
属性を変えることで、見た目が変わったり、フォーカスインした際の入力モードが変わりるので必要に応じて使い分けましょう。

テキスト入力

テキスト入力系の属性を以下に紹介します。

検索(search)

<input type="search"/>

テキストボックスが検索用に変化します。
ブラウザによって多少違いはありますが、検索窓を作るときに使えます。

数値(number)

<input type="number" value="0" step="1"/>

見た目は普通のテキストボックスです。
フォーカスを合わせると数字入力モードが表示されます。

電話番号(tel)

<input type="tel"/>

テキストボックスをクリックしたときに、数字入力のキーボードが表示されます。

URL(url)

<input type="url"/>

URL入力用のテキストボックスです。
ブラウザによっては、特に変わりないかもです。

メールアドレス(email)

<input type="email"/>

フォーカスインでアルファベットの入力モードに切り替わります。

日付、時間指定

カレンダーのようなポップアップが表示されたり、日付や時間を指定できるコントロールが表示されます。

時間(time)

<input type="time"/>

時、分を選択できます。

日付(date)

<input type="date"/>

年月日を選択できます。

日時(datetime)

<input type="datetime"/>

年月日と時、分を選択できます。

月(month)

<input type="month"/>

西暦と月を選択できます。

その他

おまけです。

範囲指定(range)

<input type="range" value="0" step="1" min="0" max="10"/>

範囲を指定できるスライダーが表示されます。

最後に

今回は、inputタグで使えそうな属性を紹介しました。

ブラウザやデバイスによっては表示が違ったり、そもそも機能しない場合もありますので必ず確認して使用して下さい。（今回紹介し属性は大丈夫だと思います...）

ぜひ色々と試してみて下さい！

それでは、また！

Follow me!