Maison > Article > interface Web > Comment utiliser le type de saisie mois en HTML ?
Comment utiliser le type de saisie mois en HTML ?
- PHPzavant
- 2023-08-20 20:21:16903parcourir
En HTML, un formulaire comprend divers éléments qui aident à créer une interface utilisateur dans une page Web à l'aide de laquelle nous pouvons collecter différentes natures de la nature.
.L'un des contrôles couramment utilisés est le contrôle Mois, c'est-à-dire
Ce contrôle fournit essentiellement à l'utilisateur un menu déroulant de type calendrier dans lequel l'utilisateur peut sélectionner ou sélectionner le mois et l'année. Le contrôle Mois permet de sélectionner une date au format AAAA-MM, où AAAA représente l'année et MM représente le mois.
Regardons un exemple simple utilisant le contrôle Mois.
Exemple
<html>
<body>
<form name="form1">
<label for="adm">Date of Admission:</label>
<input type="month" name="doa">
</form>
</body>
</html>
En exécutant le code donné ci-dessus, un contrôle mensuel sera affiché sur la page.
Lorsque vous cliquez sur l'icône du calendrier sur le côté droit du contrôle, le calendrier mensuel complet s'ouvrira comme ceci −
Une fois le menu déroulant ouvert, vous pouvez sélectionner le mois et l'année dans le calendrier, ou vous pouvez saisir le mois et l'année dans le contrôle.
Une fois le mois et l'année sélectionnés, ils seront stockés dans une valeur de type String.
Créons un programme pour afficher le mois et l'année sélectionnés à partir du contrôle à l'aide de JavaScript.
Exemple
<html>
<head>
<title>Admission Form</title>
<script>
function display(){
d=form1.doa.value;
document.write("<center><b>Date of Admission is "+d
+"</b></center>");
}
</script>
<form name="form1">
<label for="adm">Date of Admission:</label>
<input type="month" name="doa" onchange="display()">
</form>
<html>
Dans ce programme, nous avons utilisé la balise <script> pour écrire du code JavaScript dans lequel une fonction est créée pour afficher le mois sélectionné lorsque l'événement onchange() est déclenché. L'événement onchange sera déclenché lorsqu'une valeur de date est sélectionnée dans le contrôle. . document.write() affichera la valeur sur la page suivante. Nous avons affiché la date d'admission dans la sortie formatée en utilisant les balises de formatage <HTML> </script>
Il affiche la valeur de la date au format AAAA-MM.
Nous pouvons également afficher le résultat lorsque vous cliquez sur le bouton Soumettre. Dans ce cas, nous utiliserons l'événement onclick() du bouton de soumission au lieu de onchange(). Exemple
<html>
<head>
<title>Admission Form</title>
<script>
function display(){
d=form1.doa.value;
document.write("<center><b>Date of Admission is "+d
+"</b></center>");
}
</script>
<form name="form1">
<label for="adm">Date of Admission:</label>
<input type="month" name="doa">
<br>
<input type="submit" value="Submit" onclick="display()">
</form>
<html>
Nous pouvons également définir la valeur par défaut du mois et de l'année qui doivent être affichées lorsque la page Web est chargée dans le navigateur. Pour ce faire, nous pouvons utiliser l'attribut value dans la balise
<html>
<body>
<form>
<p>
Select a month: <input type="month" name="selectedmonth" value="1980-12">
<br>
<input type="submit" value="Send data">
</p>
</form>
</body>
</html>
Une fois ce programme exécuté, il affichera « Décembre 1980 » comme valeur par défaut dans le contrôle du mois.
Vient ensuite la partie très intéressante, à savoir la définition de la plage de dates, ce qui signifie que l'utilisateur ne peut saisir que des valeurs de date dans la plage, sinon le programme affichera un message d'erreur.
Exemple
<html>
<body>
<form>
<p>
Select a month: <input type="month" name="selectedmonth" value="1980-12" min="1980-12" max="1981-11">
<br>
<input type="submit" value="Send data">
</p>
</form>
</body>
</html>
Dans ce programme, vous pouvez observer que seul le mois de décembre (année 1980) est actif et que les autres sont désactivés. De même, lorsque vous tapez l'année 1981, il vous montrera les mois jusqu'en novembre car nous avons défini la plage.
Si l'utilisateur saisit un nom de mois ou d'année non valide, un message d'erreur comme celui-ci s'affichera -
Nous pouvons également utiliser l'attribut step grâce auquel nous pouvons sauter quelques mois pour l'année donnée lors de la définition de la plage de dates. Regardez l'exemple ci-dessous d'un formulaire d'inscription à un événement en supposant qu'un événement particulier tombe sous des mois spécifiques.
Exemple
<html>
<body>
<form name="form1">
<table>
<tr>
<td><label for="adm">Choose Event :</label></td>
<td><select name="event">
<option>Live Concert
<option>Olympics in Beijing
<option>World Series(Baseball)
</select>
</td>
</tr>
<tr>
<td>
<label for="adm">Available Event Dates:</label></td>
<td><input type="month" name="eventdate" step="3"></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Submit"></td>
</tr>
</form>
</body>
</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!