Una guía paso a paso para comenzar con los formularios HTML

Visión general

Los formularios HTML son necesarios cuando desea recopilar algunos datos de la persona que visita su sitio web. Por ejemplo, cuando se registra / inicia sesión en aplicaciones como Uber, Netflix o Facebook, ingresa información como Nombre , Correo electrónico y Contraseña a través de formularios HTML .

Ahora aprenderemos todos los elementos necesarios para crear un formulario.

NOTA: Ya agregué el estilo usando CSS, por lo que mis elementos se verán diferentes, pero funcionarán exactamente de la misma manera.

Si desea que sus elementos se vean como los míos, puede encontrar mi archivo CSS en los enlaces que se muestran a continuación:

CSS personalizado: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

Normalizar CSS:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Elemento de formulario

Este es el primer elemento que aprenderemos. Este elemento envuelve todos los demás elementos que van dentro de nuestro formulario. Este es el elemento de formulario.

Nuestro formulario no enviará los datos a ninguna parte porque no está conectado a un servidor. Para conectar nuestro formulario a un servidor y procesar nuestros datos, podemos usar cualquier lenguaje del lado del servidor como Node, Python, Ruby o PHP. La parte del procesamiento de los datos involucra dos atributos importantes que se adjuntan al elemento del formulario. Echemos un vistazo a esos atributos.

Atributos:

  1. action: El atributo action es la dirección web (URL) de un programa que procesa la información enviada por nuestro formulario.
  2. método: Es el método HTTP que utiliza el navegador para enviar el formulario, los valores posibles son POST y GET.
  • POST : los datos del cuerpo del formulario se envían al servidor.
  • GET : los datos se envían dentro de la URL y los parámetros se separan con un signo de interrogación.
Nota: no puede tener formularios anidados dentro de otro formulario . Eso significa que no puede tener un elemento dentro de otro elemento.

Elemento de entrada

El elemento de entrada es el elemento de formulario más utilizado. Se utiliza para crear un campo de texto donde el usuario puede escribir alguna información, por ejemplo , correo electrónico , contraseña , etc.

Hagamos un campo de texto donde el usuario pueda escribir su nombre.

Nota: El elemento de entrada es una etiqueta de cierre automático, por lo que no es necesario escribir una etiqueta de cierre para que coincida con la etiqueta de apertura.

He agregado tres atributos en la etiqueta de entrada anterior. Echemos un vistazo a cada uno en detalle.

tipo

El atributo de tipo indica qué tipo de entrada queremos. Si le damos un valor de texto al atributo de tipo , lo que queremos decir aquí es que el valor que estamos ingresando en el campo de entrada es de tipo texto. Hay muchos valores posibles para este atributo en particular. Algunos valores posibles son email, tel para teléfono y contraseña, etc.

Ejemplo: cuando inicia sesión en cualquiera de sus cuentas (Amazon / Netflix), debe ingresar dos cosas: correo electrónico y contraseña . Entonces, en este caso particular, se usa el elemento de entrada . El atributo de tipo se proporciona con el valor de correo electrónico y contraseña, respectivamente.

carné de identidad

El atributo ID no es obligatorio, pero es una buena idea agregar uno. En algunos casos, esto es útil para segmentar elementos con CSS / JavaScript. El atributo ID se agrega para que podamos asociar etiquetas a controles de formulario específicos .

nombre

El atributo de nombre es necesario. Cuando se envía un formulario al código del lado del servidor, el servidor puede comprender los datos del formulario y procesar los valores de manera adecuada.

marcador de posición

Es una pequeña pista que se muestra en el campo de entrada antes de que el usuario ingrese un valor. Cuando el usuario comienza a escribir en el campo de entrada, el marcador de posición desaparece.

Veamos cómo se ven algunos otros elementos de entrada básicos.

Nota: El uso de valores diferentes para el atributo de tipo producirá resultados diferentes. Por ejemplo, puede hacer que la entrada sea del tipo correo electrónico, texto o contraseña, etc. Todos ellos muestran un comportamiento ligeramente diferente, que verá a continuación.

Varios elementos de entrada (texto, correo electrónico, contraseña)

