を使えば、クリックでタイムピッカーが表示される時刻入力欄を簡単に作成できます。基本の使い方、サンプルコード、便利な属性までわかりやすく解説します。">
HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのtime入力タイプの使い方｜時刻選択フォームを簡単に実装する方法

HTMLで時刻を選択できる「time」入力タイプとは？

HTMLでは、<input type="time"> を使用することで、ユーザーに時刻を選択させることができます。この入力フィールドをクリックすると、タイムピッカー（時刻選択のポップアップ）が表示され、マウス操作だけで直感的に時刻を指定できるのが特徴です。

また、フォーム送信時の値は「HH:MM」（例：14:30）という24時間形式の文字列になるため、サーバーサイドやJavaScriptでの処理もシンプルに行えます。

注意： Internet Explorerなどの一部の旧ブラウザでは type="time" がサポートされておらず、通常のテキスト入力欄として表示される場合があります。Google Chromeをはじめとする主要なモダンブラウザであれば問題なく動作するため、利用前に対象ブラウザでの動作確認を行いましょう。

HTMLのtime入力タイプの使い方｜時刻選択フォームを簡単に実装する方法

time入力タイプの実装例

以下のサンプルコードを実行すると、HTMLで時刻入力フィールドを使用する方法を実際に確認できます。受験生の名前と試験時間を入力するシンプルなフォームの例です。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML input time</title>
  </head>
  <body>
    <form action = "" method = "get">
      Details:<br><br>
      Student Name<br><input type="name" name="sname"><br>
      Exam Time<br><input type="time" name="etime"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

覚えておくと便利な関連属性

time入力タイプは、以下の属性と組み合わせることで、より使いやすいフォームを作成できます。

  • value： 初期値として表示する時刻を指定します（例：value="09:00"）
  • min / max： ユーザーが選択できる時刻の範囲を制限します
  • step： 時刻の選択間隔（秒単位）を指定します。デフォルトは60秒です
  • required： 時刻の入力を必須項目に設定します

このように、<input type="time"> を活用すれば、JavaScriptなどに頼ることなく手軽に時刻選択フォームを実装できます。アンケートフォームや予約システムなど、さまざまな場面でぜひ活用してみてください。

  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

  2. HTML DOM Input Time の type プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Time type プロパティは、<input type=time> 要素の type 属性の値を取得または設定するために使用されます。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 type の値を取得する場合 inputTimeObject.type type に値を設定する場合 inputTimeObject.type = stringValue 指定できる文字列値（stringValue） stri