Propiedades y características de la etiqueta input en HTML5
Si estás interesado en crear formularios interactivos para tu sitio web, es importante que conozcas las propiedades y características principales de la etiqueta «input» en HTML5. Esta etiqueta es esencial para permitir a los usuarios ingresar datos en diferentes formatos, y su versatilidad la convierte en una herramienta muy útil para personalizar la apariencia y comportamiento de los campos de entrada de datos. En este post, exploraremos las propiedades y características clave de la etiqueta «input», para que puedas sacar el máximo provecho de esta herramienta y crear formularios web eficaces y atractivos.
¿Qué es la etiqueta Input en HTML5?
La etiqueta «input» en HTML5 es un elemento fundamental para crear formularios interactivos en la web. Esta etiqueta permite a los usuarios ingresar datos en diferentes formatos, como texto, números, fechas, opciones de selección, entre otros.
Una de las características principales de la etiqueta «input» es su versatilidad, ya que puede ser configurada con distintas propiedades para adaptarse a las necesidades específicas de cada formulario. Por ejemplo, se pueden especificar propiedades como «type» para indicar el tipo de dato que se espera ingresar, «placeholder» para proporcionar una pista sobre el formato de entrada, «required» para hacer que el campo sea obligatorio, entre otras.
Otra característica importante de la etiqueta «input» es su capacidad de validación de datos. Esto significa que se pueden especificar ciertas restricciones en el tipo de entrada que se espera recibir. Por ejemplo, se puede definir una longitud máxima o mínima para un campo de texto, o especificar que solo se permiten números en un campo de entrada numérica.
En resumen, la etiqueta «input» en HTML5 es una herramienta muy útil para crear formularios interactivos en la web, con una amplia variedad de propiedades y características que permiten personalizar su apariencia y comportamiento para adaptarse a las necesidades específicas de cada formulario.
Propiedades de un Input
Las propiedades que se pueden utilizar con la etiqueta «input» en HTML5 para personalizar su apariencia y comportamiento. A continuación, te muestro las propiedades que puedes emplear:
| Propiedad | Descripción |
|---|---|
| type | Especifica el tipo de entrada de datos que se espera recibir en el campo «input». Los valores posibles incluyen «text», «number», «date», «checkbox», «radio», «password», entre otros. |
| name | Asigna un nombre al campo «input». Este nombre se utiliza para identificar el campo cuando se envía el formulario. |
| value | Establece un valor predeterminado para el campo «input». Este valor se muestra en el campo hasta que el usuario lo modifica. |
| placeholder | Proporciona una pista sobre el formato de entrada que se espera en el campo «input». |
| required | Hace que el campo «input» sea obligatorio. Si el usuario intenta enviar el formulario sin completar este campo, se mostrará un mensaje de error. |
| maxlength | Limita la cantidad máxima de caracteres que se pueden ingresar en el campo «input». |
| min y max | Establecen los valores mínimo y máximo permitidos para un campo de entrada numérica. |
| pattern | Permite especificar una expresión regular que el valor del campo «input» debe cumplir. Esto se utiliza para validar la entrada de datos. |
| readonly | Hace que el campo «input» sea de solo lectura, lo que significa que el usuario no puede modificar su valor. |
| disabled | Desactiva el campo «input», lo que significa que el usuario no puede interactuar con él. |
| autocomplete | Permite habilitar o deshabilitar la función de autocompletar en el campo «input». |
| autofocus | Hace que el campo «input» tenga el foco automáticamente al cargar la página. |
| multiple | Se utiliza en campos de entrada de archivos para permitir la selección de múltiples archivos al mismo tiempo. |
| step | Establece el incremento o decremento de los valores en un campo de entrada numérica. |
| size | Especifica el ancho visual del campo «input». |
| list | Se utiliza para crear una lista de opciones que el usuario puede seleccionar en un campo de entrada de texto. |
| form | Asigna el campo «input» a un formulario específico. Esto es útil cuando se tienen múltiples formularios en una misma página. |
| formaction, formmethod, formenctype, formtarget | Estas propiedades se utilizan para especificar la acción, el método, el tipo de codificación y el destino de envío de un formulario, respectivamente, en campos de entrada de tipo «submit» o «image». |
Es importante destacar que no todas estas propiedades se aplican a todos los tipos de campos «input». Es necesario consultar la documentación para conocer cuáles son las propiedades que se pueden utilizar en cada caso específico.
Input tipo Radio
Un «input» de tipo «radio» en HTML es un elemento que permite al usuario seleccionar una única opción de un conjunto de opciones predefinidas. Las principales características de un «input» de tipo «radio» son:
- Grupo de opciones: Los «input» de tipo «radio» se agrupan en un conjunto de opciones relacionadas. Solo se puede seleccionar una opción dentro del grupo.
- Nombre: Todos los «input» de tipo «radio» dentro de un grupo deben tener el mismo atributo «name». Esto permite que el navegador identifique a los «input» del mismo grupo.
- Valor: Cada «input» de tipo «radio» tiene un atributo «value» que identifica el valor que se enviará al servidor si ese «input» es seleccionado.
- Etiqueta: Se utiliza una etiqueta «label» para asociar texto descriptivo con el «input» de tipo «radio».
- Estado: Un «input» de tipo «radio» puede estar seleccionado o no seleccionado. Se selecciona cuando el usuario hace clic en él o cuando se selecciona por defecto mediante JavaScript o mediante el atributo «checked».
- Apariencia: Los «input» de tipo «radio» suelen tener una apariencia de botón circular con un punto central para indicar su selección.
- Accesibilidad: Se recomienda utilizar etiquetas «label» para describir el propósito de los «input» de tipo «radio» y para mejorar la accesibilidad para los usuarios que utilizan lectores de pantalla.
En general, los «input» de tipo «radio» son útiles cuando se desea permitir que el usuario seleccione una opción de un conjunto de opciones predefinidas, como por ejemplo, al seleccionar su género o su forma de pago preferida.
Ejemplo para seleccionar un genero
Ejemplo para seleccionar un método de pago
Input tipo checkbox
Un «input» de tipo «checkbox» en HTML es un elemento que permite al usuario seleccionar múltiples opciones de un conjunto de opciones predefinidas. Las principales características de un «input» de tipo «checkbox» son:
- Grupo de opciones: Los «input» de tipo «checkbox» se agrupan en un conjunto de opciones relacionadas. Se pueden seleccionar varias opciones dentro del grupo.
- Nombre: Todos los «input» de tipo «checkbox» dentro de un grupo deben tener el mismo atributo «name». Esto permite que el navegador identifique a los «input» del mismo grupo.
- Valor: Cada «input» de tipo «checkbox» tiene un atributo «value» que identifica el valor que se enviará al servidor si ese «input» es seleccionado.
- Etiqueta: Se utiliza una etiqueta «label» para asociar texto descriptivo con el «input» de tipo «checkbox».
- Estado: Un «input» de tipo «checkbox» puede estar seleccionado o no seleccionado. Se selecciona cuando el usuario hace clic en él o cuando se selecciona por defecto mediante JavaScript o mediante el atributo «checked«.
- Apariencia: Los «input» de tipo «checkbox» suelen tener una apariencia de casilla de verificación cuadrada con una marca de verificación para indicar su selección.
- Accesibilidad: Se recomienda utilizar etiquetas «label» para describir el propósito de los «input» de tipo «checkbox» y para mejorar la accesibilidad para los usuarios que utilizan lectores de pantalla.
En general, los «input» de tipo «checkbox» son útiles cuando se desea permitir que el usuario seleccione múltiples opciones de un conjunto de opciones predefinidas, como por ejemplo, al seleccionar los extras de una reserva de hotel.
Ejemplo para seleccionar idiomas
Ejemplo para seleccionar amenidades
Input tipo submit
Un «input» de tipo «submit» en HTML es un elemento que permite enviar un formulario a través de un botón. Las principales características de un «input» de tipo «submit» son:
- Texto: El botón de «submit» suele tener un texto predefinido como «Enviar» o «Aceptar», pero este texto se puede personalizar mediante el atributo «value».
- Acción: El «input» de tipo «submit» se utiliza para enviar los datos de un formulario al servidor. El atributo «formaction» se puede utilizar para especificar la URL a la que se enviarán los datos.
- Método: El método HTTP utilizado para enviar los datos al servidor se especifica en el atributo «formmethod». Los valores comunes son «GET» y «POST».
- Nombre: El atributo «name» se utiliza para identificar el «input» de tipo «submit» en el formulario.
- Accesibilidad: El botón de «submit» debe tener un texto descriptivo y una etiqueta «label» para mejorar la accesibilidad para los usuarios que utilizan lectores de pantalla.
En general, los «input» de tipo «submit» son útiles para enviar los datos de un formulario al servidor después de que el usuario haya ingresado toda la información necesaria en el formulario.
Ejemplos utilizando distintas etiquetas input
En este ejemplo, utilizaremos las propiedades «autocomplete«, «autofocus«, «maxlength«, «min«, «max» y «pattern» en algunos campos «input«. Por ejemplo, en el campo de teléfono se utiliza la propiedad «autocomplete» para indicar que se espera un número de teléfono, y se utiliza la propiedad «pattern» para asegurarse de que se ingresen 10 dígitos. Además, en el campo de edad, se utilizan las propiedades «min«, «max» y «step» para limitar el rango de edad permitido y definir el incremento de la selección de edad.
Como has visto las propiedades y características principales de la etiqueta «input» en HTML5, son propiedades que suelen pedir en distintos sectores, como ejemplo cuando hacemos un pedido o cuando agendamos un vuelo, así que ahora veamos un ejemplo de un formulario de viaje.
Ejemplo aplicado a un formulario de Viaje
En el ejemplo anterior se utilizan diferentes tipos de etiquetas de formulario, como la etiqueta «select» para el campo de destino y la etiqueta «textarea» para los comentarios adicionales. Además, se utilizan los elementos «fieldset» y «legend» para agrupar campos relacionados y darles un título. El formulario recopila información sobre el nombre, apellido, correo electrónico y teléfono del usuario, así como detalles del viaje, como el destino, la fecha de viaje, el número de adultos y niños, y cualquier comentario adicional que el usuario desee agregar.
Por ultimo, como hemos visto HTML es un lenguaje muy completo así que podrás encontrar distintas propiedades y características como lo hemos visto en las propiedades de un input.