Elemento de entrada múltiple (texto, correo electrónico, contraseña)

Elemento Textarea

A veces, una sola línea de texto no es suficiente y un elemento de entrada simple no funcionará. Por ejemplo, algunos sitios web tienen un formulario de contacto para que las personas escriban sus consultas o mensajes. En estos casos, es mejor usar el textareaelemento.

los ea> no es una etiqueta de cierre automático, por lo que debemos escribir tanto la etiqueta de apertura como la de cierre. ()

Atributos:

  • id: Igual que se mencionó anteriormente en element.
  • name: Igual que se mencionó anteriormente en element.
  • cols: especifica el ancho visible de un área de texto.
  • filas: especifica el número visible de líneas en un área de texto.

Puede ver que el área de texto nos permite escribir varias líneas. El usuario puede cambiar el tamaño de un área de texto, puede ver en la ilustración anterior que estoy cambiando el tamaño del área de texto.

Nota: En la mayoría de los navegadores, el elemento textarea es redimensionable.

Elemento de botón

El elemento de botón es uno de los elementos de formulario más importantes. Sin un botón, no puede enviar ningún formulario al servidor para su procesamiento.

El elemento de botón acepta el atributo llamado tipo. Este atributo acepta tres valores enviar , restablecer y botón .

Atributos:

  • type = ”reset”: borrará todos los datos del formulario cuando se haga clic en él.
  • type = ”button”: No tiene ningún comportamiento predeterminado y se usa principalmente con JavaScript para programarlo para un comportamiento personalizado .
  • type = ”submit”: el comportamiento predeterminado del tipo de envío es, como su nombre lo indica, enviar el formulario y enviar todos los datos al servidor.

Elemento de etiqueta

En este momento, es imposible para el usuario saber qué control de formulario hace qué. No hay forma de saber dónde ingresará el correo electrónico y dónde ingresará la contraseña. El formulario parece muy incompleto y desordenado.

Podemos etiquetar cada uno de nuestros controles de formularios usando el elemento label.

El atributo más utilizado con una etiqueta es para.

Atributos:

  • for: el atributo for asocia la etiqueta con un elemento de formulario en particular. La forma en que coincide es por ID . Como puede ver en el ejemplo anterior, el valor del atributo ID dado al elemento de entrada es correo electrónico. El valor del atributo for dado al elemento de etiqueta también es correo electrónico, por lo que ambos están asociados entre sí.
Nota: Cuando hacemos clic en la etiqueta, automáticamente nos enfocamos en el campo de entrada que está asociado con la etiqueta. Este es un comportamiento predeterminado.

¿Ahora nuestra forma se ve muy bien ?.

Seleccionar menús

A veces, cuando está creando un formulario, no desea que el usuario pueda escribir el texto. Más bien, es posible que desee que elijan entre algunas opciones preestablecidas que proporcione .

Siempre que tenga una lista de opciones que sea más larga que, digamos, cuatro o cinco cosas, es mejor ir con el menú de selección porque ahorra espacio.

Digamos que nuestro formulario está dirigido a estudiantes que van a solicitar la admisión en una universidad. Queremos permitir que los estudiantes seleccionen de una lista predefinida de programas universitarios.

El elemento de menú de selección se realiza mediante apertura y cierre ct> etiqueta.

