input要素の新しいtype属性値(数値・色関連)

input要素の数値・色関連の新しいtype属性は以下のものがあります。 

  • number:数値
  • range:数値(範囲指定)
  • color:色の説明

number属性の説明

type属性の値にnumberを指定すると、フォームは数値の入力欄になります。
min属性 / max属性 / step属性を使用すると、それぞれの最小値・最大値・数値の刻みが指定できます。

サンプルコード

<input type="number" name="num" min="5" max="100" step="5" />

表示例

range属性の説明

type属性の値にrangeを指定すると、フォームは数値の入力欄になります。
入力できる値が数値なのはnumber属性と同じですが、rangeno場合

  • 数値の正確性は重要でない
  • 指定できる数値は上限と下限の範囲が必須
  • 値の未設定はできない

という違いがあります。

サンプルコード

<input type="range" name="range" value="20" min="0" max="100" step="5" />

表示例

color属性の説明

type属性の値にcolorを指定すると、フォームは色指定の欄になります。

サンプルコード

<input type="color" name="color" />

表示例

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

投稿者:

kishiken

企業務めのWEBデザイナーです。