Comment utiliser le champ de type de saisie et le champ de date en HTML ?-tutoriel HTML-php.cn

Comment utiliser le champ de type de saisie et le champ de date en HTML ?

WBOY

Libérer： 2023-09-08 19:53:02

avant

1260 Les gens l'ont consulté

Comment utiliser le champ de type de saisie et le champ de date en HTML ?

Dans cet article, nous utiliserons le champ de type de saisie avec le champ de date en HTML.

Nous utilisons type="date" dans l'élément pour créer un champ de saisie qui permet à l'utilisateur de saisir une date, soit en utilisant une zone de texte qui valide la saisie, soit en utilisant une interface de sélection de date spéciale.

La valeur comprend l'année, le mois et le jour.

Grammaire

Voici la syntaxe d'utilisation des champs de type de saisie et des champs de date en HTML.

<input type="date" id="date" name="date">

Copier après la connexion

Exemple

Ce qui suit est un exemple de programme utilisant des champs de type de saisie et des champs de date en HTML.




   
      Date:
      <input type="date" id="date" name="date">

Copier après la connexion

Nous pouvons maintenant sélectionner une date dans le sélecteur de date.

Ajouter la date au champ de saisie avec plage

Nous pouvons également créer des plages de champs de saisie en utilisant les attributs max et min ainsi que les attributs de date.

Grammaire

Voici la syntaxe pour créer une plage de champs de saisie en utilisant les attributs max et min et les attributs de date.

<input type="date" name="party" min="2022-06-10" max="2024-04-30">

Copier après la connexion

Exemple

Ce qui suit est un exemple de programme pour créer une plage de champs de saisie à l'aide des attributs max et min et des attributs de date.

<!DOCTYPE html>
<html>
<body>
   <form >
      <label for="birthday">Date:</label>
      <input type="date" name="party" min="2022-06-01" max="2022-07-30">
      <input type="submit">
   </form>
</body>
</html>

Copier après la connexion

Nous pouvons voir que toutes les autres valeurs du sélecteur de date sont désactivées. et crée la plage que nous avons spécifiée dans l'exemple ci-dessus.

Dans l'exemple de programme ci-dessus, nous définissons min="2022-06-01" et max="2022-07-30". Ainsi, le sélecteur de dates est capable de sélectionner des dates dans une plage minimale et maximale. < /p>

Attribut Date comme champ obligatoire

Nous pouvons également utiliser l'attribut obligatoire du champ de saisie pour forcer le remplissage de la date. Si nous essayons de soumettre un champ de date vide, une erreur sera affichée.

Grammaire

La syntaxe suivante utilise l'attribut obligatoire du champ de saisie pour forcer le remplissage de la date.

<input type="date" name="party" min="2022-06-10" max="2024-04-30" required>

Copier après la connexion

Exemple

L'exemple suivant utilise l'attribut obligatoire d'un champ de saisie pour forcer le remplissage d'une date.

<!DOCTYPE html>
<html>
<body>
   <form >
      <label for="birthday">Date:</label>
      <input type="date" name="party" min="2022-06-01" max="2022-07-30" required>
      <input type="submit">
   </form>
</body>
</html>

Copier après la connexion

Lorsque nous essayons de soumettre une date vide dans le champ de saisie, un message d'erreur s'affiche.

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!