日付の入力フィールドを作成する - HTML
日付の入力フィールドを作成するHTMLコードを紹介します。
概要
入力フィールドで日付を入力させたい場合、テキストボックスで日付の文字列を入力する方法もありますが、形式チェック等が必要なことや、
文字列で入力するため入力しづらい点があります。この記事では、HTMLで日付専用の入力項目を作成するコードを紹介します。
書式
inputタグで次の書式を利用します。
実装例
コード
下記HTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="date" />
<input type="submit" value="Enter"/>
</form>
</body>
</html>
表示結果
作成したHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
yyyy/mm/ddが表示されている日付入力フィールドが画面に表示されています。
日付フィールドの右側のカレンダーのアイコンをクリックします。ドロップダウンウィンドウが表示され、
下図のカレンダーが表示されます。カレンダーで設定したい日付をクリックします。
カレンダーでクリックした日付がフィールドに設定されます。
なお、フィールドの数値部分でキーボードで数値を入力して日付を変更することもできます。
inputタグで日付の入力フィールドを作成できました。
実装例:デフォルトの日付を設定する場合
ページ表示時にデフォルトの日付を設定されている状態にする場合は、value属性に初期値を設定します。
コード
下記HTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="date" value="2020-06-15"/>
<input type="submit" value="Enter" />
</form>
</body>
</html>
解説
先の例と同様のコードですが、
value 属性を追加で記述し、設定したいデフォルトの日付を値に記述します。
日付の値は
yyyy-mm-dd 形式で記述します。
<input type="date" value="2020-06-15"/>
表示結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。value属性を設定しない先の例では
yyyy/mm/ddの表示でしたが、
value属性を設定することでページ表示時に日付入力フィールドのデフォルトの値を設定できます。
補足:うまく動作しない例
下記のHTMLで、valueに
yyyy-m-d 形式で値を記述した場合、ページ表示時に値が設定されないことに注意が必要です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="date" value="2020-2-4"/>
<input type="submit" value="Enter" />
</form>
</body>
</html>
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
