Como projetar formulários em CSS

Fazer sua forma esteticamente bonita é uma tarefa significativa se você quiser melhorar a experiência do usuário. Uma forma HTML é mais comumente composta por alguns campos de entrada, menus e um botão, portanto, você pode aplicar várias propriedades CSS para melhorar a aparência da forma. Vamos apresentar a você algumas maneiras que podem ser aplicadas para embelezar os formulários HTML.

Vamos começar.

Defina a largura dos campos de entrada

Todos sabemos que os campos de entrada têm certa largura por padrão, no entanto, podemos alterar a largura de acordo com o nosso desejo também. Para alterar a largura de um campo de entrada, siga o código abaixo.

Html

Introduza o primeiro nome

Aqui criamos um campo de entrada.

CSS

entrada
largura: 80%;

Estamos atribuindo ao campo de entrada uma largura de 80%.

Observação: A largura de um campo de entrada pode ser especificada em px, Em, e percentagem.

Saída

A largura do campo de entrada foi alterada de acordo com o nosso desejo.

Adicione espaço dentro dos campos de entrada

Para aprimorar o espaço dentro do campo de entrada, use a propriedade CSS Padding. Além disso, para adicionar espaço fora do campo de entrada, quando houver vários campos de entrada, ajuste a margem do campo de entrada.

CSS

input [type = text]
largura: 80%;
preenchimento: 15px 20px;
margem: 9px 0px;

Além de dar ao campo de entrada alguma largura, também demos alguns preenchimento e margens.

Saída

O espaço foi adicionado dentro e fora do campo de entrada.

Como você pode ver no código acima, usamos o tipo = texto para estilizar o campo de entrada. Existem alguns outros tipos também com base nos quais você pode estilizar os campos de entrada, como o tipo = senha (isso apenas estilizará campos de senha) ou tipo = número (este será apenas campos de número de estilo), etc.

Adicionando fronteiras aos campos de entrada

Você pode ajustar o tamanho e a cor dos campos de entrada usando as propriedades da borda CSS, além disso, para adicionar mais estilo, como cantos arredondados, usar a propriedade de Radio de Fronteira.

CSS

input [type = text]
largura: 80%;
preenchimento: 15px 20px;
margem: 9px 0px;
borda: 2px azul sólido;
Radio de fronteira: 5px;

No código acima, estamos atribuindo uma borda de 2px aos campos de entrada junto com uma cor azul. Além disso, para fazer os cantos em volta, colocamos o radiato de fronteira para 5px.

Saída

O raio de fronteira e fronteira dos campos foi ajustado de acordo com o desejo.

Outra coisa divertida que você pode fazer é adicionar apenas a borda inferior, usando a propriedade de fundo de borda como esta.

CSS

input [type = text]
largura: 80%;
preenchimento: 15px 20px;
margem: 9px 0px;
fronteira: nenhuma;
fundo de borda: 2px azul sólido;

Aqui, definimos a borda dos campos de entrada para nenhum e atribuímos uma borda inferior de 2px.

Saída

Uma borda inferior foi adicionada com sucesso.

No entanto, você notou que um esboço apareceu quando focamos no campo de entrada. E se quisermos remover isso.

Como remover o contorno do campo de entrada usando o foco

Para alterar ou definir o estilo quando um campo de entrada estiver focado, você pode usar o “:foco”Seletor e, para remover o contorno no foco de um campo de entrada, você pode utilizar o“contorno”Propriedade e defina seu valor como“nenhum”.

CSS

Input [type = text]: foco
Esboço: Nenhum;

Saída

O esboço foi removido com sucesso.

Adicione cores aos campos de entrada

Simplesmente usando as propriedades de cores, como cor e cor de fundo, você pode adicionar cores ao texto e fundo dos campos de entrada, respectivamente.

CSS

input [type = text]
largura: 80%;
preenchimento: 15px 20px;
margem: 9px 0px;
Background-Color: Bisque;
cor azul;

No código acima, estamos fornecendo uma cor bisque para o fundo dos campos de entrada e cor azul para o texto.

Saída

Nós fornecemos com sucesso um pouco de cor ao fundo e texto.

Como adicionar estilo no foco dos campos de entrada

Você pode adicionar um pouco de cor de borda ou plano de fundo ou qualquer estilo CSS aos campos de entrada no foco usando o: estado de foco, para que toda vez que o usuário clique no campo, ele recebe um determinado estilo.

CSS

Input [type = text]: foco
Background-Color: Skyblue;

A cor de fundo do campo de entrada será alterada para o Skyblue quando o usuário clicar nele.

Saída

O estilo personalizado no foco é adicionado ao campo de entrada com sucesso.

Adicionando uma imagem ou ícone no campo de entrada

Para tornar seus campos de entrada mais interessantes, você pode adicionar imagens ou ícones a eles. Aqui está como você faz isso.

CSS

input [type = text]
Imagem de fundo: URL ('Email.png ');
Posição de fundo: 10px 6px;
Size de fundo: 30px;
Repetição de fundo: sem repetição;
preenchimento: 12px 20px 12px 40px;

No código acima, primeiro adicionamos um ícone de email e ajustamos seu tamanho e posição dentro do campo de entrada usando várias propriedades CSS.

Saída

Um ícone de email foi adicionado dentro do campo de entrada com sucesso.

Adicionar estilo aos menus

Muitas vezes temos que adicionar menus em formas HTML, portanto, também é necessário estilizar. Isso pode ser feito usando algumas propriedades básicas de CSS. Aqui está um exemplo.

Html

Futebol
Grilo
Hóquei

No código acima, criamos um menu muito básico.

CSS

Selecione
largura: 80%;
preenchimento: 20px;
fronteira: nenhuma;
Radio de fronteira: 5px;
Background-Color: LightGray;

opção
estilo de fonte: itálico;
Size da fonte: 20px;

Usando algumas propriedades básicas de CSS, como borda, radio de fronteira e cor de fundo, estilizamos o menu. Além disso, também demos algum estilo às opções também.

Saída

O cardápio foi estilizado.

Adicionando estilo aos botões

Os botões são uma parte crucial de um formulário e estes podem ser projetados usando propriedades CSS. Aqui está um exemplo.

Html

Aqui simplesmente criamos um campo de entrada de tipo.

CSS

input [type = submit]
Background-Color: rosa;
intensidade da fonte: Negrito;
fronteira: nenhuma;
preenchimento: 20px 25px;
Decoração de texto: Nenhum;
margem: 6px 4px;

Usando várias propriedades CSS, como cor de fundo, peso-fonte e preenchimento, estilizamos o botão.

Saída

O botão foi estilizado.

Conclusão

Tornar sua forma html atraente é absolutamente necessária e você pode fazê -lo dando estilo a diferentes elementos que fazem parte da forma, como campos de entrada, menus ou botões. Você pode usar várias propriedades CSS para estilizar esses elementos como; largura, cor de fundo, cor, borda, radio de fronteira e muito mais. Além disso, você pode adicionar ícones ou imagens dentro de campos de entrada. Tudo isso e muito mais sobre formas de estilo no CSS é destacado neste post.