En sitios web, formularios e informes ayudan a los usuarios a realizar sus tareas de manera rápida y eficiente. Los datos de resumen se presentan en los informes, mientras que los formularios se utilizan para varias tareas, incluida la recopilación de datos, la presentación de resultados de consultas, el cálculo, etc. Un formulario proporciona al cliente una manera sistemática para ingresar información en la base de datos y alterar directamente los datos en estructuras de base de datos como tablas.

Este artículo se trata de crear y diseñar formularios usando HTML y CSS.

Cómo crear un formulario en HTML?

Para crear un formulario en HTML, primero, utilice el ""Elemento en HTML y luego agregar y elementos.

Para implicaciones prácticas, siga las instrucciones dadas.

Paso 1: Agregar encabezado
Con el fin de insertar un encabezado en un documento HTML, use cualquier etiqueta de encabezado de "

" a "

". En este escenario, hemos usado el

etiqueta.

Paso 2: Crear forma
A continuación, cree un formulario con la ayuda del "Elemento "y agregar los componentes de formulario.

Paso 3: Agregar etiqueta en forma
Después de eso, inserte el ""Etiqueta dentro del formulario que representa un título para un elemento en una interfaz de usuario. Además, agregue el "para"Atributo dentro del""Eso se utiliza para referirse a la ID del elemento asociado con esta etiqueta. Para hacerlo, el valor del atributo "para" en la etiqueta de etiqueta y el valor del atributo "ID" de ""Debería ser lo mismo.

Paso 4: Hacer el campo de entrada
Para agregar el campo de entrada en el formulario, use el "" elemento. Este elemento representa un campo de datos tipado, generalmente con un control de formulario para permitir al usuario editar los datos. Dentro de la etiqueta de entrada, agregue los siguientes atributos enumerados a continuación:

• El "tipoEl atributo se utiliza para controlar el tipo de datos (y el control asociado) del elemento. Existen múltiples valores posibles para este atributo, incluyendo "texto","número","fecha","contraseña", y muchos más.
• "identificación"El atributo/propiedad describe una ID única para un elemento HTML.

Paso 5: Haz un botón
Para agregar el botón en el formulario, utilice el HTML "El elemento y el texto de incrustación para mostrar en el botón:

Complete éste formulario

Nombre de pila



Apellido



Tu Dob



Categoría de trabajo



Tu país



Entregar

Se puede ver que la forma se ha creado con éxito en el HTML:

Avanzar hacia la siguiente sección si desea diseñar el formulario.

Cómo diseñar un formulario utilizando propiedades CSS?

Para diseñar el formulario, hay varias propiedades CSS disponibles. Para hacerlo, acceda a la forma y al estilo que se desee.

Paso 1: diseñe la forma
Acceda al formulario en CSS y aplique las siguientes propiedades:

forma
borde: 3px verde punteado;
margen: 30px 80px;
relleno: 20px;
Text-Align: Center;
Color de fondo: RGB (194, 241, 194);

Aquí:

• "borde"La propiedad CSS asigna un límite alrededor del elemento definido.
• "margen"Define un espacio fuera de la frontera.
• "relleno"Determina el espacio en blanco alrededor del elemento dentro del límite definido.
• "texto alineado"La propiedad se utiliza para establecer la alineación del texto como"centro".
• "color de fondo"Define el color de la parte posterior del límite.

Producción

Paso 2: Aplicar un estilo en "Etiqueta"
Ahora, acceda al "etiqueta"Y aplique las propiedades CSS mencionadas:

etiqueta
color azul;
estilo de fuente: cursiva;

Según el fragmento de código anterior:

• "color"La propiedad establece el color para el texto. Para ese propósito, el valor de la propiedad especificada se establece como "azul".
• "Estilo de fuenteLa propiedad especifica una fuente particular para los datos de la etiqueta.

Producción

Paso 3: elemento de estilo "entrada" de estilo
Ahora, acceda al "aporte"Elemento con el":flotar"Pseudo Selector:

Entrada: Hover
Color de fondo: RGB (247, 202, 143);
color verde;

Después de eso, aplique "color de fondo"Para configurar el color en la parte posterior del campo de entrada y"color"Propiedad para definir el color del texto en el campo.

Producción

Se trata de crear y diseñar el formulario en HTML/CSS.

Conclusión

Para crear y diseñar la forma, primero, utilice el ""Elemento con el propósito de crear un formulario en HTML. Entonces, usa "" y ""Elementos para insertar etiquetas y campos de entrada dentro del formulario. Después de eso, acceda al formulario y aplique el estilo con la ayuda de las propiedades CSS, que incluyen "color de fondo","margen"," Frontera "y muchos más, según su elección. Esta publicación explicó el método para crear y diseñar el formulario en HTML y CSS.