No desenvolvimento da Web, um formulário é usado para armazenar informações de um banco de dados de maneira organizada e convertê -lo diretamente em objetos de banco de dados, como tabelas, listas e outros. Ele também autoriza o usuário a controlar a interface do usuário coletando dados. Além disso, o usuário também pode definir o alinhamento do formulário conforme sua preferência.

Neste artigo, explicaremos:

• Método 1: Como centralizar alinhar um formulário em html?
• Método 2: Como centralizar alinhar um formulário no CSS?

Método 1: Como centralizar alinhar um formulário em html?

Você pode utilizar o “”Elemento para projetar um formulário na página HTML. Além disso, os usuários podem definir o alinhamento do formulário em HTML com a ajuda do estilo em linha.

Para centrar -se alinhando um formulário em HTML, experimente o procedimento declarado.

Etapa 1: Insira um título

Primeiro de tudo, adicione um título com a ajuda de uma etiqueta de cabeçalho HTML. Neste caso, o “

”Tag é usado.

Etapa 2: Crie um formulário

Em seguida, utilize o “”Elemento para criar um formulário na página HTML. Para fazer isso, siga as instruções dadas:

• O "estilo”O atributo é usado para definir o estilo em linha de um elemento. O atributo de estilo substituirá qualquer estilo usando as propriedades CSS diretamente no HTML. Nesse cenário, o valor do atributo "estilo" é definido como "Justify-Content: Center" e "Exibição: flex”.
• O "Justify-Content: Center”CSS em linha é empregado para posicionar o conteúdo do contêiner flexível quando eles não preenchem todo o eixo principal.
• Usando “Exibição: flex”Nos elementos raiz, os elementos filhos se alinharão automaticamente com a largura e a altura automáticas.
• Insira um “”Elemento e especifique o tipo de entrada como“texto"E o nome como"procurar”.
• ““tipo”O atributo é usado para controlar o tipo de dados do elemento de entrada.
• O "valor”Atributo determina o valor de um“" elemento. Também é usado de maneira diferente para diferentes tipos de entrada:

Preencha o formulário

Digite seu nome

Pode -se observar que o formulário é criado e alinhado em uma página HTML:

Método 2: Como centralizar alinhar um formulário no CSS?

Para centrar.

Etapa 1: faça um contêiner div

Inicialmente, faça um contêiner de div com a ajuda do “div”Elemento e adicione um atributo de classe com um nome específico.

Etapa 2: Crie um formulário

Em seguida, crie um formulário com a ajuda do “”Tag e insira o seguinte elemento entre o elemento do formulário:

• O "”O elemento fornece o rótulo para um item em uma interface de usuário.
• ““”É utilizado para criar controles interativos para formulários baseados na Web para receber dados do usuário. Para fazer isso, adicione “tipo","nome", e "espaço reservado”.
• ““espaço reservado”O atributo é utilizado para adicionar o valor no campo do formulário para exibir:

Digite seu nome:




Digite seu e-mail:

Saída

Etapa 5: formulário de estilo

Acesse o contêiner Div com a ajuda de um seletor de atributo e especifique o nome do contêiner com ele. Em seguida, aplique as propriedades CSS mencionadas no bloco de código abaixo:

.forma central
Justify-Content: Center;
exibição: flex;
margem: 40px 50px;
borda: 3px azul sólido;
preenchimento: 30px;
Background-Color: RGB (208, 205, 248);

Aqui:

• ““Justify-Content”A propriedade CSS define como o navegador distribui o espaço entre e ao redor de itens de conteúdo ao longo do eixo principal de um contêiner flexível e o eixo embutido de um recipiente de grade.
• ““mostrar”É usado para definir o comportamento de exibição de um elemento.
• ““margem”É usado para adicionar o espaço fora do limite definido ao redor do elemento.
• ““fronteira”Especifica a borda ao redor do elemento.
• ““preenchimento”Determina o espaço ao redor do elemento definido dentro do limite.
• ““cor de fundo”Define a cor de fundo na parte traseira do elemento.

Pode -se observar que o formulário está centrado alinhado:

Nós ensinamos a você o método para alinhar o formulário no centro.

Conclusão

Para centrar o alinhamento de um formulário, existem vários métodos. O primeiro é utilizar o método de estilo embutido em html. Segundo, o usuário também pode aplicar as propriedades CSS após acessar o formulário no CSS. Para fazer isso, o “Justify-Content”Propriedade com o valor“Centro" e "mostrar”Defina como“flex”São utilizados para definir o alinhamento do formulário no centro. Este post demonstrou o método para alinhar o formulário.