Nous avons certains champs à retrouver rapidement en HTML avec les formulaires Web, comme les champs d'heure et de date. Nous avons utilisé ces champs dans des systèmes de réservation tels que la réservation de billets en ligne, la réservation de commandes, etc. La plupart du temps, nous avons utilisé le champ commun comme « date » dans certains langages de script comme javascript en utilisant les fonctions de sélecteur de date. Il est principalement utilisé pour un calendrier pour choisir une date dans les colonnes de la zone de texte. En HTML5, nous avons choisi certains navigateurs spécifiés comme les versions Opera et Google Chrome qui prennent entièrement en charge les écrans du navigateur utilisateur. Parfois, les zones de texte avec des colonnes contenant des formats de dates et d'heure valides reconnaissent la version HTML5 comme appropriée.
Syntaxe :
Nous avons une syntaxe pour suivre les modèles HTML dtd en général afin que les pages Web s'affichent correctement en fonction des exigences des utilisateurs.
<html> <body> <input type="date" id="1" name="first" value="yyyy-month-date"> -----some codes--- </body> </html>
Les codes ci-dessus sont les codes HTML de base avec les champs de format de date dans les pages Web. La balise est l'une des balises HTML utilisées pour créer les champs de saisie comme la saisie utilisateur ou les entrées personnalisées dans les pages Web.
Le type de saisie de date est l'élément de formulaire ; il permet à l'utilisateur de capturer les données de l'écran utilisateur à l'aide d'une implémentation de sélecteur de date. L'utilisation d'un sélecteur de date dépend du fournisseur, comme les navigateurs, mais html5 n'est spécifié à aucun fournisseur sur la manière d'implémenter les entrées utilisateur à l'écran. Nous pouvons utiliser le
De plus, nous pouvons inclure des attributs tels qu'un format étape par journée pour valider la façon dont une date peut être incrémentée. La valeur par défaut est 1. Nous pouvons également valider la prise en charge du navigateur pour les types de saisie de date. De même, HTML possède certaines fonctionnalités pour chaque balise et attribut ; quelque chose de date a quelques fonctionnalités pour les types d'entrée en HTML.
Les navigateurs Firefox et Safari prennent en charge un type de saisie sous forme de texte brut, sans formatage unique ni interactions spéciales. Dans Microsoft, les navigateurs Edge n'ont pas de fonctionnalités ou d'interactions spéciales même si le champ de saisie semble être formaté en lecture seule sur les écrans du navigateur de l'utilisateur. Comme Chrome et Opera, d'autres navigateurs peuvent avoir des implémentations similaires dans lesquelles la valeur de l'espace réservé à la date est affichée en fonction des paramètres du navigateur ou du système de l'utilisateur. Cela peut inclure des paramètres liés au format de date et à d'autres configurations du système.
Les applications définiront généralement certains contrôles pour les utilisateurs afin de permettre aux champs de texte de saisie clairs et à certains autres formats tels que les flèches de monter et descendre entre les valeurs et d'utiliser une flèche qui sera sélectionnée ; il existe d'autres moteurs Web, tels que les outils « pseudo-sélecteurs préfixés WebKit », qui sont utilisés pour permettre de modifier les vues apparaissant sur les écrans du navigateur.
Tous les navigateurs prennent en charge les types de saisie tels que la date en utilisant les attributs minimum et maximum. Lorsque vous utilisez les navigateurs Chrome et Opera, prenez en charge l'ensemble d'attributs activés. Cependant, si l'utilisateur définit des valeurs pour un seul attribut, l'écran frontal peut ne pas s'afficher correctement. Ces navigateurs prendront en charge le type de saisie de date en utilisant les flèches haut et bas pour modifier les valeurs dans les zones de texte en utilisant des formats tels que d-m-year.
Si l'utilisateur met en surbrillance le curseur du côté de l'année et clique sur les flèches vers le bas, l'année passera automatiquement à la liste des valeurs affichées dans le cycle des flèches dans les zones de liste. Il nécessite des valeurs valides et aucune valeur maximale n'a été définie ; la valeur par défaut sera utilisée. C'est la même chose dans les valeurs maximales maximales affichées dans les zones de liste ; lorsque nous utilisons des applications mobiles comme Android, cela modifiera les valeurs dans les sélecteurs de date.
C'est l'un des types d'entrée essentiels en HTML ; cela donnera à l'utilisateur l'entrée au format de date. Même si nous utilisons des navigateurs comme Chrome et Opera pour satisfaire la condition du sélecteur de date sur le bureau de l'utilisateur, les styles comme CSS ne satisfont pas aux conditions. Cela semble normal sur la page Web ; l'utilisation de certains éléments de style CSS dans le document alignera et concevra les vues en fonction des perceptions des utilisateurs. Nous pouvons également désactiver les sélecteurs de date dans les navigateurs des utilisateurs ; si nous voulons activer et mettre en œuvre les nôtres, nous le ferons sur le Web, mais les appareils mobiles auront un accès restreint.
Voici les différents exemples de Date en HTML.
Code :
<html> <body> <form action="sample.html"> Dates: <input type="date" name="first"> <input type="submit"> </form> </body> </html>
Sortie :
Code :
<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>Sortie :
Code :
<html>
<body>
<p id="sample"></p>
<script>
var dates = new Date();
document.getElementById("sample").innerHTML = dates;
</script>
</body>
</html>Sortie :
Les deux premiers exemples utiliseront les étiquettes et les zones de texte pour afficher le contenu de la date sur les pages Web. Le dernier exemple utilisera les fonctions javascript pour appeler automatiquement les fonctions de date jusqu'à la date ; si nous utilisons d'autres styles dans les fonctions, nous l'utilisons pour mettre en évidence les pages Web, nous utiliserons la fonction de date comme mm-jj-aa ou jj-mm-aa ou aa-mm-jj ou aa-jj-mm dans l'un des deux ces formats sont basés sur les besoins de l'utilisateur lorsque nous utilisons d'autres bibliothèques appelées jquery, etc. les bibliothèques utilisées à la fois à des fins utilisateur (front-end) et back-end.
Les développeurs utilisent le type « date » pour créer des éléments d'entrée personnalisés lorsqu'ils travaillent avec HTML. Cette fonctionnalité permet aux utilisateurs de saisir une date via des zones de texte ou une fonction « sélecteur de date ». Les développeurs doivent valider le format de date et garantir la compatibilité du navigateur lors de l'utilisation des zones de texte. Cependant, la fonction de sélecteur de date ne nécessite aucune validation et peut être facilement intégrée au code HTML.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
