Cómo crear un formulario en HTML

Cómo crear un formulario en HTML

La recopilación de datos de un usuario del sitio web se puede realizar de varias formas diferentes. Los formularios en los sitios web pueden tener una función simple, como suscribir a un usuario a un boletín informativo, o un propósito más complejo, como actuar como un formulario de solicitud de empleo.





Sin embargo, una cosa que todos estos formularios simples a complejos tienen en común es HTML y más específicamente el HTML etiqueta.





Usando la etiqueta de formulario

los La etiqueta es un elemento HTML que se utiliza como contenedor para incluir otros elementos que se pueden considerar como bloques de construcción para formularios. Algunos de estos elementos fundamentales incluyen la etiqueta, la etiqueta, y la etiqueta.





los La etiqueta tiene un atributo importante que contribuye a su funcionalidad. Este atributo se llama acción y se usa para identificar el archivo al que se pasarán los datos ingresados ​​en el formulario.

Usando el ejemplo de etiqueta

|_+_|

El ejemplo anterior muestra cómo utilizar la etiqueta de formulario en sus proyectos. Una de las principales conclusiones es que si abre una etiqueta de formulario, debe recordar cerrarla. Esto creará una estructura de formulario y también garantizará que los datos ingresados ​​en el formulario se procesen correctamente.



Usando la etiqueta

los La etiqueta se utiliza para describir los datos de cada campo de entrada en un formulario. Esta etiqueta tiene un por atributo, que se utiliza para mejorar la funcionalidad de un formulario.

Relacionado: Los mejores editores HTML gratuitos en línea para probar su código





Si la identificación que se asigna al campo de entrada correspondiente coincide con el por valor en el etiqueta, ese campo de entrada se resaltará automáticamente cuando haga clic en la etiqueta.

Usando el ejemplo de etiqueta

|_+_|

En el ejemplo anterior, puede ver que el por al atributo se le asigna el valor fname . Por lo tanto, si crea un campo de entrada con el fname id, este campo se resaltará cada vez que haga clic en el Primero Nombre etiqueta.





Usando la etiqueta

En su forma más básica, el La etiqueta se puede ver como un cuadro de texto. los La etiqueta captura datos del usuario y una de sus características más importantes es la escribe atributo. los escribe El atributo indica el tipo de datos que puede recopilar este cuadro de texto.

Relacionado: Cómo crear un formulario apilado en CSS

Hay varios valores diferentes que puede asignar a la escribe atributo, pero algunos de los más populares son los siguientes.

  • Texto
  • Número
  • Correo electrónico
  • Imagen
  • Fecha
  • Caja
  • Radio
  • Contraseña

Uso de la etiqueta Ejemplo

|_+_|

los La etiqueta en el código anterior tiene tres atributos diferentes y cada uno tiene una función única. los escribe Al atributo se le asigna un valor de texto, lo que significa que el cuadro de texto solo aceptará caracteres.

los identificación El atributo es un identificador único para el cuadro de texto y es importante porque proporciona acceso a este elemento desde un archivo CSS. los nombre el atributo también es un identificador único; sin embargo, el atributo de nombre se usa para interactuar con un elemento del lado del servidor del desarrollo.

los identificación y nombre Por lo general, a los atributos se les asigna el mismo valor, ya que uno proporciona acceso a un elemento desde el lado del cliente y el otro desde el lado del servidor.

Usar el elemento de casilla de verificación

El elemento de casilla de verificación es muy exclusivo en comparación con los otros elementos que puede utilizar con el etiqueta. Permite a un usuario seleccionar una o más opciones de una lista de opciones relacionadas. Las casillas de verificación se identifican fácilmente porque están representadas por pequeñas cajas cuadradas que contienen una marca de verificación cuando se seleccionan.

Uso del ejemplo de elemento de casilla de verificación

|_+_|

En el ejemplo anterior, cada uno de los elementos de casilla de verificación tiene un atributo de valor, y esto es importante porque ayuda a distinguir cada opción de casilla de verificación de la colección. Por lo tanto, si un usuario selecciona 'Java' de las opciones anteriores, los datos lo reflejarán.

Uso de la etiqueta y los elementos de radio

los la etiqueta y los elementos de radio son similares en el sentido de que solo permiten al usuario seleccionar un valor único a la vez; por tanto, se puede decir que tienen la misma función. Sin embargo, tienen una apariencia muy diferente.

El elemento de radio está más cerca del elemento de casilla de verificación en apariencia, sin embargo, con el elemento de radio tiene círculos en lugar de cuadrados.

los La etiqueta produce lo que es esencialmente un cuadro desplegable, que permite al usuario seleccionar un solo valor.

Uso del ejemplo de etiqueta y elemento de radio

|_+_|

Usar el elemento de fecha

El elemento de fecha produce un pequeño cuadro de texto que genera un calendario cuando se hace clic en él. Utilizando fecha como tipo de entrada en sus formularios protege contra un usuario que posiblemente ingrese una fecha incorrecta, lo que puede conducir a la recopilación de datos erróneos.

Uso del ejemplo de elemento de fecha

|_+_|

Uso del elemento de correo electrónico y contraseña

Cuando un desarrollador asigna los valores de correo electrónico o contraseña al atributo de tipo de un etiqueta, cada uno produce un cuadro de texto idéntico. Sin embargo, cuando empiece a utilizar estos cuadros, las diferencias se harán evidentes.

El elemento de correo electrónico monitorea los datos ingresados ​​en el cuadro de texto y asegura que cada envío cumpla con el requisito estándar de una dirección de correo electrónico; lo que significa tener una parte local, seguida del símbolo @ y terminando con un dominio.

Uso del ejemplo de elemento de correo electrónico

|_+_|

En el ejemplo anterior, se le presenta un nuevo atributo llamado marcador de posición , y este atributo toma un valor de texto que se muestra en el cuadro de texto en gris desvaído. Este texto se utiliza para indicar los datos que se colocarán en el cuadro de texto como se ve en el ejemplo anterior.

El elemento de contraseña convierte los caracteres en asteriscos a medida que se ingresan en el cuadro de texto. Por lo tanto, si la pantalla de su computadora es visible para otras personas, no verán la contraseña que ingresó.

Uso del ejemplo del elemento de contraseña

|_+_|

Uso de la etiqueta del botón

En un formulario, generalmente hay dos tipos diferentes de botones. El primero es el botón enviar, que envía los datos ingresados ​​en el formulario al valor asignado al atributo de acción (que se encuentra en el < formulario> etiqueta).

Ejemplo de botón Enviar

|_+_|

El segundo tipo de botón que se usa generalmente en un formulario es un botón de reinicio, que borra los datos en un formulario para que el usuario pueda ingresar datos nuevos. los la etiqueta tiene un escribe atributo, que se utiliza para indicar la función del botón. En el ejemplo anterior, escribe atributo es asignar el valor enviar , por lo tanto, un botón que tiene un escribe valor de Reiniciar se utiliza para restablecer el formulario.

Ejemplo de botón de reinicio

|_+_|

Creando un formulario

Para crear un formulario simple en HTML, deberá incluir todos los elementos mencionados anteriormente en un etiqueta.

Crear un ejemplo de formulario

|_+_|

El código anterior producirá el siguiente formulario:

cómo eliminar una cuenta de aplicación de efectivo

Ahora puede crear un formulario simple en HTML

Este artículo le proporciona todas las herramientas para crear un formulario HTML funcional. Identifica las diferentes etiquetas HTML que se utilizan en la creación de formularios y explora los diferentes atributos que se pueden utilizar con estas etiquetas.

Sin embargo, la mayoría de los formularios que ve en los sitios web tienen un componente adicional; CSS, que se utiliza para dar vida a la forma y hacerla más agradable estéticamente.

Cuota Cuota Pío Correo electrónico La hoja de trucos de las propiedades esenciales de CSS3

Domina la sintaxis CSS esencial con nuestra hoja de trucos de propiedades CSS3.

Leer siguiente
Temas relacionados
  • Programación
  • HTML
  • Desarrollo web
  • Tutoriales de codificación
Sobre el Autor Kadeisha Kean(21 Artículos publicados)

Kadeisha Kean es desarrolladora de software Full-Stack y redactora técnica / tecnológica. Tiene la habilidad distintiva de simplificar algunos de los conceptos tecnológicos más complejos; produciendo material que puede ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).

Más de Kadeisha Kean

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse