Come aggiungere un datapicker nel modulo usando html

I moduli sono uno strumento importante e comune per qualsiasi applicazione. Comprendono campi di input come nome, genere, e -mail e molti altri. Vari moduli utilizzano un datapicker per compilare gli ingressi del tipo di data. Un datapicker è un widget che aiuta gli utenti con la struttura a scegliere un appuntamento senza digitarlo manualmente. Viene solitamente utilizzato nei moduli per aiutare la facilità dell'utente nell'aggiunta di date al modulo.

Questo articolo ti guiderà su come aggiungere DatePicker nel modulo usando HTML.

Come aggiungere datepicker nel modulo usando html?

La sintassi per aggiungere un datapicker nel modulo è data come segue:

Qui, sia il tipo di campo di input che l'ID sono impostati come "data".

Esempio: aggiunta di un datapicker nel modulo utilizzando HTML

Nel file HTML, aggiungi un elemento div con "contenuto principale" nome della classe. All'interno di questo div:

• Aggiungi un altro div con il "contento forma" classe.
• Quindi, aggiungi un elemento HTML che contiene i campi di input per il nome e la data di nascita.
• L'elemento dell'etichetta circonda questi campi di input.
• 
  I tag sono specificati per aggiungere interruzioni della riga.
• Infine, aggiungi elemento per creare un pulsante sul modulo:

Inserisci il tuo nome






Inserisci la tua data di nascita






Invia

Ora, passa alla sezione CSS per modellare gli elementi.

Elemento "corpo" di stile

corpo
background-color: #7d6e83;

La sezione del corpo viene applicata con "colore di sfondo"Proprietà per impostare il suo colore di sfondo.

Stile "Main-Content" Div

.contenuto principale
Background-color: #dfd3c3;
larghezza: 450px;
Altezza: 300px;
imbottitura: 8px;
imbottitura: 5px;
raggio di confine: 10px;
Margine: auto;
Font-size: 18px;

IL ".contenuto principale"Si riferisce al contenuto principale Div. Di seguito sono riportate le proprietà applicate ad esso:

• "colore di sfondo"La proprietà imposta il colore di sfondo dell'elemento.
• "larghezza"La proprietà imposta la larghezza dell'elemento.
• "altezza"La proprietà imposta l'altezza dell'elemento.
• "imbottitura"La proprietà imposta spazio attorno al contenuto dell'elemento o all'interno del bordo.
• "imbottitura"La proprietà aggiunge spazio alla parte superiore del contenuto dell'elemento.
• "raggio di confine"La proprietà rende i bordi dell'elemento.
• "margine"La proprietà aggiunge spazio attorno all'elemento.
• "dimensione del font"La proprietà viene utilizzata per impostare la dimensione del carattere.

Stile "Content da forma"

.Form-Content
larghezza: 400px;
Margine: 70px Auto;

Elemento "input" di stile

Input
imbottitura: 5px;
Margine: auto;
larghezza: 250px;

Elemento "pulsante" di stile

Button
larghezza: 260px;
imbottitura: 10px;
background-color: #7d6e83;
raggio di frontiera: 8px;
Colore: Floralwhite;
Font-size: 20px;
Box-shadow: 1px 1px 1px 1px grigio;
Transizione: tutti 0.3s facilità;

Le proprietà di styling applicate all'elemento sono spiegate di seguito:

• "colore"La proprietà specifica il colore del carattere.
• "Box-Shadow"La proprietà applica l'ombra sull'elemento con valori per x-offset, y-offset, sfocatura, diffusione e colore.
• "transizione"La proprietà viene utilizzata per modificare le proprietà dell'elemento senza intoppi. Specifica i valori della proprietà a cui viene applicato, la sua durata e il suo tipo. Nel nostro caso, "sollievo"Viene utilizzato per specificare la transizione dell'elemento per iniziare lentamente, quindi veloce e rallenta alla fine.

STILE DI ELEMENTO "BOCK" su "Hover"

Button: Hover
trasformazione: traduzione (3px, 3px);

Il pulsante applicato con il “trasformare"Proprietà con il valore impostato come"Translate (3px, 3px)"Sposterà l'elemento nelle ordina dell'asse X e dell'asse Y.

Ecco l'aspetto finale della forma:

Si può osservare che il picker date è stato aggiunto con successo al modulo.

Conclusione

Un datapicker è associato ai campi di input della data in cui l'utente può selezionare una data. Fornisce facilmente un utente. Per fare ciò, gli elementi di input sono associati all'attributo "data"Tipo, come questo" . Questo post ha dimostrato come aggiungere un DatePicker in forma usando HTML.