- HOME
- > BLOG CATEGORY
- 【HTML】type属性timeの使い方、時刻の入力欄を作成しよう!

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
HTML
について学びたい方へ今回は、input type="time"
(時刻)について詳しく解説していきます。
type=”time”では、「時刻」の入力欄を作成します。
input type="time"
で作成すると、時刻の入力欄が作成されます。
注意!
IEとSafariは非対応になります。timeタイプは対応していない為、
通常のinput=textのテキスト入力欄になります。
左の図が、input type="text"
になり、通常の入力欄になります。
右の図が、input type="time"
になり、時刻の入力欄になります。
![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
[記事の内容]
input type="time"
を指定すると、時刻の入力欄(キーボード)になります。
ブラウザによっては入力しやすいインターフェイスが表示され、ユーザビリティが向上します。
送信されるデータは「hh:mm:ss」形式になります。
hh | 2桁のとき(00〜23)を表します。 |
---|---|
mm | 2桁の分(00〜59)を表します。 |
ss | 2桁の秒(00〜59)を表します。 |
書き方は以下のようになります。
input type=”time”
<form method="post">
<div>
<label for="time-data">予約希望時間</label>
<input type="time" name="time-data" />
</div>
</form>
value属性とは、入力欄に初期値の文字を指定します。
また、type属性が「submit」、「image」、「reset」、「button」の場合はボタン名として表示されます。
例)value="12:30"
と指定すると、12:30が値の初期値になります。
value属性について
<form method="post">
<div>
<label for="time-date">予約希望時間</label>
<input type="time" name="time-date" value="12:30" />
</div>
</form>
min属性とは、時刻の最小値を指定します。
例) min="12:30"
と指定すると、12:30から選択可能になります。
※今回は必須項目に設定し、指定外(時刻)を選択した場合エラーがでます。
min属性について
<form method="post">
<div>
<label for="time-min">予約希望時間 min属性(最小値)</label>
<input type="time" name="time-min" value="12:30" min="12:30" required />
</div>
</form>
max属性とは、時刻の最大値を指定します。
例) max="12:30"
と指定すると、12:30まで選択可能になります。
※今回は必須項目に設定し、指定外(時刻)を選択した場合エラーがでます。
max属性について
<form method="post">
<div>
<label for="time-max">予約希望時間 max属性(最大値)</label>
<input type="time" name="time-max" value="12:30" max="12:30" required />
</div>
</form>
min属性とmax属性と続けて指定することにより、範囲指定が可能になります。
例) min="12:30"
、max="18:30"
と指定すると、12:30から18:30までの範囲を選択できます。
※今回は必須項目に設定し、指定外(時刻)を選択した場合エラーがでます。
min属性とmax属性を合わせて指定する
<form method="post">
<div>
<label for="time-date">予約希望時刻 min属性とmax属性</label>
<input type="time" name="time-date" value="12:30"
min="12:30" max="18:30" required />
</div>
</form>
※上記のコードは分かりやすいように、改行を入れております。
step属性とは、指定した値おきに時刻を選択できます。
例) step="1"
と指定すると、1秒ごと選択できるようになります。
例) step="300"
と指定すると、5分ごと選択できるようになります。
※対応しているブラウザのみになります。
step属性について
<form method="post">
<div>
<label for="time-date">予約希望時刻</label>
<input type="time" name="time-date" value="12:30" step="1" />
</div>
</form>
required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。
required属性について
<form method="post">
<div>
<label for="time-date">予約希望時刻</label>
<input type="time" name="time-date" required />
</div>
</form>
time属性は使いどころが難しいですね、今回は「このような属性もある」ということを理解しておきましょう。
type=”text” | 【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう! |
---|---|
type=”tel” | 【HTML】type属性telの使い方、電話番号の入力欄を作成しよう! |
type=”email” | 【HTML】type属性emailの使い方、メールアドレスの入力欄を作成しよう! |
type=”url” | 【HTML】type属性urlの使い方、URLの入力欄を作成しよう! |
type=”password” | 【HTML】type属性passwordの使い方、パスワードの入力欄を作成しよう! |
type=”date” | 【HTML】type属性dateの使い方、日付の入力欄を作成しよう! |
type=”week” | 【HTML】type属性weekの使い方、週の入力欄を作成しよう! |
type=”number” | 【HTML】type属性numberの使い方、数値の入力欄を作成しよう! |
type=”range” | 【HTML】type属性rangeの使い方、スライダー(数値)を作成しよう!! |
type=”color” | 【HTML】type属性colorの使い方、RGBカラーの入力欄を作成しよう! |
type=”checkbox” | 【HTML】type属性checkboxの使い方、チェックボックスを作成しよう! |
type=”radio” | 【HTML】type属性radioの使い方、ラジオボタンを作成しよう! |
type=”file” | 【HTML】type属性fileの使い方、送信するファイルの選択欄を作成しよう! |
type=”submit” | 【HTML】type属性submitの使い方、フォームの送信ボタンを作成しよう! |
type=”reset” | 【HTML】type属性resetの使い方、入力内容のリセットボタンを作成しよう! |
今回はこれで以上です。
次回も「フォーム」について解説していきます。
input type="time"
は、 「時刻」の入力欄を作成します。input type="time"
は、 Android・iOSのモバイル端末など対応したブラウザでは時刻のキーボードが表示されます。![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
2021.07.27
2021.07.09
2021.07.06
2021.07.02
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog