Em tempos anteriores, as tabelas foram utilizadas para fazer o layout do site. Hoje em dia, o html ,

,
1. , ou vários outros elementos são usados ​​principalmente para criar um formulário. Esses elementos ajudam a criar uma forma atraente sem usar tabelas. Além disso, o CSS se tornou mais avançado e fornece muitas propriedades para elementos HTML. Usando essas propriedades, o estilo do formulário pode ser tornado atraente e organizado.

   Esta postagem fornecerá um guia gradual sobre como fazer um formulário HTML sem tabelas usando CSS.

   Como criar um formulário sem tabelas usando CSS?

   Várias propriedades CSS e elementos HTML podem ser utilizados para criar um formulário. Examine o exemplo abaixo, que demonstra um guia passo a passo para criar um formulário sem tabelas.

   Etapa 1: Adicione o elemento "forma"

   Em html, adicione um “”Tag e atribua uma classe“formulário-principal”. Então, adicione o “

   ”Elemento entre o elemento“ ”para incluir um caminho para o documento. Então, adicione um html “”Elemento para criar um formulário:

   
   

   Formulário de registro de alunos

   
   

   
   

   
   Etapa 2: Adicione o elemento “Fieldset”

   Depois disso, entre a abertura e o fechamento “”Tags, coloque o“”Elemento com um“eu ia”Atributo“informação pessoal”. Dentro dele, adicione o “" elemento:

   
   

   Informações pessoais

   
   

   
   Aqui:

   • • O "”O elemento é utilizado para agrupar os elementos do formulário. Ele desenha uma linha ao redor dos elementos do grupo.
     • O "”O elemento é utilizado para aplicar uma legenda ao elemento“ ”.

   Saída

   
   Etapa 3: Adicione itens de formulário

   Vamos adicionar itens de formulário dentro do “”Elemento usando as tags listadas:

   • • Primeiro, adicione um html “
       ”Tag que marcará os números de sequência antes dos itens da lista.
       1. Dentro da lista ordenada, adicione o conteúdo do formulário como uma lista.
       2. Cada um dos "
       3. ”Elementos contém o“" e "”Elementos. Observe que o elemento “” é “para"E o elemento" "do"eu ia”Os atributos devem ter o mesmo valor:

   
   
   1. 
      Primeiro nome:
      
      
   
   
   2. 
      Sobrenome:
      
      
   
   
   3. 
      Endereço:
      
      
   
   
   4. 
      Código postal:
      
      
   
   
   5. 
      Telefone:
      
      
   
   
   6. 
      Endereço de email:
      
      
   
   
   7. 
      Gênero:
      
      Macho
      
      Fêmea
      
      

   
   



2. 
   Aniversário:
   
   

A saída do código fornecido acima é mostrado aqui:

Etapa 4: adicione "botão" para formar

Vamos adicionar dois botões ao “”Elemento para o“reiniciar" e "submissão" operações. Para fazer isso, adicione o “”Elemento com um ID“botões”. Dentro desta tag, adicione dois elementos de entrada com o tipo “reiniciar" e "enviar”:

Os atributos associados aos elementos de entrada são explicados abaixo:

• • ““tipo”Especifica o tipo de entrada, como texto, caixa de seleção, rádio, redefinição ou mais.
  • ““nome”Define um nome para os elementos utilizados em JavaScript para manipulação adicional.
  • ““eu ia”Designa o elemento ID especial.
  • ““valor”Atributo especifica o valor para o elemento. É utilizado de maneira diferente para diferentes elementos de entrada. Quando o tipo de entrada é “reiniciar","botão", e "enviar”, O valor é exibido no botão.

A saída mostra que os botões foram criados com sucesso:

Mova -se em direção à seção CSS, onde os elementos HTML são aplicados com diferentes propriedades de estilo.

Etapa 5: Estilo "todos" elementos

*
Font-Family: Georgia, 'Times New Roman', Times, Serif;

O asterisco “*”O símbolo é usado para apontar para todos os elementos HTML. O "família de fontes”Propriedade com a lista de valores é aplicada. Esta lista é especificada para garantir que a outra fonte seja aplicada automaticamente se o navegador não suportar a primeira fonte.

Etapa 6: estilo “formulário-main” div

Em seguida, acesse o “div”Contêiner com classe“formulário-principal”E aplique o“cor de fundo”Propriedade para definir a cor do fundo:

.Formulário
Background-Color: #D6E4E5;

Etapa 7: estilo "LI" elemento

.formulário-main li
margem: 5px;
Size da fonte: 18px;

O "