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

input”要素~“type="datetime-local"HTML5.1で追加

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

type="datetime-local"

送信可能な値 機械可読な形式の日時(“yyyy-MM-ddThh:mm”)、空文字列
妥当性のチェック 書式の制約あり

type="datetime-local"”を指定したinput”要素は日時の入力欄を表します。

フォームの送信時には入力値はタイムゾーンの情報のない機械可読な形式の日時(“yyyy-MM-ddThh:mm”)でname”属性の値とともに送信されます。ブラウザによっては入力欄に表示される書式が異なる場合がありますが、表示される書式にかかわらず送信される書式は機械可読な形式になります。

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

ブラウザによって入力時に表示されるインターフェースが異なります。ブラウザによってはスクロール式のセレクトウィンドウやカレンダー型のインターフェースが表示されます。

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

時刻を含めない場合はtype="date"を指定したinput”要素を使用します。

サンプルコード

<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<p><label>来店予定日時:<input type="datetime-local" name="sample01"></p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>

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

属性と値

属性
属性 説明 説明
必須属性
type="" 入力欄の種類 datetime-local 日時の入力欄
任意属性
グローバル属性
autocomplete=""HTML5で追加 ブラウザーによるオートコンプリートの可否 on オートコンプリートを行う
off オートコンプリートを行わない
disabled="" 入力欄を無効化 disabled 入力欄を無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
list=""HTML5で追加 入力値の候補と関連付ける ID名 関連づけるdatalist”要素id”属性の値
max=""HTML5で追加 入力可能な最大値 日時 機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
min=""HTML5で追加 入力可能な最小値 日時 機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
name="" 入力欄の名前 文字列 入力欄の名前
readonly="" 入力値を編集できなくする readonly 入力値を編集できなくする
required=""HTML5で追加 入力を必須にする required 入力を必須にする
step=""HTML5で追加 入力可能な数値の間隔 any どのような値も入力可能(無段階)
秒数 入力可能な日時の間隔
value="" フォームで送信する値の初期値 日時 機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク