HTMLでinputタグのtype=”date”で日付を入力する方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLでinputタグのtype="date"で日付を入力する方法について解説しています。inputタグでtypeをdateに設定すると、日付入力のフォームを作成することができます。基本の設置方法と、カレンダー表示などの応用の使い方を覚えましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでinputタグのtype=”date”で日付を入力する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
inputタグのtype=”date”で日付を入力する方法について詳しく説明していくね！
お願いします！
目次
inputタグのtype属性をdateにする
フォーム入力において、inputタグはよく使われるとおもいます。その中でも日付入力はフォームにおいて使う場面が多くあるかと思います。日付を入力するときにはinputタグでtypeをdateに指定すると出力が統一されます。具体的には次のように書けます。
<input type="date"></input>
すると、以下の入力欄が表示されます。
これで自動で日付入力できる形式になりました。なお、ここから出力される値は年-月-日という形式になります。また、以下のように属性としてvalue=”年-月-日”と指定すれば、フォームに予め日付をセットすることもできます。
<input type="date" value="2020-05-01">
すると、HTMLを開いたときに画像のように日付が予め設定されます。
このままだと入力出来る日付はいつでもいいのですが、入力出来る日付に期間を設けたいときには属性にminとmaxを指定すると適用されます。もちろんこちらの日付も年-月-日の形式で指定します。
<input type="date" min="2020-05-01" max="2020-05-31">
入力可能な書式
このフォームをクリックすると半角の数字が入力できるようになって年月日を直接入力できますし、あとはフォームの右側にカレンダーのようなUIが表示されてそこから日付を入力することができます。
日付を選択するUIはページを開いているブラウザやパソコン、スマホによって形式が違います。入力はある程度ルール化されているので、最終的な出力が一定になってサーバー側での日付の処理が簡単になります。
日付を入力してみよう
それでは実際に日付入力をしてみましょう。以下のHTMLをコピーして任意の場所に保存します。
<html>
<head>
<meta charset="utf-8">
<title>Date Form</title>
</head>
<body>
<label>
日付を入力してください
<input type="date">
</label>
</body>
</html>
保存したHTMLをダブルクリックすると、以下のように入力フォームがブラウザで表示されます。
監修してくれたメンター
| メンター 三浦
モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
