En tiempos anteriores, las tablas se utilizaron para hacer el diseño del sitio web. Hoy en día, el HTML ,

,
1. , o varios otros elementos se utilizan principalmente para crear un formulario. Estos elementos ayudan a hacer una forma atractiva sin usar tablas. Además, CSS se ha vuelto más avanzado y proporciona muchas propiedades para los elementos HTML. Usando estas propiedades, el estilo de la forma puede hacerse atractivo y organizado.

   Esta publicación proporcionará una guía gradual sobre cómo hacer un formulario HTML sin tablas usando CSS.

   Cómo crear un formulario sin tablas usando CSS?

   Se pueden utilizar varias propiedades CSS y elementos HTML para crear un formulario. Examine el ejemplo a continuación, que demuestra una guía gradual para crear un formulario sin tablas.

   Paso 1: Agregar elemento "Formulario"

   En HTML, agregue un ""Etiqueta y asigna una clase"formulario principal". Luego, agregue el "

   "Elemento entre el elemento" "para incluir un encabezado al documento. Luego, agregue un HTML "Elemento para crear un formulario:

   
   

   Formulario de registro de estudiantes

   
   

   
   

   
   Paso 2: Agregar elemento "FieldSet"

   Después de eso, entre la apertura y el cierre ""Etiquetas, coloque el""Elemento con un"identificación" atributo "información personal". Dentro de él, agregue el "" elemento:

   
   

   Informacion personal

   
   

   
   Aquí:

   • • El "El elemento se utiliza para agrupar los elementos de formulario. Dibuja una línea alrededor de los elementos grupales.
     • El ""El elemento se utiliza para aplicar un subtítulo al elemento" ".

   Producción

   
   Paso 3: Agregar elementos de formulario

   Agregaremos elementos de formulario dentro del ""Elemento usando las etiquetas enumeradas:

   • • Primero, agregue un HTML "
       "Etiqueta que marcará los números de secuencia antes de los elementos de la lista.
       1. Dentro de la lista ordenada, agregue el contenido del formulario como una lista.
       2. Cada una de las "
       3. "Elementos contiene el"" y ""Elementos. Tenga en cuenta que el elemento ""para"Y el" "elemento"identificaciónLos atributos deben tener el mismo valor:

   
   
   1. 
      Nombre de pila:
      
      
   
   
   2. 
      Apellido:
      
      
   
   
   3. 
      DIRECCIÓN:
      
      
   
   
   4. 
      Código Postal:
      
      
   
   
   5. 
      Teléfono:
      
      
   
   
   6. 
      Dirección de correo electrónico:
      
      
   
   
   7. 
      Género:
      
      Masculino
      
      Femenino
      
      

   
   



2. 
   Cumpleaños:
   
   

La salida del código proporcionado anteriormente se muestra aquí:

Paso 4: Agregar "botón" a la formación

Agreguemos dos botones al ""Elemento para el"reiniciar" y "envío"Operaciones. Para hacerlo, agregue el ""Elemento con una identificación"botones". Dentro de esta etiqueta, agregue dos elementos de entrada con el tipo "reiniciar" y "entregar":

Los atributos asociados con los elementos de entrada se explican a continuación:

• • "tipo"Especifica el tipo de entrada, como texto, casilla de verificación, radio, reinicio o más.
  • "nombre"Define un nombre para los elementos utilizados en JavaScript para una mayor manipulación.
  • "identificación"Designa el elemento ID especial.
  • "valor"El atributo especifica el valor para el elemento. Se utiliza de manera diferente para diferentes elementos de entrada. Cuando el tipo de entrada es "reiniciar","botón", y "entregar", El valor se muestra en el botón.

La salida muestra que los botones se han creado con éxito:

Mover hacia la sección CSS, donde se aplican los elementos HTML con diferentes propiedades de estilo.

Paso 5: Elementos de estilo "todos" de estilo

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

El asterisco "*Se utiliza el símbolo para señalar todos los elementos HTML. El "Familia tipográficaSe aplica la propiedad con la lista de valores. Esta lista se especifica para garantizar que la otra fuente se aplique automáticamente si el navegador no admite la primera fuente.

Paso 6: Estilo "Formulario principal" Div

A continuación, acceda a la "div"Container que tiene clase"formulario principal"Y aplica el"color de fondo"Propiedad para establecer el color de fondo:

.formulario principal
Color de fondo: #D6E4E5;

Paso 7: Elemento de estilo "Li"

.Formulario principal li
margen: 5px;
tamaño de fuente: 18px;

El "