TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで日付の入力欄を作る方法を現役デザイナーが解説【初心者向け】
icon
icon
HTML

HTMLで日付の入力欄を作る方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで日付の入力欄を作る方法について解説しています。日付の入力フィールドを作成するには、input要素のtype属性にdateを指定します。書き方とブラウザ上での見え方を確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLで日付の入力欄を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

日付の入力欄を作る方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

inputタグの属性について

日付の入力欄を作るにはinputタグを使います。input要素はユーザーに何かのデータを入力してもらう要素です。お問い合わせフォームや個人情報の入力欄に多く使われています。

input要素のtype属性を変えることで入力してもらいたいデータのみを入力出来るようになります。typeをtextとした場合は名前などのテキストを記入でき、typeをemalとした場合はemailのアドレスのみを入力できる欄になります。

 

文字列書式の違い

input要素のtype属性をdateとすることで日付入力欄を作成することができます。このdateはブラウザによって表記が異なり、Google Chromeの場合にはカレンダーの表示が出てきます。

対応ブラウザのみカレンダーの表示となりますが、非対応ブラウザの場合にはtextと同じように扱われてしまいます。

この入力欄にユーザーから記入してもらうことによりテキスト文字としての表示ではなく,日付の書式としてYYYY-MM-DDとした日付のデータとして送受信が出来るようになります。

 

[PR] Webデザインで副業する学習方法を動画で公開中

入力フィールドを作成してみよう

今回はGoogle Chromeでの表記となります。各ブラウザごとに表記方法が変わる為、注意が必要です。

(htmlファイル)

<div>

<inputtype="date"name="日付">

</div>

 

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

HTMLからPHPを呼び出す方法を現役デザイナーが解説【初心者向け】

HTMLからPHPを呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもH...
HTML

HTMLでテキストを下寄せに配置する方法を現役エンジニアが解説【初心者向け】

HTMLでテキストを下寄せ（親要素の下部）に配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでのselectedによる初期値の設定方法を現役エンジニアが解説【初心者向け】

HTMLでのselectedによる初期値の設定方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLで絵文字を表示する方法を現役エンジニアが解説【初心者向け】

HTMLで絵文字を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   ...
HTML

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。 目次 HTMLタグの書き方 要素とは 属性...
HTML

HTMLコーダーなら知っておこう。パソコンでスマホ表示する方法を現役エンジニアが解説【初心者向け】

HTMLコーダーなら知っておきたいパソコンでスマホ表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
HTML

あわせてよく読まれている記事

HTMLのinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次inputタグの属性について文字列書式の違い入力フィールドを作成してみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 input要素でパスワードの入力欄を作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   inputタグで使えるパスワード属性について inputタグのtype属性の値に「password」を指定することで、パスワード専用の入力欄になります。 以下のように記述することで、パスワード入力時には文字がドット（●）のような記号に置き換えられ、入力内容が容易に読み取られなくなります。 <input type="password">   以下のResult画面にある入力欄に、実際に入力して確認してみましょう。 See the Pen Untitled by nomallica (@nomallica) on CodePen.   また、パスワード属性を指定したinputタグには以下の属性も指定することができ、入力時の制限や補助的な表示を加えることが可能となっています。 属性 説明 autocomplete ブラウザ等による自動入力を許可するかどうかを設定できる。 pattern 形式に沿った文字が入力されるように、正規表現を使って制限できる。 placeholder 入力時のヒントを表示できる。 required 入力が必須の項目にする。 readonly 入力不可で読み取りのみに制限できる。値の送信は可能。   以降では、それぞれの属性について詳しく見ていきましょう。   パスワード属性を指定したinputタグに追加できる属性 autocomplete属性 以下のようにautocomplete属性を追加することで、入力の際にオートコンプリートを機能させるかどうかを制御できます。 <input type="password" autocomplete="current-password"> オートコンプリートとは、ブラウザやパスワード管理ツール等が、自動的にパスワード入力欄を埋めるしくみのことです。 入力を容易にする便利な機能ですが、パスワード管理のセキュリティを下げることにも繋がりますので、使い所をよく考えて指定しましょう。 指定できる値は以下になります。 値 説明 on 入力時にオートコンプリートを許可します。 off 入力時にオートコンプリートを許可しません。 current-password ブラウザ等に記録されているサイト専用のパスワードを自動入力します。 new-password 新規入力フォーム等で新しいパスワードを提案して自動入力します。   pattern属性 形式に沿った文字が入力されるように、正規表現を使って制限できます。 例えば以下のようにpattern属性の値を指定することで、半角英数字6文字以上を満たすことができない入力値がエラーになります。 <input type="password" pattern="^([a-zA-Z0-9]{6,})$" title="半角英数字6文字以上で入力ください">   正規表現がよくわからない場合は、業務で役立つ！jQueryで覚えておくべき正規表現とは【初心者向け】を読むと基本的な理解が深まります。   placeholder属性 以下のように、値に入力時のヒントとなる文字列を設定することができます。 <input type="password" placeholder="半角英数字6文字以上のパスワードを入力"> このヒント表示により、ユーザー側は入力欄にどのような情報が求められているのかを把握できます。   required属性 以下のようにrequired属性を設定することで、入力必須の項目にできます。 <input type="password" required>   readonly属性 以下のようにreadonly属性を設定することで、読み取りのみで入力不可の項目にできます <input type="password" readonly> 値はサーバーに送信可能です。   [PR] Webデザインで副業する学習方法を動画で公開中inputタグでパスワードの入力欄を作成してみよう 以下のようにシンプルなパスワード入力欄を作成してみましょう。   HTML <form> <input type="password" value="" name="sample" maxlength="10"> </form> inputタグの属性として、nameは、入力装置の識別子（ラベル）として、名前を定義することになります。 また、maxlength属性に定める数値は、入力文字数の上限数を定めることになります。   表示結果 See the Pen Untitled by nomallica (@nomallica) on CodePen.   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
HTML

JavaでCalendarクラスを使う方法【初心者向け】

