JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のinput要素で新たに追加されたtype属性の値一覧と使い方

HTML5では、input要素のtype属性に多くの新しい値が導入されました。従来は「text」や「password」など限られた種類しかありませんでしたが、新タイプの登場により、日付や色、メールアドレスなど用途に応じた専用の入力UIが利用できるようになり、ユーザーの利便性と入力データの精度が大幅に向上しました。

HTML5で追加された主なinputタイプ

タイプ説明
colorカラーピッカー。カラーホイールやスウォッチ形式で色を選択できます。
dateカレンダーから日付を選択するための入力欄です。
datetime-local日付と時刻を選択します。タイムゾーンの設定は含まれません。
datetimeタイムゾーンを含む完全な日付と時刻の入力欄です。
※現在は仕様から廃止されており、代わりに datetime-local の使用が推奨されています。
emailメールアドレス専用の入力欄です。対応ブラウザでは形式の自動チェックも行われます。
month特定の年の中から月を選択します（例：2024年5月）。
number数値のみを入力できるフィールドです。上下ボタンでの増減にも対応しています。
range一定範囲内の数値を選択します。通常はスライダーとして表示されます。
search検索エンジンに渡すキーワード用の入力欄です。ブラウザ上部の検索バーが代表例です。
tel電話番号用の入力欄です。スマートフォンではテンキーが表示されやすくなります。
time時刻を選択します。タイムゾーン情報は含まれません。
urlURL専用の入力欄です。こちらも形式チェックの対象になります。
week特定の年の中から週を選択します（例：2024年第20週）。

記述例

基本的な使い方は非常にシンプルで、type属性に目的の値を指定するだけです。

<input type="email" name="email" placeholder="メールアドレス">
<input type="date" name="birthday">
<input type="range" min="0" max="100" step="1">

活用時のポイント

  • バリデーションの強化： email や url などのタイプは、送信時にブラウザが自動的に入力内容を検証してくれます。
  • モバイル対応： tel や email を指定すると、スマートフォンで最適なキーボードが表示されるため、入力ミスが減ります。
  • ブラウザ間の差異： date や week などのタイプはブラウザによって表示形式や対応状況が異なるため、実装前にターゲット環境での確認をおすすめします。
  1. HTML DOM Input Time の type プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Time type プロパティは、<input type=time> 要素の type 属性の値を取得または設定するために使用されます。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 type の値を取得する場合 inputTimeObject.type type に値を設定する場合 inputTimeObject.type = stringValue 指定できる文字列値（stringValue） stri

  2. OSのカーネルとは？役割・仕組みと5つの種類をわかりやすく解説

    Windows、macOS、Linux、Androidなど、あらゆるオペレーティングシステム（OS）には「カーネル（Kernel）」と呼ばれる中核プログラムが存在します。カーネルはシステム全体の「ボス」のような存在であり、まさにOSの心臓部です。コンピューター上で起こるあらゆる処理はカーネルを経由し、他のすべてを制御するコンピュータープログラムでもあります。本記事では、OSにおけるカーネルとは何か、そしてカーネルにはどのような種類があるのかを詳しく解説します。 OSにおけるカーネルとは カーネルはOSの中核プログラムであるだけでなく、ブートローダーの実行後に最初に読み込まれるプログラムでもあり