Em sites, formulários e relatórios ajudam os usuários a realizar suas tarefas de maneira rápida e eficiente. Os dados de resumo são apresentados em relatórios, enquanto os formulários são usados ​​para várias tarefas, incluindo coleta de dados, apresentação de resultados de consultas, cálculo, etc. Um formulário fornece ao cliente uma maneira sistemática para inserir informações no banco de dados e alterar diretamente dados em estruturas de banco de dados como tabelas.

Este artigo é sobre criar e modelar formulários usando HTML e CSS.

Como criar um formulário em html?

Para criar um formulário em HTML, primeiro, utilize o “”Elemento em html e depois adicionar e elementos.

Para implicações práticas, siga as instruções fornecidas.

Etapa 1: Adicionar cabeçalho
Com o objetivo de inserir um título em um documento HTML, use qualquer tag de título de “

" para "

”. Nesse cenário, usamos o

marcação.

Etapa 2: Crie formulário
Em seguida, crie um formulário com a ajuda do “”Elemento e adicione os componentes do formulário.

Etapa 3: Adicione a etiqueta no formulário
Depois disso, insira o “”Tag dentro do formulário que representa uma legenda para um item em uma interface de usuário. Além disso, adicione o “paraAtributo dentro do “”Isso é utilizado para se referir ao ID do elemento associado a este rótulo. Para fazer isso, o valor do atributo "for" na tag de etiqueta e o valor do atributo "id" de "”Deve ser o mesmo.

Etapa 4: Faça o campo de entrada
Para adicionar o campo de entrada no formulário, use o “" elemento. Este elemento representa um campo de dados digitado, geralmente com um controle de formulário para permitir que o usuário edite os dados. Dentro da tag de entrada, adicione os seguintes atributos listados abaixo:

• O "tipo”O atributo é usado para controlar o tipo de dados (e controle associado) do elemento. Existem vários valores possíveis para este atributo, incluindo “texto","número","data","senha", e muitos mais.
• ““eu ia”Atributo/propriedades descreve um ID exclusivo para um elemento HTML.

Etapa 5: faça um botão
Para adicionar o botão no formulário, utilize o html “”Elemento e texto de incorporação para exibir no botão:

Preencha este formulário

Primeiro nome



Sobrenome



Seu DOB



Categoria de trabalho



Seu país



Enviar

Pode -se observar que o formulário foi criado com sucesso no HTML:

Mova -se em direção à próxima seção se quiser estilizar o formulário.

Como estilizar um formulário usando propriedades CSS?

Para estilizar o formulário, existem várias propriedades CSS disponíveis. Para fazer isso, acesse a forma e estilizá -lo como desejado.

Etapa 1: estilize o formulário
Acesse o formulário no CSS e aplique as seguintes propriedades:

forma
Fronteira: 3px verde pontilhado;
margem: 30px 80px;
preenchimento: 20px;
Alinhamento de texto: centro;
Background-Color: RGB (194, 241, 194);

Aqui:

• ““fronteiraA propriedade CSS aloca um limite ao redor do elemento definido.
• ““margem”Define um espaço fora da fronteira.
• ““preenchimento”Determina o espaço em branco ao redor do elemento dentro do limite definido.
• ““alinhamento de texto”A propriedade é usada para definir o alinhamento do texto como“Centro”.
• ““cor de fundo”Define a cor da parte traseira do limite.

Saída

Etapa 2: aplique o estilo em "Rótulo"
Agora, acesse o “rótulo”E aplique propriedades CSS mencionadas:

rótulo
cor azul;
estilo de fonte: itálico;

De acordo com o trecho acima do código:

• ““cor”Propriedade define a cor do texto. Para esse fim, o valor da propriedade especificado é definido como “azul”.
• ““estilo de fonte”Propriedade especifica uma fonte específica para os dados do rótulo.

Saída

Etapa 3: Elemento de “entrada” de estilo
Agora, acesse o “entrada”Elemento com o“:flutuar”Pseudo -seletor:

Entrada: Hover
Background-Color: RGB (247, 202, 143);
cor verde;

Depois disso, aplique “cor de fundo”Para definir a cor na parte traseira do campo de entrada e“cor”Propriedade para definir a cor do texto no campo.

Saída

Isso se trata de criar e estilizar o formulário em HTML/CSS.

Conclusão

Para criar e estilizar o formulário, primeiro, utilize o “”Elemento com o objetivo de criar um formulário em HTML. Então, use “" e "”Elementos para inserir rótulos e campos de entrada dentro do formulário. Depois disso, acesse o formulário e aplique o estilo com a ajuda das propriedades do CSS, incluindo “cor de fundo","margem"," Border "e muito mais, de acordo com sua escolha. Este post explicou o método para criar e modelar o formulário em HTML e CSS.