初心者向けにJavaで書くCalendarの使い方について解説。Calendarの書き方から実際にサンプルプログラムを書きながら説明しています。 Javaエンジニアを目指している人は今のうちに覚えておきましょう。   なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。   Calendarクラスとは CalendarクラスはJavaで日付の処理を行うためのクラスです。JDK1.1より導入されました。 JDK1.0までは、Dateクラスが日付の処理を行うためのクラスでしたが、より便利なクラスとしてDateクラスに代わり作られました。 それまでのコードとの互換性のためにDateクラスは残してはいますが、JDK1.1以降はCalendarクラスが日付処理の中心となっています。 ちなみにですがJDK8からは、DateTime APIという新しい日付処理のクラス群も作られました。 JDK8以降はこちらを中心にプログラミングをしていくことにはなりますが、CalendarクラスはJDK1.1から7まで長きに渡り、日付処理を担ってきました。(JDK1.1は1997年リリース、JDK8は2014年リリースです) これからはDateTime APIが中心になると考えられていますが、まだまだCalendarクラスを使ったコードが大半です。しっかり使い方を覚えておきましょう。   Calendarの書き方 それではCalendarの使い方を見ていきます。 Calendarクラスを使うにはまず、Calendar#getInstance( )メソッドを使い、Calendarのインスタンスを生成します。生成時点の日付／時刻を保持したインスタンスとなります。 Calendar cal = Calendar.getInstance(); これでCalendarのインスタンスが生成されます。   日付時刻の取得 Calendarのgetメソッドを使って日付／時刻の値を取得します。 引数にCalendarクラスの定数を指定することで取得したい日付／時刻の種類を指定します。 たとえば、Calendarインスタンスが保持している年を取得したい場合は、以下のように書きます。 int year = cal.get(Calendar.YEAR);   日付を取得するには以下の定数を指定します。 Calendar.YEAR Calendarインスタンスが保持している日付のうち年を返す Calendar.MONTH Calendarインスタンスが保持している日付のうち月を返す。但し、返す範囲は0から11までとなり、実際の月より一つ少なくなるため、注意が必要 Calendar.DATE Calendarインスタンスが保持している日付のうち日を返す   時刻を取得するには以下の定数を指定します。 Calendar.AM_PM Calendarインスタンスが保持している時刻のうち、午前(Calendar.AM)／午後(Calendar.PM)を返す。 Calendar.HOUR Calendarインスタンスが保持している時刻のうち時間を返す(0 – 11) Calendar.HOUR_OF_DAY Calendarインスタンスが保持している時刻のうち時間を返す(0 – 23) Calendar.MINUTE Calendarインスタンスが保持している時刻のうち分を返す Calendar.SECOND Calendarインスタンスが保持している時刻のうち秒を返す Calendar.MILLISECOND Calendarインスタンスが保持している時刻のうちミリ秒を返す   その他 Calendar.DAY_OF_WEEK Calendarインスタンスが保持している曜日を以下の定数値として返す Calendar.SUNDAY Calendar.MONDAY Calendar.TUESDAY Calendar.WEDNESDAY Calendar.TURSDAY Calendar.FRIDAY Calendar.SATURDAY Calendar.DAY_OF_YEAR Calendarインスタンスが保持している日付がその年の何日目なのかを返す Calendar.DAY_OF_WEEK_IN_MONTH Calendarインスタンスが保持している曜日がその月の何回目なのかを返す   日付の操作 Calendarのaddメソッドを使って日付／時刻などのフィールド値を操作します。 引数にCalendarクラスの定数を指定することで操作したい日付／時刻の種類を指定します。 たとえば、Calendarインスタンスが保持している年を10年先にしたい場合は、以下のように書きます。 cal.add(Calendar.YEAR, 10); 過去の日付としたい場合は、addメソッドに渡す２つめの引数にマイナス値とします。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう ここでは、Calendarクラスのインスタンス取得から日付の操作、表示のサンプルコードを実際に書いてみます。実行結果も合わせて参考にしてみてください。 package calendarSample; import java.util.Calendar; public class CalendarSample { public static void main(String[] args) { Calendar cal = Calendar.getInstance(); //当日日付時刻 displayCalendarData(cal); System.out.println(); //１０年後日付時刻 cal.add(Calendar.YEAR, 10); displayCalendarData(cal); cal.add(Calendar.YEAR, -10); System.out.println(); //１０ヶ月後日付時刻 cal.add(Calendar.MONTH, 10); displayCalendarData(cal); cal.add(Calendar.MONTH, -10); System.out.println(); //１０日後日付時刻 cal.add(Calendar.DATE, 10); displayCalendarData(cal); cal.add(Calendar.DATE, -10); System.out.println(); //１０時間後日付時刻 cal.add(Calendar.HOUR, 10); displayCalendarData(cal); cal.add(Calendar.HOUR, -10); System.out.println(); //１０分後日付時刻 cal.add(Calendar.MINUTE, 10); displayCalendarData(cal); cal.add(Calendar.MINUTE, -10); System.out.println(); //１０秒後日付時刻 cal.add(Calendar.SECOND, 10); displayCalendarData(cal); cal.add(Calendar.SECOND, -10); System.out.println(); } public static void displayCalendarData(Calendar cal) { System.out.print(cal.get(Calendar.YEAR) + "年"); System.out.print(cal.get(Calendar.MONTH) + 1 + "月"); System.out.print(cal.get(Calendar.DAY_OF_MONTH) + "日"); int week
Java

HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 目次inputタグの属性について文字列書式の違い入力フィールドを作成してみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら！クリックで見る！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力欄の作り方 ネットショッピングで入力する名前・住所の記述欄は<input>タグで作られています。 データの入力方法には一行タイプのものや、ご意見・ご感想といった複数の行を入力できるもの、また ラジオボタンやチェックボックス など、さまざまな入力用の部品が用意されています。 今回は、以下の問い合わせフォームの名前とパスワード入力、ご意見・ご感想の入力欄の作り方について学んでいきましょう。   名前欄とパスワード入力欄の作り方 名前欄とパスワード入力欄を作る際、以下の2つのタグと属性を利用します。 <input>タグ type属性 これら2つのタグと属性について解説します。   <input>タグ <input>タグは、テキスト入力や送信ボタンなど、情報を入力（インプット）するときに使います。   type属性を付け足すことで、さまざまな入力用の部品を作ることが可能です。   type属性 type属性は、要素（ここでは<input>タグ）がどんな形式であるかを指定します。   問い合わせフォームを例に見てみましょう。 <input type>に”text”を設定すると「一行入力のテキスト欄」、<input type>に”password”を設定すると「パスワード形式の入力欄」を作ることができます。 <input>タグは単独で使うので終了タグはいりません。 <input type="text"> <input type="password">   ブラウザで表示しても、一見すると何も変わらない入力欄です。   しかし、テキスト欄に文字を入力してみると、”text”を指定した欄では文字が、”password”を指定した欄では黒丸が表示されました。 このようにtype属性の設定値に応じて、入力内容の表示を変えることができます。   大石ゆかり 氏名や電話番号のフォームの中に薄いグレーで文字を表示するのはどうやるんですかー？ 田島悠介 あれは、inputタグの中に「placeholder=”煌木 太郎”」って書くことで表示されるよ！ 大石ゆかり ・・・そもそもなんで入力されていない時に表示させるんですか？ 田島悠介 それはね、例を書くことでヒントになるからだよ！ 大石ゆかり なるほどっ！そう言われてみればそうですね♪   [PR] Webデザインで副業する学習方法を動画で公開中ご意見・ご感想欄の作り方 つづいて、複数の行になる長めの文章を入力する欄を作ってみましょう。 <textarea>タグ  <textarea>〜</textarea> 複数の行が入力できるテキスト欄を作ります。 rows属性 テキスト表示エリアの高さを行数で指定します。 cols属性 テキスト表示エリアの幅を文字数で指定します。   表示行数が10行、幅が60文字のご意見・ご感想入力欄を作りましょう。 <textarea>タグの間に文言を指定すると、あらかじめ入力欄に指定した文言が記入されます。 <textarea rows="10" cols="60">ここに記入してください</textarea>   ブラウザで表示すると、「ここに記入してください」の文言が入力された状態で表示されています。 「ここに記入してください」の文言を消して自由に記入してみましょう。     以下の図のように、シンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。     フォームの作成には、この他に送信ボタンの作成や、データの送信先の指定などが必要です。 用途に応じてカスタマイズしていきましょう。   今回はinputタグとtextareaタグを使ってテキスト入力欄を表示する方法についてご紹介しました。 HTMLを使ってフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。 コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、
HTML

JavaScriptで文字列を日付オブジェクトに変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列を日付オブジェクトに変換する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次inputタグの属性について文字列書式の違い入力フィールドを作成してみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで文字列を日付オブジェクトに変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに 今回は、日付形式の文字列（2020/12/01など）を、JavaScriptで日付のオブジェクトとして扱えるように変換する方法について学びます。 日付オブジェクトに変換することで様々な利点がありますので、ぜひこの機会に変換の方法と日付オブジェクトの主要な機能について学びましょう。   日付オブジェクトとは JavaScriptに標準で入っている、日付を表す組み込みオブジェクトのことです。 日時を表す文字列などを日付オブジェクトにすることで、年や曜日などを取得するような日付の処理をするメソッドが利用できます。   [PR] Webデザインで副業する学習方法を動画で公開中文字列を日付オブジェクトに変換する方法 現在の日時で日付オブジェクトを作るには、下記のように記述します。 new Date(); 日時を表す文字列から日付オブジェクトを作ることで、特定の日時の日付オブジェクトを作ることも可能です。   例えば、2020/01/01を日付オブジェクトにする場合は、下記のように記述しましょう。 new Date('2020/01/01') 日時を表す文字列は、RFCやISOで定められたフォーマットに沿ったものです。 RFCやISOは標準の仕様を決めるグループのようなものです。   定められたフォーマットは、それぞれ公開されたドキュメントで確認できるでしょう。 年と月と日は-（ハイフン）や/（スラッシュ）、もしくは半角スペースで区切ります。 時、分、秒は:（コロン）で区切ります。 下記のような感じです。 2020/01/01 16:12:20 また、「2020年1月1日」のような全角文字を含んだものは使えないことに注意が必要です。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
JavaScript

