ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLの日付
HTMLの日付
- 王林オリジナル
- 2024-09-04 16:45:13734ブラウズ
時刻フィールドや日付フィールドなど、Web フォームを使用して HTML 内ですばやく検索できるフィールドがいくつかあります。これらのフィールドは、オンライン チケット予約や注文予約などの予約システムで使用してきました。ほとんどの場合、日付ピッカー関数を使用して、JavaScript などの一部のスクリプト言語で「日付」などの一般的なフィールドを使用しました。これは主に、カレンダーのテキスト ボックスの列で日付を選択するために使用されます。 html5 では、ユーザーのブラウザ画面を完全にサポートする、Opera や Google Chrome バージョンなどの特定のブラウザをいくつか選択しました。場合によっては、有効な日付と時刻の形式を含む列を含むテキスト ボックスが、HTML5 バージョンを適切に認識することがあります。
構文:
Web ページがユーザーの要件に合わせて適切に表示されるように、一般的に HTML dtd モデルに従うための構文がいくつかあります。
<html> <body> <input type="date" id="1" name="first" value="yyyy-month-date"> -----some codes--- </body> </html>
上記のコードは、Web ページの日付形式フィールドを含む基本的な HTML コードです。タグは、Web ページへのユーザー入力やカスタマイズされた入力などの入力フィールドを作成するために使用される HTML のタグの 1 つです。
HTML の日付の機能
日付入力タイプはフォーム要素です。これにより、ユーザーは日付ピッカー実装を使用してユーザー画面からデータをキャプチャできるようになります。日付ピッカーの使用はブラウザと同様にベンダー次第ですが、HTML5 は画面上でのユーザー入力の実装方法についてはベンダーに指定されていません。
さらに、日付がどのように増加するかを検証するために、ステップインデイ形式などの属性を含めることもあります。デフォルト値は 1 です。日付入力タイプに対するブラウザーのサポートを検証することもできます。同様に、HTML にはすべてのタグと属性にいくつかの機能があります。 something date には、HTML の入力タイプ用の機能がいくつかあります。
入力フィールド
Firefox および Safari ブラウザは、独自の書式設定や特別な操作を行わないプレーン テキストの入力タイプをサポートしています。 Microsoft では、ユーザーのブラウザ画面では入力フィールドが読み取り専用にフォーマットされているように見えても、エッジ ブラウザには特別な機能や対話機能はありません。 Chrome や Opera と同様、他のブラウザにも同様の実装があり、ユーザーのブラウザまたはシステム設定に基づいて日付プレースホルダー値が表示される場合があります。これには、日付形式やその他のシステム構成に関連する設定が含まれる場合があります。
アプリケーションは通常、ユーザーがクリア入力テキスト フィールドや矢印などの他の形式で値の間を上下に循環し、選択される矢印を使用できるようにするためのいくつかのコントロールを設定します。 「WebKit プレフィックス付き疑似セレクター」ツールのような他の Web エンジンは、ブラウザー画面に表示されるビューを変更するために使用されます。
最小属性と最大属性
すべてのブラウザは、最小属性と最大属性を使用した日付などの入力タイプをサポートしています。 Chrome および Opera ブラウザを使用する場合は、有効な属性セットをサポートします。ただし、ユーザーが 1 つの属性のみに値を設定した場合、フロントエンド画面が正しく表示されない可能性があります。これらのブラウザは、上矢印と下矢印を使用して、d-m-year などの形式を使用してテキスト ボックスの値を変更することにより、日付入力タイプをサポートします。
ユーザーが年側のカーソルを強調表示して下矢印をクリックすると、年はリスト ボックスの矢印サイクルに表示される値のリストに自動的に変更されます。有効な値が必要ですが、最大値は設定されていません。デフォルト値が使用されます。リストボックスに表示される最大値も同様です。 Android などのモバイル アプリケーションを使用すると、日付ピッカーの値が変更されます。
日付ピッカー
これは HTML の必須の入力タイプの 1 つです。ユーザー入力に日付形式が与えられます。 Chrome や Opera などのブラウザを使用してユーザーのデスクトップ上の日付ピッカーの条件を満たしたとしても、CSS などのスタイルは条件を満たしません。 Web ページでは正常に見えます。ドキュメント内でいくつかの CSS スタイル要素を使用すると、ユーザーの認識に合わせてビューが調整され、デザインされます。ユーザーのブラウザで日付ピッカーを無効にすることもできます。独自の機能を有効にして実装したい場合は、Web 上で実行しますが、モバイル デバイスではアクセスが制限されます。
HTML での日付の例
次に、HTML での日付のさまざまな例を示します。
例 #1
コード:
<html> <body> <form action="sample.html"> Dates: <input type="date" name="first"> <input type="submit"> </form> </body> </html>
出力:
例 #2
コード:
<html>
<head>
<style>
sample {
display: block;
font: 3rem;
}
sample2 {
margin: .7rem 2;
}
</style>
</head>
<body>
<div class="sample">
<label for="first">dates:</label>
<input type="date" id="names" name="first"
value="2020-02-26"
min="2020-01-01" max="2020-12-31">
</div>
</body>
</html>
出力:
例 #3
コード:
<html>
<body>
<p id="sample"></p>
<script>
var dates = new Date();
document.getElementById("sample").innerHTML = dates;
</script>
</body>
</html>
出力:
最初の 2 つの例では、Web ページに日付コンテンツを表示するためにラベルとテキスト ボックスを使用します。最後の例では、日付までの日付関数を自動的に呼び出すために JavaScript 関数を使用します。関数で他のスタイルを使用する場合は、Web ページを強調表示するために使用します。日付関数を mm-dd-yy または dd-mm-yy または yy-mm-dd または yy-dd-mm として使用します。これらの形式は、jquery などと呼ばれる他のライブラリを使用する場合のユーザー要件に基づいています。ライブラリはユーザー エンド (フロント エンド) とバック エンドの両方の目的で使用されます。
結論
開発者は、HTML を操作するときに「日付」タイプを使用してカスタマイズされた入力要素を作成します。この機能を使用すると、ユーザーはテキストボックスまたは「日付ピッカー」機能を通じて日付を入力できます。開発者は、テキストボックスを使用するときに日付形式を検証し、ブラウザーの互換性を確認する必要があります。ただし、日付ピッカー関数は検証を必要とせず、HTML コードに簡単に統合できます。
以上がHTMLの日付の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。