Jak dodać DatePicker w formie za pomocą HTML

Formularze są ważnym i powszechnym narzędziem dla każdej aplikacji. Zawierają one pola wejściowe, takie jak nazwa, płeć, e -mail i wiele innych. Różne formularze wykorzystują datePicker do wypełnienia danych wejściowych typu daty. DatePicker to widżet, który pomaga użytkownikom w obiekcie wybrać jedną datę bez ręcznego pisania. Jest zwykle używany w formularzach, aby pomóc użytkownikowi w dodaniu dat do formularza.

W tym artykule poprowadzi Cię, jak dodać DatePicker w formularzu za pomocą HTML.

Jak dodać DatePicker w formie za pomocą HTML?

Składnia do dodania datePicker w formularzu jest podana w następujący sposób:

Tutaj zarówno typ wejściowy, jak i identyfikator są ustawione jako „data".

Przykład: dodanie datePicker w formularzu za pomocą HTML

W pliku HTML dodaj element DIV z „główna zawartość" Nazwa klasy. W ramach tego Div:

• Dodaj kolejny div z „CZŁONA FORMU" klasa.
• Następnie dodaj element HTML, który utrzymuje pola wejściowe dla nazwiska i daty urodzenia.
• Element etykiety otacza te pola wejściowe.
• 
  Tagi są określone, aby dodać przerwy linii.
• Na koniec dodaj element, aby utworzyć przycisk w formularzu:

Wpisz swoje imię






Podaj swoją datę urodzenia






Składać

Teraz przejdź do sekcji CSS, aby stylizować elementy.

Element „Body” stylu

ciało
kolor tła: #7d6e83;

Sekcja ciała jest stosowana za pomocą „kolor tła„Właściwość, aby ustawić kolor tła.

Styl „główny-content” div

.główna zawartość
kolor tła: #DFD3C3;
szerokość: 450px;
Wysokość: 300px;
Wyściółka: 8px;
Wyściółka: 5px;
RADIUS BRAVES: 10px;
Margines: Auto;
Rozmiar czcionki: 18px;

„„.główna zawartość”Odnosi się do głównego kontentu DIV. Poniżej znajdują się stosowane właściwości:

• "kolor tła”Właściwość ustawia kolor tła elementu.
• "szerokość„Właściwość ustawia szerokość elementu.
• "wysokość„Właściwość ustawia wysokość elementu.
• "wyściółka„Właściwość ustawia przestrzeń wokół zawartości elementu lub wewnątrz granicy.
• "Wyściółka„Właściwość dodaje przestrzeń do góry treści elementu.
• "Radiusz graniczny„Właściwość sprawia, że ​​krawędzie elementu jest okrągłe.
• "margines„Właściwość dodaje przestrzeń wokół elementu.
• "rozmiar czcionki„Właściwość jest wykorzystywana do ustawiania rozmiaru czcionki.

Styl „contrent” div

.forma Content
szerokość: 400px;
Margines: 70px Auto;

Element stylu „wejściowy”

wejście
Wyściółka: 5px;
Margines: Auto;
szerokość: 250px;

Element „guzika” stylu

przycisk
szerokość: 260px;
Wyściółka: 10px;
kolor tła: #7d6e83;
RADIUS Border: 8px;
Kolor: Floralwhite;
Rozmiar czcionki: 20px;
Box-shadow: 1px 1px 1px 1px Gray;
przejście: wszystkie 0.3s łatwość;

Właściwości stylizacji zastosowane do elementu wyjaśniono poniżej:

• "kolor„Właściwość określa kolor czcionki.
• "Shadow Box”Właściwość stosuje cień na elemencie o wartości dla X-Ofset, Y-Offset, rozmycia, rozprzestrzeniania się i koloru.
• "przemiana„Własność jest wykorzystywana do płynnej zmiany właściwości elementu. Określa wartości właściwości, do których jest stosowany, czas trwania i typ. W naszym przypadku, "łatwość”Służy do określenia przejścia elementu, aby zacząć powoli, a następnie szybko i powoli na końcu.

Styl element „przycisku” na „Władzie”

Przycisk: Hover
Transform: Tłumacz (3px, 3px);

Przycisk zastosowany za pomocą „przekształcać„Właściwość z ustawioną wartością jako„Tłumacz (3px, 3px)”Porusza element w osi x i ordinatach osi y.

Oto ostateczny wygląd formularza:

Można zauważyć, że do formy z powodzeniem dodano do formy.

Wniosek

DatePicker jest powiązany z pola wejściowe daty, w których użytkownik może wybrać datę. Z łatwością zapewnia użytkownikowi. Aby to zrobić, elementy wejściowe są powiązane z atrybutem „data”Typ, jak ten„ . Ten post pokazał, jak dodać datePicker w formularzu za pomocą HTML.