Hvordan legge til en datepicker i skjemaet ved hjelp av HTML

Skjemaer er et viktig og vanlig verktøy for enhver applikasjon. De består av inngangsfelt som navn, kjønn, e -post og mange flere. Ulike skjemaer bruker en datepicker for å fylle ut inndatatypeinngangene. En datepicker er en widget som hjelper brukere med anlegget til å velge en dato uten manuelt å skrive den manuelt. Det brukes vanligvis i skjemaer for å hjelpe brukeren med å legge til datoer til skjemaet.

Denne artikkelen vil guide deg om hvordan du legger til datepicker i form ved hjelp av HTML.

Hvordan du legger til datepicker i form ved hjelp av html?

Syntaksen for å legge til en datepicker i skjemaet er gitt som følger:

Her er både inngangsfelttypen og ID -en satt som "Dato”.

Eksempel: Legge til en datepicker i form ved hjelp av HTML

I HTML -filen, legg til et DIV -element med "hovedinnhold" klassenavn. Innenfor denne diven:

• Legg til en annen div med "Forminnhold”Klasse.
• Legg deretter til et HTML -element som holder inngangsfeltene for navn og fødselsdato.
• Etikettelementet omgir disse inngangsfeltene.
• 
  Tagger er spesifisert for å legge til linjeskift.
• Til slutt, legg til element for å lage en knapp på skjemaet:

Skriv inn navnet ditt






Skriv inn fødselsdatoen din






Sende inn

Gå nå videre til CSS -delen for å style elementene.

Stil "kropp" -element

kropp
Bakgrunnsfarge: #7D6E83;

Kroppsseksjonen brukes med "bakgrunnsfarge”Eiendom for å sette sin bakgrunnsfarge.

Stil “hovedinnhold” div

.hovedinnhold
Bakgrunnsfarge: #DFD3C3;
Bredde: 450px;
Høyde: 300px;
polstring: 8px;
Padding-top: 5px;
Border-Radius: 10px;
Margin: Auto;
Font-størrelse: 18px;

“.hovedinnhold”Henviser til Div hovedinnhold. Nedenfor er egenskapene som brukes på det:

• “bakgrunnsfarge”Eiendom setter elementets bakgrunnsfarge.
• “bredde”Eiendom setter elementets bredde.
• “høyde”Eiendom setter elementets høyde.
• “polstring”Eiendom setter plass rundt elementets innhold eller inne i grensen.
• “Padding-top”Eiendom gir plass til toppen av elementets innhold.
• “Border-Radius”Eiendom gjør elementets kanter rundt.
• “margin”Eiendom gir plass rundt elementet.
• “skriftstørrelse”Eiendom brukes til å angi skriftstørrelse.

Stil “form-innhold” div

.form-innhold
Bredde: 400px;
Margin: 70px Auto;

Stil “input” element

input
polstring: 5px;
Margin: Auto;
Bredde: 250px;

Stil "knapp" -element

knapp
Bredde: 260px;
polstring: 10px;
Bakgrunnsfarge: #7D6E83;
Border-Radius: 8px;
Farge: Floralwhite;
Font-størrelse: 20px;
Bokseskygge: 1px 1px 1px 1px grå;
Overgang: alle 0.3s letthet;

Stylingegenskapene som brukes på elementet blir forklart nedenfor:

• “farge”Eiendom spesifiserer skriftfargen.
• “Bokseskygge”Eiendom bruker skyggen på elementet som har verdier for X-offset, Y-offset, uskarphet, spredning og farge.
• “overgang”Eiendom brukes til å endre elementets egenskaper jevnt. Den spesifiserer eiendomsverdiene som den brukes til, dens varighet og dens type. I vårt tilfelle, “letthet”Brukes til å spesifisere elementets overgang for å starte sakte, deretter raskt og sakte på slutten.

Style “-knappen” -elementet på “Hover”

Knapp: Hopp
Transform: Oversett (3px, 3px);

Knappen påført med “forvandle”Eiendom med verdien som“oversettes (3px, 3px)”Vil flytte elementet i ordinene x-aksen og y-aksen.

Her er det siste utseendet på skjemaet:

Det kan observeres at datepickeren har blitt lagt til skjemaet med hell.

Konklusjon

En datepicker er tilknyttet datoinngangsfeltene der brukeren kan velge en dato. Det gir en bruker lett. For å gjøre det er inngangselementer assosiert med attributtet “Dato”Type, som dette” . Dette innlegget har vist hvordan du legger til en datepicker i form ved hjelp av HTML.