【超便利！】Excel(エクセル)でカレンダーを作成する方法

Excel(エクセル)で、年中使えるカレンダーを作りましょう。 今回は、年と月を入力すると、その月が自動で表示されるカレンダーを、Excel で作ります。 一度作成すると永久に使えます。     目次 STEP1.レイアウトを作成する STEP2.DATE 関数で日付を取得する STEP3.取得した月初日の曜日を取得する STEP4.カレンダーの最初のセルの日付を取得する STEP5.セル B3 以降を自動表示させる STEP6.日付の表示形式を変更する STEP7.当月以外の日付を非表示にする   STEP1.レイアウトを作成する 罫線を引き、曜日を入力します。 行間を整えて、カレンダーのレイアウトをしましょう。 セル A1 が年、セル C1 が月の入力欄です。   [PR] Webデザインで副業する学習方法を動画で公開中STEP2.DATE 関数で日付を取得する 2016年7月のカレンダーを作成してみましょう。 セル A1 に「2016」、セル C1 に「7」と入力します。 次に、セル E1 に DATE 関数を入力し、入力した月の月初日を取得しましょう。 年＝セル A1、月＝セル C1、日＝月初日を求めたいので、「1」です。 セル E1 に「=DATE(A1,C1,1)」と入力すると、「2016/7/1」と表示されました。   STEP3.取得した月初日の曜日を取得する DATE 関数で取得した「2016/7/1」が何曜日か、WEEKDAY 関数を使って求めましょう。 日曜日を「1」として取得される WEEKDAY 関数の結果は、以下のようになります。 日曜日：1 月曜日：2 火曜日：3 水曜日：4 木曜日：5 金曜日：6 土曜日：7 この結果数値を、仮に「曜日数値」としましょう。 セル F1 に「=WEEKDAY(E1,1)」と入力します。 曜日数値は「6」と表示されましたので、「2016/7/1」は金曜日ということです。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ
Excel

HTMLでinputタグのtype=”date”で日付を入力する方法を現役エンジニアが解説【初心者向け】

HTMLでinputタグのtype=”date”で日付を入力する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 inputタグのtype=”date”で日付を入力する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 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">   [PR] Webデザインで副業する学習方法を動画で公開中入力可能な書式 このフォームをクリックすると半角の数字が入力できるようになって年月日を直接入力できますし、あとはフォームの右側にカレンダーのようなUIが表示されてそこから日付を入力することができます。 日付を選択するUIはページを開いているブラウザやパソコン、スマホによって形式が違います。入力はある程度ルール化されているので、最終的な出力が一定になってサーバー側での日付の処理が簡単になります。   日付を入力してみよう それでは実際に日付入力をしてみましょう。以下のHTMLをコピーして任意の場所に保存します。 <html>     <head> <meta charset="utf-8">         <title>Date Form</title>     </head>     <body>         <label>             日付を入力してください             <input type="date">         </label>     </body> </html> 保存したHTMLをダブルクリックすると、以下のように入力フォームがブラウザで表示されます。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで日付の入力欄を作る方法を現役デザイナーが解説【初心者向け】