HTML5で追加されたフォーム部品

HTML5では、従来のフォーム部品に加え、新しいフォーム部品が追加されています。

【構文】

<input type=”search” name=”名前” value=”初期値”> (検索)
<input type=”email” name=”名前” value=”初期値”> (メール入力)
<input type=”url” name=”名前” value=”初期値”> (URL入力)
<input type=”tel” name=”名前” value=”初期値”> (電話番号入力)
<input type=”number” name=”名前” value=”初期値”> (数値入力)
<input type=”date” name=”名前” value=”初期値”> (日付入力)
<input type=”time” name=”名前” value=”初期値”> (時刻入力)
<input type=”range” name=”名前” value=”初期値”> (範囲内の数値入力)
<input type=”color” name=”名前” value=”初期値”> (RGBカラーコード入力)

inputタグのtype属性にそれぞれの値を指定すると、指定された値を入力しやすいようにキーボードのモードが切り替わったり、専用のインターフェースから値を入力できるようになります。

See the Pen
3-4
by Koji Seto (@yseseto)
on CodePen.