So fügen Sie mit HTML einen DatePicker -Formular mit HTML hinzu

Formulare sind ein wichtiges und gemeinsames Instrument für jede Anwendung. Sie umfassen Eingabefelder wie Name, Geschlecht, E -Mail und vieles mehr. Verschiedene Formulare verwenden einen DatePicker, um die Datumstypeingänge auszufüllen. Ein DatePicker ist ein Widget, das den Benutzern mit der Einrichtung hilft, ein Datum auszuwählen, ohne es manuell zu tippen. Es wird normalerweise in Formularen verwendet, um die Benutzerfreundlichkeit beim Hinzufügen von Daten zum Formular zu unterstützen.

In diesem Artikel wird Sie mithilfe von HTML zum Hinzufügen von Datumspitzen in Form von HTML addieren.

So fügen Sie mit HTML DatePicker in Form hinzu?

Die Syntax zum Hinzufügen eines DatePickers in das Formular wird wie folgt angegeben:

Hier werden sowohl der Eingangsfeldtyp als auch die ID als “festgelegtDatum”.

Beispiel: Hinzufügen eines DatePicker -Formulars mit HTML

Fügen Sie in der HTML -Datei ein DIV -Element mit der "hinzu"Hauptinhalt" Klassenname. Innerhalb dieses Divs:

• Fügen Sie eine weitere Div mit dem "hinzu"Form-Inhalt" Klasse.
• Fügen Sie dann ein HTML -Element hinzu, das die Eingangsfelder für Name und Geburtsdatum hält.
• Das Etikettelement umgibt diese Eingangsfelder.
• 
  Tags werden angegeben, um Zeilenpausen hinzuzufügen.
• Zuletzt fügen Sie Element hinzu, um eine Schaltfläche im Formular zu erstellen:

Gib deinen Namen ein






Gib dein Geburtsdatum ein






Einreichen

Gehen Sie nun zum CSS -Abschnitt über, um die Elemente zu stylen.

Stil „Körper“ Element

Körper
Hintergrundfarbe: #7d6e83;

Der Körperabschnitt wird mit dem angewendetHintergrundfarbe”Eigenschaft, um ihre Hintergrundfarbe festzulegen.

Stil „Hauptkontent“ div

.Hauptinhalt
Hintergrundfarbe: #DFD3C3;
Breite: 450px;
Höhe: 300px;
Polsterung: 8px;
Padding-Top: 5px;
Border-Radius: 10px;
Rand: Auto;
Schriftgröße: 18px;

Der ".Hauptinhalt”Bezieht sich auf den Div-Hauptkontent. Im Folgenden finden Sie die Eigenschaften, die darauf angewendet werden:

• “HintergrundfarbeDie Eigenschaft legt die Hintergrundfarbe des Elements fest.
• “BreiteEigenschaft legt die Breite des Elements fest.
• “HöheEigenschaft legt die Höhe des Elements fest.
• “PolsterungDie Eigenschaft legt Platz um den Inhalt des Elements oder innerhalb des Randes.
• “PolsterungDie Eigenschaft verleiht Platz oben im Inhalt des Elements.
• “Grenzradius”Eigenschaft macht die Kanten des Elements rund.
• “RandEigenschaft fügt Platz um das Element um.
• “SchriftgrößeDie Eigenschaft wird verwendet, um die Schriftgröße festzulegen.

Stil „Form-Inhalt“ div

.Form-Inhalt
Breite: 400px;
Rand: 70px Auto;

Stil „Eingabe“ Element

Eingabe
Polsterung: 5px;
Rand: Auto;
Breite: 250px;

Stil „Button“ Element

Taste
Breite: 260px;
Polsterung: 10px;
Hintergrundfarbe: #7d6e83;
Border-Radius: 8px;
Farbe: Floralwhite;
Schriftgröße: 20px;
Box-Shadow: 1px 1px 1px 1px grau;
Übergang: alle 0.3s Leichtigkeit;

Die auf das Element angewendeten Stylingeigenschaften werden nachstehend erläutert:

• “FarbeEigenschaft gibt die Schriftfarbe an.
• “Box Schatten”Eigenschaft wendet den Schatten auf das Element mit Werten für X-Offset, Y-Offset, Unschärfe, Ausbreitung und Farbe an.
• “ÜbergangEigenschaften werden verwendet, um die Eigenschaften des Elements reibungslos zu ändern. Es gibt die Eigenschaftswerte an, auf die es angewendet wird, seine Dauer und ihren Typ. In unserem Fall, "Leichtigkeit”Wird verwendet, um den Übergang des Elements anzugeben, um langsam, dann schnell und langsam am Ende zu beginnen.

Stylen Sie das Element "Button" auf "Hover"

Taste: Hover
Transformation: Translate (3px, 3px);

Die Taste mit der “angewendet“verwandeln”Eigenschaft mit dem Wert als"übersetzen (3px, 3px)”Wird das Element in den X-Achse- und y-Achse-Ordinaten bewegen.

Hier ist das letzte Aussehen der Form:

Es kann beobachtet werden, dass der Datumspicker dem Formular erfolgreich hinzugefügt wurde.

Abschluss

Ein DatePicker ist den Datumsangaben -Feldern zugeordnet, in denen der Benutzer ein Datum auswählen kann. Es bietet einem Benutzer mit Leichtigkeit. Zu diesem Zweck sind dem Attribut Eingabelemente verknüpft “Datum"Typ wie dieses" . Dieser Beitrag hat gezeigt, wie ein Datumspunkt in Form mit HTML hinzugefügt wird.