ct>: el elemento de selección muestra un menú desplegable que contiene opciones seleccionables . El elemento seleccionado no hará nada por sí solo. Este elemento forma realmente necesita elementos adicionales dentro de ella, exactamente lik e

    ele Ment necesidades s
  • elementos. Los elementos que ponemos dentro del selecto e lement se denominan elementos de opción.

    Atributos:

    • name: Igual que se mencionó anteriormente en element.

    on>: el elemento de opción representa una de las opciones que un usuario puede elegir en un menú de selección . El & l t; option> elem ent utiliza un attri bute c alled valor.

    Atributos:

    • valor: cuando envía un formulario al código del lado del servidor, cada elemento del formulario tiene un valor asociado para entradas de texto y áreas de texto. Ese valor es lo que el usuario escriba en el campo. Sin embargo, dado que estamos creando estas opciones predefinidas, necesitamos especificar cómo debería verse el valor cuando se envía. Entonces, usamos el atributo de valor para especificar los valores de las opciones predefinidas.

    Ahora tenemos la etiqueta Seleccionar cursos con el menú de selección que acabamos de crear. Ahora, también podemos organizar nuestra lista en grupos lógicos con el arriba> elemento.

    Atributos:

    • etiqueta: el nombre del grupo de opciones. En el ejemplo que se muestra a continuación, nuestra lista de opciones se ha dividido en dos grupos con la etiqueta de Ingeniería y Gestión.

    En el ejemplo dado a continuación

    Botones de radio

    Los menús selectos son excelentes si tiene muchas opciones. Si tiene algo así como 5 opciones o menos, es mejor usar botones de opción.

    La diferencia entre Seleccionar menú y Botón de opción es que los botones de opción muestran todas las opciones a la vez. Al igual que el menú de selección, el usuario solo puede elegir uno de ellos.

    Atributos:

    • name: Igual que se mencionó anteriormente en element.
    • valor: dado que estamos creando estas opciones predefinidas, necesitamos especificar cómo debería verse el valor cuando se envía. Entonces, usamos el atributo de valor para especificar los valores de las opciones predefinidas.
    Nota: Si selecciona una opción y luego intenta seleccionar otra opción, verá que anula la selección de la opción anterior. La forma en que sabe hacerlo es porque tenemos el atributo de nombre exactamente igual. Entonces sabe que estos dos botones de opción son parte del mismo grupo. Nota: El nombre debe ser el mismo si queremos que los botones de opción formen parte del mismo grupo de botones de opción.

    Casillas de verificación

    A veces, puede tener un grupo de opciones predefinidas. Desea que el usuario pueda seleccionar varias opciones y no solo una de ellas. Ahí es donde las casillas de verificación son útiles.

    Atributos:

    • name: Igual que se mencionó anteriormente en element.
    • valor: dado que estamos creando estas opciones predefinidas, necesitamos especificar cómo debería verse el valor cuando se envía. Entonces, usamos el atributo de valor para especificar los valores de las opciones predefinidas.
    • marcado: de forma predeterminada, la entrada de una casilla de verificación no está marcada. Puede establecer el estado predeterminado como comprobado mediante el atributo llamado comprobado . Recuerde que este es un atributo booleano.

    En el ejemplo que se muestra a continuación, he usado la etiqueta para cada opción individual. He conectado la casilla de verificación y una etiqueta usando el atributo for de la etiqueta y el atributo id de la casilla de verificación .

    Nota: puede resultar difícil hacer clic en una pequeña casilla de verificación. Se recomienda envolver un elemento alrededor de la casilla de verificación. Si hacemos clic en la etiqueta, también nuestra casilla de verificación se marca o se desmarca. No lo he hecho a continuación, pero puedes hacerlo para mejorar la experiencia de usuario.

    Diferencia entre casilla de verificación y botón de opción

    1. La casilla de verificación puede existir por sí sola , mientras que los botones de opción solo pueden aparecer como un grupo (debe haber un mínimo de 2 botones de opción ).
    2. Seleccionar la casilla de verificación es opcional, pero elegir uno de los botones de opción es obligatorio .

    La forma completa

    Hemos aprendido sobre muchos elementos de formulario HTML y hemos cubierto los aspectos básicos.

    No se preocupe por memorizar todo. Casi ningún desarrollador web profesional puede nombrar todos los atributos o elementos. Lo que es más importante que la memorización es aprender a buscar cosas en la documentación cuando las necesite.

    Puede intentar agregar su propio CSS para que este formulario se vea como usted desea.

    Puede obtener más información sobre los formularios en el enlace que figura a continuación.

    Formularios HTML

    Este módulo proporciona una serie de artículos que le ayudarán a dominar los formularios HTML. Los formularios HTML son una herramienta muy poderosa para… developer.mozilla.org

    Espero que haya encontrado esta publicación informativa y útil. ¡Me encantaría escuchar tus comentarios!

    ¡Gracias por leer!