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サイトを公開できる、オンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

HTMLでformタグのaction属性に複数の送信先を指定する方法を現役エンジニアが解説【初心者向け】

HTMLでformタグのaction属性に複数の送信先を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...
HTML

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

HTMLでフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】

ここでは、HTMLの入力フォームに必要な送信ボタンの設置方法について解説していきます。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方...
HTML

HTMLのオブジェクトをグレーアウトする方法を現役エンジニアが解説【初心者向け】

HTMLのオブジェクトをグレーアウトする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
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のinput要素でパスワードの入力欄を作成する方法を以下の内容で解説しました。 inputタグで使えるパスワード属性について パスワード属性を指定したinputタグに追加できる属性 パスワード入力欄の作成方法 input要素を理解することで、パスワード入力欄に限らず様々な入力フォーム作成を実現します。 ぜひ使いこなせるように覚えておきましょう。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

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でラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。 執筆してくれたメンター メンターSS 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり inputとtextareaってこうやって使い分けるんですね〜！ 田島悠介 inputタグは、テキスト入力欄の他にもチェックボックスやファイルを送信できるボタンなども設置できるんだよ！ 大石ゆかり すごい便利なんですね〜！ありがとうございましたっ！ 田島悠介 また何でも聞いてください！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
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

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。 実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。   目次inputタグの属性について文字列書式の違い入力フィールドを作成してみよう監修してくれたメンター   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   DOMとは Document Object Modelの略で、文章の構造を表したプログラミングインターフェイスです。 平たく言うと、文章構造を表現したり操作する部品の集まりです。 ChromeなどのブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。 DOMの中には、このHTMLの要素を操作する機能も用意されています。 HTMLの要素を操作することで、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。   Document.formsプロパティとは Document.formsプロパティとは、文章を表すDocumentインターフェイスが持つプロパティの一種です。 Document.formsプロパティには、HTMLにあるformタグをすべて格納しています。 Document.formsプロパティで、formをすべて格納するため、formsと複数形のsが付いています。 Document.formsプロパティは、formタグを参照したり操作する場合に使用します。 formタグというのは、入力フォームのように、ユーザーが情報を入力する際に利用するタグです。   [PR] Webデザインで副業する方法とはDocument.formsプロパティの使い方 ここでは、基本的なDocument.formsプロパティの使い方を解説します。 基本文法 document.forms[index] 解説 Document.formsプロパティは、document.formsと記述すれば使うことができます。 [index]の部分に、インデックスを指定することが可能です。 Document.formsの返り値は、配列ではなく HTMLCollection オブジェクトです。 JavaScriptに標準で用意されてる、Documentのオブジェクトであるdocumentを利用する文法です。   form要素を取得する方法 ここでは、form要素を取得する方法を解説します。 基本コード document.forms[0] document.forms['nameのプロパティ名'] 解説 Document.formsは複数のformを格納した配列のようなオブジェクトです。 厳密に言えば配列ではなく、HTMLCollection オブジェクトと言います。 document.forms[0]のようにformを指定することで任意のform要素を取得できます。 document.forms[‘nameのプロパティ名’]というように、該当するnameのプロパティ名を指定することで、該当するnameで指定されたform要素を取得できます。   form部品を取得する方法 ここでは、form部品を取得する方法を解説します。 基本コード document.forms[0].elements[0] document.forms['nameのプロパティ名'].elements['nameのプロパティ名'] 解説 document.forms[0].elementsでは、formタグの中にある入力欄などの部品を取得できます。 elements[0]の位置に、inputタグのような部品が該当する場合に、document.forms[0].elements[0]でinputタグの要素が取得可能です。 Document.formsと同じようにelementsもすべてのform部品を格納したHTMLCollection オブジェクトです。 そのため任意のform部品を扱う場合は、elements[0]やelements[【inputの名前】]のように[‘nameのプロパティ名’]を指定します。   実際に書いてみよう JavaScriptでのformの操作を見るために、まずはHTMLソースに2つのformタグを記述したものを用意しました。 HTMLに存在する要素を、Document.formsで実際に取得してみましょう。 HTMLサンプルコード <form name='form1'> 1つ目のformの入力欄：<input type="text" name='input1'> <input type="number"> <input type="checkbox" name='check' value='0'>確認する </form> <form name='form2'> 2つ目のformの入力欄：<input type="text" name='input2'> </form> JavaScriptサンプルコード document.forms[0].elements[0].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms[0].elements[2].checked = true; document.forms[1].elements[0].value = '2つめのformの1つ目の入力欄に入る文字列です。' nameを利用した場合のサンプルコード document.forms['form1'].elements['input1'].value = '1つめのformの1つ目の入力欄に入る文字列です'; document.forms['form1'].elements['check'].checked = true; document.forms['form2'].elements['input2'].value = '2つめのformの1つ目の入力欄に入る文字列です。' 実行結果 See the Pen Document.forms by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 document.forms[0].elements[0].value = ‘1つめのformの1つ目の入力欄に入る文字列です’;では、document.forms[0].elements[0].valueで指定できる、HTMLの<input type=”text” name=’input1′>のvalueに、1つめのformの1つ目の入力欄に入る文字列ですを代入しています。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[0].elements[2].checked = true;では、document.forms[0].elements[2].checkedで指定できる、HTMLの<input type=”checkbox” name=’check’ value=’0′>のchecked に、trueを指定します。 checkedにtrueを指定することで、チェックボックスをチェックした状態にできます。 [0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。 document.forms[1].elements[0].value
JavaScript

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日」のような全角文字を含んだものは使えないことに注意が必要です。   変換する時の注意点 日付を表す文字列はまだ標準化されていないため、ブラウザごとに動作が異なる可能性があります。 そのためMDNのリファレンスでも非推奨とまではなっていないものの、日付を表す文字列から日付オブジェクトを作らないことをすすめています。 使用する場合は、対象のブラウザで動作を確認するようにしてみましょう。   日付文字列の動作が異なるケースとして、Chromeで下記のJavaScriptを動作させてみてください。 console.log(new Date('2020/01/01')); //Wed Jan 01 2020 00:00:00 GMT+0900 (日本標準時) console.log(new Date('2020-01-01')); //Wed Jan 01 2020 09:00:00 GMT+0900 (日本標準時) 日付の区切りをスラッシュにすると、省略した時刻は00:00となるものの、ハイフンにすると09:00となります。 ハイフンの場合だけUTC（世界標準時）と解釈され、今回実行しているパソコンが日本時刻になっているので時差の9時間が足されているという形です。   指定した日時の日付オブジェクトをつくる他の方法を2つ紹介します。 日付文字列で動作がうまくいかない際は、こちらの方法を試してみましょう。   1、下記のように第1引数に年、第2引数に月のインデックス、第3引数に日・・・というように個別の数字で指定する new Date(2020, 1, 1)   2、日付を扱うライブラリ（部品）を使う 有名なところでMoment.jsというライブラリがあります。 このライブラリでは、動作の異なる部分などを吸収してくれるだけではなく、○月○日のような全角文字のフォーマット指定も可能です。   日付オブジェクトで使える便利なメソッド 日付オブジェクトに変換した後は、日付オブジェクトに用意されている便利なメソッドを使うことができます。 以下、主要なメソッドを説明します。   年、月など特定の値を取得するメソッド getFullYear()やgetMonth()などを使うと、年や月を取得できます。 let dateObject = new Date('2025/04/01'); console.log(dateObject.getFullYear()); //console ⇒2025 console.log(dateObject.getMonth()); //console ⇒3 getMonth()は1月の場合は0、2月の場合は1です。 日付オブジェクトの月から-1された数値が返却される点に注意しましょう。   年、月など特定の値を設定するメソッド setFullYear()やsetMonth()などを使います。 let dateObject = new Date('2020/04/01'); dateObject.setFullYear(2030); console.log(dateObject); //console⇒ Mon Apr 01 2030 00:00:00 setMonth()のみ3月の場合は2、4月の場合は3と、getMonth()同様、設定したい月から-1した数値を設定する点に注意しましょう。   まとめ 今回は日付オブジェクトへの変換と用意されている主要なメソッドについて学びました。 日付に関する判定を行う際には、一度日付オブジェクトに変換して比較などを行うことができます。 また、曜日取得など便利なメソッドも多数用意されていますので、ぜひ使い方をマスターしましょう。   大石ゆかり JavaScriptで文字列を日付オブジェクトに変換する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

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をダブルクリックすると、以下のように入力フォームがブラウザで表示されます。   監修してくれたメンター メンター 三浦 モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。 好きな言語はpython, Node.js   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

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