このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“type="number"HTML5で追加

記事Sep.16th, 2020
数値の入力欄
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

type="number"

送信可能な値 数値、空文字列
妥当性のチェック 書式の制約あり

type="number"”を指定したinput”要素は数値の入力欄を表します。

フォームの送信時にはname”属性の値とともに入力された内容が送信されます。入力値は数値であるかチェックされます。

step”属性を指定しない場合の入力できる値の間隔は“1”です。

一般的にモバイルブラウザでは入力時に数字入力用のソフトウェアキーボードが表示されます。また、ブラウザによって入力欄に数値を増減させる矢印が表示されます。

対応していないブラウザでは単純なテキスト入力欄(type="text")として扱われます。

サンプルコード

<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<p><label>またたびの数:<input type="number" name="sample01"></p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>

*送信すると入力内容が表示されます。

属性と値

属性
属性 説明 説明
必須属性
type="" 入力欄の種類 number 数値の入力欄
任意属性
グローバル属性
autocomplete=""HTML5で追加 ブラウザーによるオートコンプリートの可否 トークンHTML5.1で追加 オートコンプリートで表示されるべき入力候補の種類
on オートコンプリートを行う
off オートコンプリートを行わない
disabled="" 入力欄を無効化 disabled 入力欄を無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
list=""HTML5で追加 入力値の候補と関連付ける ID名 関連づけるdatalist”要素id”属性の値
max=""HTML5で追加 入力可能な最大値 数値 入力可能な最大値
min=""HTML5で追加 入力可能な最小値 数値 入力可能な最小値
name="" 入力欄の名前 文字列 入力欄の名前
placeholder=""HTML5で追加 入力欄のプレースホルダー テキスト 入力欄のプレースホルダー
readonly="" 入力値を編集できなくする readonly 入力値を編集できなくする
required=""HTML5で追加 入力を必須にする required 入力を必須にする
step=""HTML5で追加 入力可能な数値の間隔 any どのような値も入力可能(無段階)
数値 入力可能な数値の間隔
value="" フォームで送信する値の初期値 数値 数値

仕様書

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
number
定義なし

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク