Como adicionar um datepicker em forma usando html

Os formulários são uma ferramenta importante e comum para qualquer aplicativo. Eles compreendem campos de entrada, como nome, gênero, email e muitos outros. Vários formulários utilizam um datepicker para preencher as entradas do tipo de data. Um datepicker é um widget que ajuda os usuários com a instalação a escolher uma data sem digitá -lo manualmente. Geralmente é usado em formulários para ajudar a facilidade do usuário na adição de datas ao formulário.

Este artigo o guiará sobre como adicionar DatePicker em formulário usando HTML.

Como adicionar datepicker em forma usando html?

A sintaxe para adicionar um datepicker no formulário é dada da seguinte forma:

Aqui, tanto o tipo de campo de entrada quanto o ID são definidos como “data”.

Exemplo: Adicionando um DatePicker em formulário usando HTML

No arquivo html, adicione um elemento div com o “conteúdo principal" nome da classe. Dentro desta div:

• Adicione outra div com o “conteúdo de formulário" aula.
• Em seguida, adicione um elemento HTML que mantém os campos de entrada para o nome e a data de nascimento.
• O elemento da etiqueta envolve esses campos de entrada.
• 
  As tags são especificadas para adicionar quebras de linha.
• Por fim, adicione o elemento para criar um botão no formulário:

Digite seu nome






Digite sua data de nascimento






Enviar

Agora, passe para a seção CSS para estilizar os elementos.

Elemento de "corpo" de estilo

corpo
Background-Color: #7D6E83;

A seção do corpo é aplicada com o “cor de fundo”Propriedade para definir sua cor de fundo.

Divis de estilo “Principal”

.conteúdo principal
Background-Color: #DFD3C3;
Largura: 450px;
Altura: 300px;
preenchimento: 8px;
Top de preenchimento: 5px;
Radio de fronteira: 10px;
margem: automático;
Size da fonte: 18px;

O ".conteúdo principal”Refere-se ao conteúdo principal da div. Abaixo estão as propriedades aplicadas a ele:

• ““cor de fundo”Propriedade define a cor de fundo do elemento.
• ““largura”Propriedade define a largura do elemento.
• ““altura”Propriedade define a altura do elemento.
• ““preenchimento”Propriedade define espaço em torno do conteúdo do elemento ou dentro da borda.
• ““Top-top”A propriedade adiciona espaço ao topo do conteúdo do elemento.
• ““Radio de fronteira”Propriedade faz as bordas do elemento redondo.
• ““margem”A propriedade adiciona espaço ao redor do elemento.
• ““tamanho da fonte”A propriedade é utilizada para definir o tamanho da fonte.

Estilo “formulário de formulário” div

.conteúdo de forma
Largura: 400px;
margem: 70px automático;

Elemento de “entrada” de estilo

entrada
preenchimento: 5px;
margem: automático;
Largura: 250px;

Elemento de "botão" de estilo

botão
Largura: 260px;
preenchimento: 10px;
Background-Color: #7D6E83;
Radio de fronteira: 8px;
Cor: floralwhite;
Size da fonte: 20px;
Shadow de caixa: 1px 1px 1px 1px cinza;
transição: tudo 0.3s facilitar;

As propriedades de estilo aplicadas ao elemento são explicadas abaixo:

• ““cor”Propriedade especifica a cor da fonte.
• ““Sombra da caixa”Propriedade aplica a sombra no elemento com valores para o X-Offset, Y-Offset, Blur, Spread e Color.
• ““transição”A propriedade é utilizada para alterar as propriedades do elemento sem problemas. Ele especifica os valores da propriedade aos quais é aplicado, sua duração e seu tipo. No nosso caso, "facilidade”É usado para especificar a transição do elemento para começar devagar, depois rápido e lento no final.

Estilize o elemento "botão" em "Passe"

Botão: Hover
Transform: traduzir (3px, 3px);

O botão aplicado com o “transformar”Propriedade com o valor definido como“Traduzir (3px, 3px)”Moverá o elemento no eixo x e o eixo y ordenar.

Aqui está a aparência final do formulário:

Pode -se observar que o datepicker foi adicionado com sucesso ao formulário.

Conclusão

Um datepicker está associado aos campos de entrada de data em que o usuário pode selecionar uma data. Ele fornece a um usuário com facilidade. Para fazer isso, os elementos de entrada estão associados ao atributo “data”Tipo, como este“ . Este post demonstrou como adicionar um DatePicker em forma usando HTML.