Heim >Web-Frontend >HTML-Tutorial >Wie verwende ich den Monatseingabetyp in HTML?
Wie verwende ich den Monatseingabetyp in HTML?
- PHPznach vorne
- 2023-08-20 20:21:16973Durchsuche
In HTML besteht ein Formular aus verschiedenen Elementen, die bei der Erstellung einer Benutzeroberfläche auf einer Webseite helfen, mit der wir verschiedene Naturelemente erfassen können.
Eines der am häufigsten verwendeten Steuerelemente ist das Monat-Steuerelement, d. h.
Dieses Steuerelement stellt dem Benutzer grundsätzlich ein kalenderähnliches Dropdown-Menü zur Verfügung, aus dem der Benutzer den Monat und das Jahr auswählen oder auswählen kann. Mit dem Steuerelement „Monat“ können Sie ein Datum im Format JJJJ-MM auswählen, wobei JJJJ für das Jahr und MM für den Monat steht. Sehen wir uns ein einfaches Beispiel mit dem
Month-Steuerelement an. Beispiel
<html>
<body>
<form name="form1">
<label for="adm">Date of Admission:</label>
<input type="month" name="doa">
</form>
</body>
</html>
Wenn Sie den oben angegebenen Code ausführen, wird auf der Seite eine Monatskontrolle angezeigt.
Wenn Sie auf das Kalendersymbol auf der rechten Seite des Steuerelements klicken, wird der vollständige Monatskalender wie folgt geöffnet: −
Sobald sich das Dropdown-Menü öffnet, können Sie den Monat und das Jahr aus dem Kalender auswählen oder den Monat und das Jahr im Steuerelement eingeben.
Sobald der Monat und das Jahr ausgewählt sind, werden sie als Wert vom Typ „String“ gespeichert.
Lassen Sie uns ein Programm erstellen, um mithilfe von JavaScript den ausgewählten Monat und das ausgewählte Jahr aus dem Steuerelement anzuzeigen.
Beispiel
<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>
In diesem Programm haben wir das Tag <script> verwendet, um JavaScript-Code zu schreiben, in dem eine Funktion erstellt wird, um den ausgewählten Monat anzuzeigen, wenn das Ereignis onchange() ausgelöst wird, wenn ein Datumswert aus dem Steuerelement ausgewählt wird .document.write() zeigt den Wert auf der nächsten Seite an. Wir haben das Aufnahmedatum in der formatierten Ausgabe angezeigt, indem wir <HTML> verwendet haben </script>
Der Datumswert wird im Format JJJJ-MM angezeigt.
Wir können die Ausgabe auch anzeigen, wenn auf die Schaltfläche „Senden“ geklickt wird. In diesem Fall verwenden wir das onclick()-Ereignis der Submit-Schaltfläche anstelle von onchange(). Beispiel
<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>
Wir können auch den Standardwert für Monat und Jahr festlegen, der beim Laden der Webseite im Browser angezeigt werden soll. Dazu können wir das Wertattribut im verwenden
<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>
Sobald dieses Programm ausgeführt wird, wird „Dezember 1980“ als Standardwert in der Monatssteuerung angezeigt.
Dann kommt der sehr interessante Teil, nämlich das Festlegen des Datumsbereichs, was bedeutet, dass der Benutzer nur Datumswerte innerhalb des Bereichs eingeben kann, andernfalls zeigt das Programm eine Fehlermeldung an.
Beispiel
<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>
In diesem Programm können Sie beobachten, dass nur der Monat Dezember (Jahr 1980) aktiv ist und andere deaktiviert sind. Wenn Sie das Jahr 1981 eingeben, werden Ihnen ebenfalls Monate bis November angezeigt, da wir den Bereich festgelegt haben.
Wenn der Benutzer den ungültigen Monats- oder Jahresnamen eingibt, wird eine Fehlermeldung wie diese angezeigt: −
Wir können auch das Schrittattribut verwenden, mit dem wir beim Festlegen des Datumsbereichs einige Monate für das angegebene Jahr überspringen können. Schauen Sie sich das unten gezeigte Beispiel eines Veranstaltungsregistrierungsformulars an, bei dem davon ausgegangen wird, dass eine bestimmte Veranstaltung in bestimmte Monate fällt.Beispiel
<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>
Das obige ist der detaillierte Inhalt vonWie verwende ich den Monatseingabetyp in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!