Taller > HTML
La Etiqueta <form> en HTML
Los campos de entrada se pueden vincular a través de etiquetas de etiquetado, como <label>, para describir lo que el campo espera que el usuario ingrese.
El atributo action especifica el script o el destino que manejará los datos del formulario una vez que el usuario los ha enviado. El atributo method especifica cómo se envían los datos del formulario al script o destino especificado en el atributo action. Los métodos comunes son GET y POST. El método GET envía los datos como parte de la URL, mientras que el método POST los envía en el cuerpo de la solicitud HTTP.
Atributos
Además, la etiqueta <form> también tiene algunos atributos como:
autocomplete: Permite o desactiva la autocompleción automática de campos de entrada
enctype: Especifica el tipo de codificación de los datos del formulario
name: Especifica el nombre del formulario
novalidate: especifica que el formulario no debe ser validado al enviarlo
target: define dónde se debe abrir el resultado de enviar el formulario.
Es importante tener en cuenta que el atributo name es obligatorio en los campos de entrada para que los datos puedan ser enviados y procesados correctamente.
Ejemplo de uso
Aquí tienes un ejemplo de un formulario sencillo en HTML:
<form action="enviar_formulario.php" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre">
<label for="email">Correo:</label> <input type="email" id="email" name="email">
<input type="submit" value="Enviar">
</form>
En este ejemplo se utiliza la etiqueta <form> para crear un formulario con dos campos de entrada, uno para el nombre y otro para el correo.
El atributo action especifica que una vez que el usuario haga clic en el botón de “Enviar”, los datos del formulario se enviarán a un script llamado “enviar_formulario.php” y el atributo method especifica que los datos se enviarán mediante el método post.
También se usan las etiquetas <label> para describir lo que se espera que el usuario ingrese en cada campo de entrada. El atributo for en las etiquetas de etiquetado está vinculado al atributo id de los campos de entrada correspondientes, lo que permite a los usuarios hacer clic en las etiquetas para activar los campos de entrada.
Es importante tener en cuenta que los formularios solo pueden ser usados dentro de una etiqueta
En este ejemplo, se utilizan dos etiquetas <fieldset> para agrupar los campos de entrada relacionados. La primera etiqueta
La Etiqueta <input> en HTML
Uno de los elementos fundamentales en HTML5 es la etiqueta <input>, que permite a los desarrolladores recopilar información del usuario a través de diversos tipos de campos de entrada.
La etiqueta <input> es esencial en la creación de formularios y es la piedra angular para interactuar con los usuarios en la web. Ya sea que necesites recopilar datos para una encuesta, permitir que los usuarios se registren en un sitio web o aceptar información para procesar un pago, la etiqueta <input> es la herramienta que te permitirá lograrlo.
En este artículo, exploraremos en detalle la etiqueta <input> de HTML5, incluyendo sus diferentes tipos, atributos, estilos y cómo asegurar la accesibilidad y compatibilidad con los navegadores.
Además, discutiremos las mejores prácticas para el uso eficiente de la etiqueta <input> en tus proyectos web. Comencemos nuestro viaje para dominar el uso de la etiqueta <input> en HTML5.
La etiqueta <input> en HTML5 es un elemento utilizado dentro de un formulario <form> para crear campos de entrada interactivos que permiten a los usuarios ingresar información.
Esta etiqueta es altamente versátil y puede adaptarse a una amplia variedad de tipos de datos y formatos, como texto, números, fechas, contraseñas, casillas de verificación y botones de opción, entre otros.
La sintaxis básica de la etiqueta <input> es la siguiente:
<input type="tipo_de_input" atributo1="valor1" atributo2="valor2" ...>
Donde tipo_de_input define el tipo específico de campo de entrada y los atributos adicionales (atributo1, atributo2, …) modifican el comportamiento y la apariencia del elemento.
Tipos de elementos <input> en HTML5
La etiqueta <input> admite varios tipos de campos de entrada que se definen mediante el atributo type.
A continuación, se presentan algunos de los tipos más comunes de elementos <input> con ejemplos:
1. Texto
Para crear un campo de entrada de texto simple, se utiliza el tipo “text”. Los usuarios pueden ingresar cualquier cadena de texto en este campo.
<input type="text" name="nombre" placeholder="Ingrese su nombre">
2. Contraseña
El tipo “password” crea un campo de entrada donde los caracteres ingresados se ocultan, lo que es útil para ingresar contraseñas de manera segura.
<input type="password" name="contrasena" placeholder="Ingrese su contraseña">
3. Checkbox
Las casillas de verificación permiten a los usuarios seleccionar múltiples opciones de una lista. Para crear una casilla de verificación, utiliza el tipo “checkbox”.
<input type="checkbox" name="intereses" value="deporte"> Deporte
<input type="checkbox" name="intereses" value="arte"> Arte
4. Radio
Los botones de opción permiten seleccionar una única opción de un conjunto. Para crear botones de opción, usa el tipo “radio”.
<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="femenino"> Femenino
5. Number
El tipo “number” crea un campo de entrada para ingresar valores numéricos. Puedes especificar el rango de números permitidos utilizando los atributos min y max.
<input type="number" name="edad" min="1" max="120" placeholder="Ingrese su edad">
6. Email
Para crear un campo de entrada específico para direcciones de correo electrónico, utiliza el tipo “email”. Este tipo de campo proporciona una validación básica de correo electrónico de forma automática.
<input type="email" name="correo" placeholder="Ingrese su correo electrónico">
7. Date
El tipo “date” crea un campo de entrada para seleccionar fechas utilizando un selector de fecha nativo del navegador.
<input type="date" name="fecha_nacimiento">
8. File
Para permitir a los usuarios cargar archivos, utiliza el tipo “file”. Los usuarios pueden seleccionar un archivo de su dispositivo utilizando el cuadro de diálogo de carga de archivos.
<input type="file" name="archivo_adjunto">
9. Submit
El tipo submit crea un botón que, al hacer clic, envía el formulario y sus datos al servidor. Generalmente, se especifica un atributo action en la etiqueta <form> para indicar el destino del envío del formulario.
<input type="submit" value="Enviar">
10. Button
El tipo “button” crea un botón genérico que puede usarse para diversas acciones en la página, como abrir una ventana emergente, enviar datos mediante JavaScript, etc.
Puedes agregar funcionalidad adicional utilizando JavaScript y escuchando el evento click en el botón.
<input type="button" value="Haga clic aquí" onclick="miFuncion()">
11. Range
El tipo “range” crea un control deslizante que permite a los usuarios seleccionar un valor dentro de un rango específico. Puedes establecer el rango utilizando los atributos min, max y step.
<input type="range" name="volumen" min="0" max="100" step="1">
12. Tel
Para crear un campo de entrada específico para números de teléfono, utiliza el tipo “tel”. Aunque este tipo de campo no proporciona una validación automática, ofrece una mejor experiencia de usuario en dispositivos móviles al mostrar el teclado numérico adecuado.
<input type="tel" name="telefono" placeholder="Ingrese su número de teléfono">
Estos son algunos de los tipos de elementos <input> más comunes en HTML5. Cada tipo de campo tiene sus propias características y comportamientos, y puede personalizarse aún más mediante la adición de atributos y estilos específicos.
Al combinar estos diferentes tipos de elementos <input> y configurar sus atributos y estilos según sea necesario, puedes crear formularios web interactivos y atractivos que se adapten a una amplia variedad de necesidades y casos de uso.
Es importante mencionar que algunos de estos tipos de elementos <input> pueden no ser completamente compatibles con navegadores más antiguos o menos comunes.
Por lo tanto, es recomendable asegurarse de que tu sitio web funcione correctamente en una variedad de navegadores y versiones, utilizando soluciones alternativas o polyfills cuando sea necesario.
En las siguientes secciones, exploraremos en detalle los atributos que pueden aplicarse a los elementos <input>, cómo validar los datos ingresados por el usuario, cómo aplicar estilos a los elementos <input> y cómo garantizar la accesibilidad y la compatibilidad con los navegadores.
Atributos comunes de la etiqueta <input>
Existen varios atributos que pueden aplicarse a la etiqueta <input> para modificar su comportamiento, apariencia y características.
A continuación, se detallan algunos de los atributos más comunes con ejemplos:
name: El atributo name se utiliza para identificar un campo de entrada en particular. Es especialmente útil cuando se procesan los datos del formulario en el servidor, ya que actúa como clave para los valores ingresados.
<input type="text" name="nombre_usuario" placeholder="Ingrese su nombre">
value: El atributo value define el valor predeterminado de un campo de entrada. Este valor se envía al servidor cuando se envía el formulario.
<input type="text" name="nombre" value="John Doe">
placeholder: El atributo placeholder muestra un texto de sugerencia en el campo de entrada cuando está vacío. Este texto desaparece cuando el usuario comienza a escribir en el campo.
<input type="text" name="correo" placeholder="Ingrese su correo electrónico">
required: El atributo required indica que un campo de entrada es obligatorio y debe completarse antes de enviar el formulario.
<input type="text" name="nombre" placeholder="Ingrese su nombre" required>
disabled: El atributo disabled desactiva un campo de entrada, lo que significa que los usuarios no pueden interactuar con él ni modificar su valor. Los campos desactivados no se envían con el formulario.
<input type="text" name="nombre" value="John Doe" disabled>
readonly: El atributo readonly hace que un campo de entrada sea de solo lectura. A diferencia de los campos desactivados, los campos de solo lectura sí se envían con el formulario, pero los usuarios no pueden modificar su valor.
<input type="text" name="id_usuario" value="12345" readonly>
autocomplete: El atributo autocomplete permite al navegador completar automáticamente los campos de entrada con valores almacenados previamente por el usuario.
Puede establecerse en “on” para habilitar la función o en “off” para deshabilitarla.
<input type="text" name="direccion" placeholder="Ingrese su dirección" autocomplete="on">
id: El atributo id asigna un identificador único al elemento <input>. Este identificador se puede utilizar para seleccionar y manipular el elemento mediante JavaScript y para aplicar estilos específicos mediante CSS. Los valores de los atributos id deben ser únicos en todo el documento.
<input type="text" id="nombre_usuario" name="nombre_usuario" placeholder="Ingrese su nombre de usuario">
class: El atributo class permite asignar una o varias clases al elemento <input>. Las clases son útiles para aplicar estilos CSS y manipular elementos que comparten características comunes mediante JavaScript. Puedes asignar múltiples clases separándolas con espacios.
<input type="text" class="formulario-entrada entrada-nombre" name="nombre" placeholder="Ingrese su nombre">
type (explicación adicional): Como se mencionó anteriormente, el atributo type define el tipo específico de campo de entrada. Algunos ejemplos de tipos de elementos <input> incluyen “text”, “password”, “checkbox”, “radio”, “number”, “email”, “date”, “file”, “submit”, “button”, “range” y “tel”.
El tipo de campo determina el comportamiento y la apariencia del elemento <input> y, en algunos casos, proporciona validación automática del navegador y una experiencia de usuario adaptada a los dispositivos móviles.
<input type="text" class="formulario-entrada" name="nombre" id="nombre" placeholder="Ingrese su nombre">
Estos son algunos de los atributos más comunes que puedes utilizar con la etiqueta <input>. Al aplicar estos atributos en diferentes combinaciones y ajustarlos según las necesidades de tu formulario, podrás crear una experiencia de usuario más personalizada y accesible.
En la siguiente sección, analizaremos la validación de datos en elementos <input> y cómo puedes asegurarte de que los usuarios ingresen información válida en tus formularios.
Validación de datos en elementos <input>
La validación de datos es esencial para garantizar que los usuarios ingresen información válida y en el formato correcto en tus formularios.
HTML5 introduce características de validación incorporadas en la etiqueta <input> que puedes utilizar para validar datos sin la necesidad de JavaScript adicional.
A continuación, se presentan algunos ejemplos de validación de datos en elementos <input>:
1. Validación de campos obligatorios El atributo required indica que un campo de entrada es obligatorio y debe completarse antes de enviar el formulario. Si el campo está vacío, el navegador mostrará un mensaje de error y evitará que se envíe el formulario.
<input type="text" name="nombre" placeholder="Ingrese su nombre" required>
2. Validación de tipos específicos
Al usar un tipo específico de entrada, como “email” o “number”, el navegador proporciona una validación básica para garantizar que los datos ingresados cumplan con el formato correcto.
<input type="email" name="correo" placeholder="Ingrese su correo electrónico" required><input type="number" name="edad" min="1" max="120" placeholder="Ingrese su edad" required>
3. Validación de rango
Para campos de entrada numéricos, puedes utilizar los atributos min y max para especificar el rango de valores permitidos.
Si el valor ingresado está fuera del rango especificado, el navegador mostrará un mensaje de error y evitará que se envíe el formulario.
<input type="number" name="edad" min="18" max="120" placeholder="Ingrese su edad" required>
4. Validación de patrones
El atributo pattern te permite especificar una expresión regular que el valor ingresado debe coincidir para ser válido.
Si el valor no coincide con el patrón, el navegador mostrará un mensaje de error y evitará que se envíe el formulario. Por ejemplo, para validar un código postal de 5 dígitos:
<input type="text" name="codigo_postal" placeholder="Ingrese su código postal" pattern="\d{5}" title="Ingrese un código postal de 5 dígitos" required>
5. Personalización de mensajes de validación
Puedes personalizar los mensajes de error de validación utilizando el atributo oninvalid y la propiedad setCustomValidity en JavaScript.
Por ejemplo, para personalizar el mensaje de error para un campo de correo electrónico:
<input type="email" name="correo" placeholder="Ingrese su correo electrónico" oninvalid="this.setCustomValidity('Ingrese un correo electrónico válido')" oninput="this.setCustomValidity('')" required>
Estos son algunos ejemplos de cómo puedes validar datos en elementos <input> utilizando las características de validación incorporadas de HTML5. Si bien estas validaciones cubren muchos casos de uso comunes, es posible que necesites validaciones más avanzadas o personalizadas en ciertos escenarios.
En esos casos, puedes utilizar JavaScript y bibliotecas de validación adicionales para ampliar las capacidades de validación de tus formularios. Es importante recordar que la validación del lado del cliente nunca debe ser el único método de validación, ya que puede ser eludida o desactivada por un usuario malintencionado.
Siempre debes validar los datos en el lado del servidor antes de procesarlos y almacenarlos en una base de datos para garantizar la seguridad y la integridad de tus datos.
En las siguientes secciones, exploraremos cómo aplicar estilos a los elementos <input> y cómo garantizar la accesibilidad y la compatibilidad con diferentes navegadores.
Los estilos en elementos <input> pueden mejorar significativamente la experiencia de usuario en tus formularios. Puedes utilizar CSS para personalizar la apariencia de los campos de entrada, adaptarlos a la estética de tu sitio web y hacer que sean más atractivos e intuitivos para los usuarios.
Aquí hay algunos ejemplos de cómo aplicar estilos a los elementos <input>:
Estilos básicos
Puedes aplicar estilos básicos a tus elementos <input>, como cambiar el tamaño, el color de fondo, el color del texto y los bordes.
input[type="text"] {
width: 100%;
padding: 10px; background-color: #f1f1f1; color: #333; border: 1px solid #ccc; }
Estilos en foco
Puedes personalizar la apariencia de un campo de entrada cuando está enfocado (seleccionado) utilizando la pseudo-clase :focus.
input[type="text"]:focus {
border: 1px solid #0080ff;
outline: none;
}
Estilos para campos inválidos
Puedes aplicar estilos específicos a campos de entrada inválidos utilizando la pseudo-clase :invalid. Esto puede ayudar a destacar errores de validación y guiar a los usuarios para corregirlos.
input[type="text"]:invalid {
border: 1px solid #ff0000;
}
Estilos para campos obligatorios
Puedes aplicar estilos específicos a campos de entrada obligatorios utilizando el atributo required en combinación con un selector de atributos en CSS.
input[type="text"][required] {
border-left: 3px solid #0080ff;
}
Estilos para elementos <input> personalizados
Algunos tipos de elementos <input> pueden ser difíciles de estilizar de manera consistente en todos los navegadores (por ejemplo, “checkbox” y “radio”).
En estos casos, puedes ocultar el elemento original y crear una apariencia personalizada utilizando CSS y pseudo-elementos.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
input[type="checkbox"]:checked + label::before {
background-image: url("checkmark.svg");
background-repeat: no-repeat;
background-position: center;
}
Estos son algunos ejemplos de cómo aplicar estilos a los elementos <input> utilizando CSS. Puedes adaptar estos ejemplos y explorar técnicas adicionales para crear formularios atractivos y coherentes con el diseño general de tu sitio web.
Accesibilidad en elementos <input>
La accesibilidad es esencial para garantizar que todos los usuarios, incluidos aquellos con discapacidades, puedan interactuar con tus formularios y elementos <input>.
A continuación, se presentan algunos ejemplos y prácticas recomendadas para mejorar la accesibilidad en tus elementos <input>:
Asociar etiquetas <label> con elementos <input>
Siempre debes asociar un elemento <label> con cada campo de entrada utilizando el atributo for en la etiqueta <label> y el atributo id en el elemento <input>.
Esto mejora la accesibilidad al proporcionar información contextual sobre el campo de entrada y permitir que los usuarios hagan clic en la etiqueta para enfocar el campo de entrada asociado.
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre">
Agregar descripciones accesibles con aria-label
En casos donde no haya una etiqueta visible asociada al campo de entrada, puedes utilizar el atributo aria-label para proporcionar una descripción accesible.
<input type="text" id="buscar" name="buscar" placeholder="Buscar" aria-label="Buscar en el sitio">
Utilizar aria-describedby para proporcionar información adicional
Si necesitas brindar información adicional o instrucciones relacionadas con un campo de entrada, puedes utilizar el atributo aria-describedby en combinación con un elemento descriptivo, como un <span> o un <p>.
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" aria-describedby="info-contrasena">
<p id="info-contrasena">La contraseña debe tener al menos 8 caracteres, incluyendo al menos una letra mayúscula y un número.</p>
Agrupar elementos relacionados con <fieldset> y <legend>
Cuando tengas un grupo de elementos relacionados, como un conjunto de opciones de radio o casillas de verificación, utiliza los elementos <fieldset> y <legend> para agruparlos y proporcionar un título accesible para el grupo.
Proporcionar alternativas para entrada de datos no accesibles
Algunos elementos <input> pueden ser inaccesibles o difíciles de utilizar para ciertos usuarios, como aquellos con discapacidades motoras o visuales. En estos casos, considera proporcionar una alternativa accesible para la entrada de datos.
Por ejemplo, para un control deslizante de rango, podrías ofrecer una entrada de texto donde los usuarios puedan ingresar el valor directamente.
<label for="rango">Rango (1-100):</label>
<input type="range" id="rango" name="rango" min="1" max="100" step="1" aria-labelledby="rango">
<label for="rango-texto" class="visually-hidden">Ingrese el valor del rango:</label>
<input type="number" id="rango-texto" name="rango-texto" min="1" max="100" aria-labelledby="rango-texto">
Al seguir estas prácticas recomendadas y ejemplos, puedes mejorar significativamente la accesibilidad de tus elementos <input> y garantizar que todos los usuarios, independientemente de sus habilidades, puedan interactuar con tus formularios de manera efectiva y sin frustraciones.
Uno de los elementos fundamentales en HTML5 es la etiqueta <input>, que permite a los desarrolladores recopilar información del usuario a través de diversos tipos de campos de entrada.
La etiqueta <input> es esencial en la creación de formularios y es la piedra angular para interactuar con los usuarios en la web. Ya sea que necesites recopilar datos para una encuesta, permitir que los usuarios se registren en un sitio web o aceptar información para procesar un pago, la etiqueta <input> es la herramienta que te permitirá lograrlo.
En este artículo, exploraremos en detalle la etiqueta <input> de HTML5, incluyendo sus diferentes tipos, atributos, estilos y cómo asegurar la accesibilidad y compatibilidad con los navegadores.
Además, discutiremos las mejores prácticas para el uso eficiente de la etiqueta <input> en tus proyectos web. Comencemos nuestro viaje para dominar el uso de la etiqueta <input> en HTML5.
La etiqueta <input> en HTML5 es un elemento utilizado dentro de un formulario <form> para crear campos de entrada interactivos que permiten a los usuarios ingresar información.
Esta etiqueta es altamente versátil y puede adaptarse a una amplia variedad de tipos de datos y formatos, como texto, números, fechas, contraseñas, casillas de verificación y botones de opción, entre otros.
La sintaxis básica de la etiqueta <input> es la siguiente:
<input type="tipo_de_input" atributo1="valor1" atributo2="valor2" ...>
Donde tipo_de_input define el tipo específico de campo de entrada y los atributos adicionales (atributo1, atributo2, …) modifican el comportamiento y la apariencia del elemento.
Tipos de elementos <input> en HTML5
La etiqueta <input> admite varios tipos de campos de entrada que se definen mediante el atributo type.
A continuación, se presentan algunos de los tipos más comunes de elementos <input> con ejemplos:
1. Texto
Para crear un campo de entrada de texto simple, se utiliza el tipo “text”. Los usuarios pueden ingresar cualquier cadena de texto en este campo.
<input type="text" name="nombre" placeholder="Ingrese su nombre">
2. Contraseña
El tipo “password” crea un campo de entrada donde los caracteres ingresados se ocultan, lo que es útil para ingresar contraseñas de manera segura.
<input type="password" name="contrasena" placeholder="Ingrese su contraseña">
3. Checkbox
Las casillas de verificación permiten a los usuarios seleccionar múltiples opciones de una lista. Para crear una casilla de verificación, utiliza el tipo “checkbox”.
<input type="checkbox" name="intereses" value="deporte"> Deporte
<input type="checkbox" name="intereses" value="arte"> Arte
4. Radio
Los botones de opción permiten seleccionar una única opción de un conjunto. Para crear botones de opción, usa el tipo “radio”.
<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="femenino"> Femenino
5. Number
El tipo “number” crea un campo de entrada para ingresar valores numéricos. Puedes especificar el rango de números permitidos utilizando los atributos min y max.
<input type="number" name="edad" min="1" max="120" placeholder="Ingrese su edad">
6. Email
Para crear un campo de entrada específico para direcciones de correo electrónico, utiliza el tipo “email”. Este tipo de campo proporciona una validación básica de correo electrónico de forma automática.
<input type="email" name="correo" placeholder="Ingrese su correo electrónico">
7. Date
El tipo “date” crea un campo de entrada para seleccionar fechas utilizando un selector de fecha nativo del navegador.
<input type="date" name="fecha_nacimiento">
8. File
Para permitir a los usuarios cargar archivos, utiliza el tipo “file”. Los usuarios pueden seleccionar un archivo de su dispositivo utilizando el cuadro de diálogo de carga de archivos.
<input type="file" name="archivo_adjunto">
9. Submit
El tipo submit crea un botón que, al hacer clic, envía el formulario y sus datos al servidor. Generalmente, se especifica un atributo action en la etiqueta <form> para indicar el destino del envío del formulario.
<input type="submit" value="Enviar">
10. Button
El tipo “button” crea un botón genérico que puede usarse para diversas acciones en la página, como abrir una ventana emergente, enviar datos mediante JavaScript, etc.
Puedes agregar funcionalidad adicional utilizando JavaScript y escuchando el evento click en el botón.
<input type="button" value="Haga clic aquí" onclick="miFuncion()">
11. Range
El tipo “range” crea un control deslizante que permite a los usuarios seleccionar un valor dentro de un rango específico. Puedes establecer el rango utilizando los atributos min, max y step.
<input type="range" name="volumen" min="0" max="100" step="1">
12. Tel
Para crear un campo de entrada específico para números de teléfono, utiliza el tipo “tel”. Aunque este tipo de campo no proporciona una validación automática, ofrece una mejor experiencia de usuario en dispositivos móviles al mostrar el teclado numérico adecuado.
<input type="tel" name="telefono" placeholder="Ingrese su número de teléfono">
Estos son algunos de los tipos de elementos <input> más comunes en HTML5. Cada tipo de campo tiene sus propias características y comportamientos, y puede personalizarse aún más mediante la adición de atributos y estilos específicos.
Al combinar estos diferentes tipos de elementos <input> y configurar sus atributos y estilos según sea necesario, puedes crear formularios web interactivos y atractivos que se adapten a una amplia variedad de necesidades y casos de uso.
Es importante mencionar que algunos de estos tipos de elementos <input> pueden no ser completamente compatibles con navegadores más antiguos o menos comunes.
Por lo tanto, es recomendable asegurarse de que tu sitio web funcione correctamente en una variedad de navegadores y versiones, utilizando soluciones alternativas o polyfills cuando sea necesario.
En las siguientes secciones, exploraremos en detalle los atributos que pueden aplicarse a los elementos <input>, cómo validar los datos ingresados por el usuario, cómo aplicar estilos a los elementos <input> y cómo garantizar la accesibilidad y la compatibilidad con los navegadores.
Atributos comunes de la etiqueta <input>
Existen varios atributos que pueden aplicarse a la etiqueta <input> para modificar su comportamiento, apariencia y características.
A continuación, se detallan algunos de los atributos más comunes con ejemplos:
name: El atributo name se utiliza para identificar un campo de entrada en particular. Es especialmente útil cuando se procesan los datos del formulario en el servidor, ya que actúa como clave para los valores ingresados.
<input type="text" name="nombre_usuario" placeholder="Ingrese su nombre">
value: El atributo value define el valor predeterminado de un campo de entrada. Este valor se envía al servidor cuando se envía el formulario.
<input type="text" name="nombre" value="John Doe">
placeholder: El atributo placeholder muestra un texto de sugerencia en el campo de entrada cuando está vacío. Este texto desaparece cuando el usuario comienza a escribir en el campo.
<input type="text" name="correo" placeholder="Ingrese su correo electrónico">
required: El atributo required indica que un campo de entrada es obligatorio y debe completarse antes de enviar el formulario.
<input type="text" name="nombre" placeholder="Ingrese su nombre" required>
disabled: El atributo disabled desactiva un campo de entrada, lo que significa que los usuarios no pueden interactuar con él ni modificar su valor. Los campos desactivados no se envían con el formulario.
<input type="text" name="nombre" value="John Doe" disabled>
readonly: El atributo readonly hace que un campo de entrada sea de solo lectura. A diferencia de los campos desactivados, los campos de solo lectura sí se envían con el formulario, pero los usuarios no pueden modificar su valor.
<input type="text" name="id_usuario" value="12345" readonly>
autocomplete: El atributo autocomplete permite al navegador completar automáticamente los campos de entrada con valores almacenados previamente por el usuario.
Puede establecerse en “on” para habilitar la función o en “off” para deshabilitarla.
<input type="text" name="direccion" placeholder="Ingrese su dirección" autocomplete="on">
id: El atributo id asigna un identificador único al elemento <input>. Este identificador se puede utilizar para seleccionar y manipular el elemento mediante JavaScript y para aplicar estilos específicos mediante CSS. Los valores de los atributos id deben ser únicos en todo el documento.
<input type="text" id="nombre_usuario" name="nombre_usuario" placeholder="Ingrese su nombre de usuario">
class: El atributo class permite asignar una o varias clases al elemento <input>. Las clases son útiles para aplicar estilos CSS y manipular elementos que comparten características comunes mediante JavaScript. Puedes asignar múltiples clases separándolas con espacios.
<input type="text" class="formulario-entrada entrada-nombre" name="nombre" placeholder="Ingrese su nombre">
type (explicación adicional): Como se mencionó anteriormente, el atributo type define el tipo específico de campo de entrada. Algunos ejemplos de tipos de elementos <input> incluyen “text”, “password”, “checkbox”, “radio”, “number”, “email”, “date”, “file”, “submit”, “button”, “range” y “tel”.
El tipo de campo determina el comportamiento y la apariencia del elemento <input> y, en algunos casos, proporciona validación automática del navegador y una experiencia de usuario adaptada a los dispositivos móviles.
<input type="text" class="formulario-entrada" name="nombre" id="nombre" placeholder="Ingrese su nombre">
Estos son algunos de los atributos más comunes que puedes utilizar con la etiqueta <input>. Al aplicar estos atributos en diferentes combinaciones y ajustarlos según las necesidades de tu formulario, podrás crear una experiencia de usuario más personalizada y accesible.
En la siguiente sección, analizaremos la validación de datos en elementos <input> y cómo puedes asegurarte de que los usuarios ingresen información válida en tus formularios.
Validación de datos en elementos <input>
La validación de datos es esencial para garantizar que los usuarios ingresen información válida y en el formato correcto en tus formularios.
HTML5 introduce características de validación incorporadas en la etiqueta <input> que puedes utilizar para validar datos sin la necesidad de JavaScript adicional.
A continuación, se presentan algunos ejemplos de validación de datos en elementos <input>:
1. Validación de campos obligatorios El atributo required indica que un campo de entrada es obligatorio y debe completarse antes de enviar el formulario. Si el campo está vacío, el navegador mostrará un mensaje de error y evitará que se envíe el formulario.
<input type="text" name="nombre" placeholder="Ingrese su nombre" required>
2. Validación de tipos específicos
Al usar un tipo específico de entrada, como “email” o “number”, el navegador proporciona una validación básica para garantizar que los datos ingresados cumplan con el formato correcto.
<input type="email" name="correo" placeholder="Ingrese su correo electrónico" required><input type="number" name="edad" min="1" max="120" placeholder="Ingrese su edad" required>
3. Validación de rango
Para campos de entrada numéricos, puedes utilizar los atributos min y max para especificar el rango de valores permitidos.
Si el valor ingresado está fuera del rango especificado, el navegador mostrará un mensaje de error y evitará que se envíe el formulario.
<input type="number" name="edad" min="18" max="120" placeholder="Ingrese su edad" required>
4. Validación de patrones
El atributo pattern te permite especificar una expresión regular que el valor ingresado debe coincidir para ser válido.
Si el valor no coincide con el patrón, el navegador mostrará un mensaje de error y evitará que se envíe el formulario. Por ejemplo, para validar un código postal de 5 dígitos:
<input type="text" name="codigo_postal" placeholder="Ingrese su código postal" pattern="\d{5}" title="Ingrese un código postal de 5 dígitos" required>
5. Personalización de mensajes de validación
Puedes personalizar los mensajes de error de validación utilizando el atributo oninvalid y la propiedad setCustomValidity en JavaScript.
Por ejemplo, para personalizar el mensaje de error para un campo de correo electrónico:
<input type="email" name="correo" placeholder="Ingrese su correo electrónico" oninvalid="this.setCustomValidity('Ingrese un correo electrónico válido')" oninput="this.setCustomValidity('')" required>
Estos son algunos ejemplos de cómo puedes validar datos en elementos <input> utilizando las características de validación incorporadas de HTML5. Si bien estas validaciones cubren muchos casos de uso comunes, es posible que necesites validaciones más avanzadas o personalizadas en ciertos escenarios.
En esos casos, puedes utilizar JavaScript y bibliotecas de validación adicionales para ampliar las capacidades de validación de tus formularios. Es importante recordar que la validación del lado del cliente nunca debe ser el único método de validación, ya que puede ser eludida o desactivada por un usuario malintencionado.
Siempre debes validar los datos en el lado del servidor antes de procesarlos y almacenarlos en una base de datos para garantizar la seguridad y la integridad de tus datos.
En las siguientes secciones, exploraremos cómo aplicar estilos a los elementos <input> y cómo garantizar la accesibilidad y la compatibilidad con diferentes navegadores.
Aplicar estilos a los elementos <input>
Los estilos en elementos <input> pueden mejorar significativamente la experiencia de usuario en tus formularios. Puedes utilizar CSS para personalizar la apariencia de los campos de entrada, adaptarlos a la estética de tu sitio web y hacer que sean más atractivos e intuitivos para los usuarios.
Aquí hay algunos ejemplos de cómo aplicar estilos a los elementos <input>:
Estilos básicos
Puedes aplicar estilos básicos a tus elementos <input>, como cambiar el tamaño, el color de fondo, el color del texto y los bordes.
input[type="text"] {
width: 100%;
padding: 10px; background-color: #f1f1f1; color: #333; border: 1px solid #ccc; }
Estilos en foco
Puedes personalizar la apariencia de un campo de entrada cuando está enfocado (seleccionado) utilizando la pseudo-clase :focus.
input[type="text"]:focus {
border: 1px solid #0080ff;
outline: none;
}
Estilos para campos inválidos
Puedes aplicar estilos específicos a campos de entrada inválidos utilizando la pseudo-clase :invalid. Esto puede ayudar a destacar errores de validación y guiar a los usuarios para corregirlos.
input[type="text"]:invalid {
border: 1px solid #ff0000;
}
Estilos para campos obligatorios
Puedes aplicar estilos específicos a campos de entrada obligatorios utilizando el atributo required en combinación con un selector de atributos en CSS.
input[type="text"][required] {
border-left: 3px solid #0080ff;
}
Estilos para elementos <input> personalizados
Algunos tipos de elementos <input> pueden ser difíciles de estilizar de manera consistente en todos los navegadores (por ejemplo, “checkbox” y “radio”).
En estos casos, puedes ocultar el elemento original y crear una apariencia personalizada utilizando CSS y pseudo-elementos.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
input[type="checkbox"]:checked + label::before {
background-image: url("checkmark.svg");
background-repeat: no-repeat;
background-position: center;
}
Estos son algunos ejemplos de cómo aplicar estilos a los elementos <input> utilizando CSS. Puedes adaptar estos ejemplos y explorar técnicas adicionales para crear formularios atractivos y coherentes con el diseño general de tu sitio web.
Accesibilidad en elementos <input>
La accesibilidad es esencial para garantizar que todos los usuarios, incluidos aquellos con discapacidades, puedan interactuar con tus formularios y elementos <input>.
A continuación, se presentan algunos ejemplos y prácticas recomendadas para mejorar la accesibilidad en tus elementos <input>:
Asociar etiquetas <label> con elementos <input>
Siempre debes asociar un elemento <label> con cada campo de entrada utilizando el atributo for en la etiqueta <label> y el atributo id en el elemento <input>.
Esto mejora la accesibilidad al proporcionar información contextual sobre el campo de entrada y permitir que los usuarios hagan clic en la etiqueta para enfocar el campo de entrada asociado.
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre">
Agregar descripciones accesibles con aria-label
En casos donde no haya una etiqueta visible asociada al campo de entrada, puedes utilizar el atributo aria-label para proporcionar una descripción accesible.
<input type="text" id="buscar" name="buscar" placeholder="Buscar" aria-label="Buscar en el sitio">
Utilizar aria-describedby para proporcionar información adicional
Si necesitas brindar información adicional o instrucciones relacionadas con un campo de entrada, puedes utilizar el atributo aria-describedby en combinación con un elemento descriptivo, como un <span> o un <p>.
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" aria-describedby="info-contrasena">
<p id="info-contrasena">La contraseña debe tener al menos 8 caracteres, incluyendo al menos una letra mayúscula y un número.</p>
Agrupar elementos relacionados con <fieldset> y <legend>
Cuando tengas un grupo de elementos relacionados, como un conjunto de opciones de radio o casillas de verificación, utiliza los elementos <fieldset> y <legend> para agruparlos y proporcionar un título accesible para el grupo.
Proporcionar alternativas para entrada de datos no accesibles
Algunos elementos <input> pueden ser inaccesibles o difíciles de utilizar para ciertos usuarios, como aquellos con discapacidades motoras o visuales. En estos casos, considera proporcionar una alternativa accesible para la entrada de datos.
Por ejemplo, para un control deslizante de rango, podrías ofrecer una entrada de texto donde los usuarios puedan ingresar el valor directamente.
<label for="rango">Rango (1-100):</label>
<input type="range" id="rango" name="rango" min="1" max="100" step="1" aria-labelledby="rango">
<label for="rango-texto" class="visually-hidden">Ingrese el valor del rango:</label>
<input type="number" id="rango-texto" name="rango-texto" min="1" max="100" aria-labelledby="rango-texto">
Al seguir estas prácticas recomendadas y ejemplos, puedes mejorar significativamente la accesibilidad de tus elementos <input> y garantizar que todos los usuarios, independientemente de sus habilidades, puedan interactuar con tus formularios de manera efectiva y sin frustraciones.
La Etiqueta <button> en HTML
Ejemplo de uso
Un ejemplo de cómo utilizar la etiqueta <button> en HTML es el siguiente:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
En este ejemplo, se crea un formulario con dos campos de texto y dos botones. El primer botón tiene el atributo type establecido como “submit” y tiene la función de enviar el formulario al servidor. El segundo botón tiene el atributo type establecido como “reset” y tiene la función de reiniciar los campos del formulario a sus valores predeterminados.
Es importante mencionar que el contenido que se encuentra dentro de la etiqueta /b><button> es el texto que se mostrará en el botón, por ejemplo, el texto “Submit” y “Reset” en el ejemplo anterior.
Atributos
Los atributos más comunes utilizados en la etiqueta <button> son:
type: Especifica el tipo de botón. Puede ser “submit” (enviar formulario), “reset” (reiniciar formulario) o “button” (botón normal). El valor predeterminado es “submit”.
name: Especifica un nombre para el botón, que se utilizará para identificarlo en el lado del servidor cuando se envía el formulario.
value: Especifica el valor que se enviará al servidor cuando se envía el formulario.
disabled: Define si el botón está deshabilitado o no. Un botón deshabilitado no puede ser presionado.
form: Especifica a qué formulario pertenece el botón.
formaction: Especifica la URL a la cual se enviará el formulario cuando se presiona el botón.
formmethod: Especifica el método HTTP (GET o POST) que se utilizará para enviar el formulario.
autofocus: Define si el botón debe tener el foco automáticamente al cargar la página.
formnovalidate: Define si el formulario debe ser enviado sin validar.
formtarget: Especifica a dónde se abrirá el resultado de enviar el formulario.
accesskey: Especifica una tecla de acceso para el botón.
Además de los atributos mencionados anteriormente, la etiqueta <button> de HTML5 también admite los atributos globales de HTML, como id, class, style, title, entre otros.
Estos atributos se utilizan para especificar información adicional sobre el botón, como su identificador único, su clase CSS, su estilo y su descripción.
Ejemplo
Aquí te dejo un ejemplo completo de cómo utilizar algunos de los atributos de la etiqueta <button> de HTML:
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit" class="submit-button" title="Enviar formulario" accesskey="s">Submit</button>
<button type="reset" disabled>Reset</button>
</form>
En este ejemplo se crea un formulario con dos campos de texto y dos botones. El primer botón tiene el atributo type establecido como “submit”, la clase “submit-button” para aplicar un estilo CSS específico y un título “Enviar formulario” para mostrar un mensaje al pasar el cursor sobre el botón.
También se estableció un atributo “accesskey” con valor “s” para poder acceder al botón con la tecla S. El segundo botón tiene el atributo type establecido como “reset” y está deshabilitado.
Es importante mencionar que este es solo un ejemplo y que puedes usar cualquiera de los atributos mencionados anteriormente según tus necesidades y requerimientos.
La Etiqueta <label> en HTML
Ejemplo de uso
La forma más común de utilizar la etiqueta <label> es mediante el atributo for, el cual se refiere al id del elemento de formulario al cual se está asociando la etiqueta. Por ejemplo:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
</form>
Además, también se puede usar como un contenedor para el elemento de formulario, en cuyo caso se debe agregar el atributo form al elemento de formulario correspondiente, ejemplo:
<form>
<label>
Nombre:
<input type="text" id="name" name="name" form="form1">
</label>
</form>
Atributos
Los atributos más comunes de la etiqueta <label> en HTML5 son:
for: Especifica el id del elemento de formulario al cual se está asociando la etiqueta.
form: Define el id del formulario al cual pertenece el elemento de formulario al cual se está asociando la etiqueta.
accesskey: Especifica una tecla de acceso rápido para la etiqueta.
class: Especifica una o varias clases para estilizar la etiqueta mediante CSS.
id: Especifica un identificador único para la etiqueta, que puede ser usado para estilizar la etiqueta mediante CSS o para enlazar con scripts.
style: Especifica un estilo en línea para la etiqueta.
title: Especifica un título o una descripción adicional para la etiqueta.
onclick: Especifica un script que se ejecuta cuando se hace clic en la etiqueta.
Algunos de estos atributos son opcionales y pueden ser utilizados dependiendo del contexto o necesidad.
Ejemplo
Aquí tienes un ejemplo de cómo utilizar la etiqueta <label> junto con algunos de sus atributos en HTML5:
<form id="form1">
<label for="nombre" accesskey="n" class="required">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email" form="form1">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Enviar">
</form>
En este ejemplo, se está utilizando la etiqueta <label> para describir los campos de formulario “Nombre” y “Email”. El atributo for se utiliza para asociar la etiqueta con el campo de formulario correspondiente, utilizando el valor del atributo id del campo.
El atributo accesskey se utiliza para asignar una tecla de acceso rápido para la etiqueta “Nombre” y el atributo form se utiliza para asociar la etiqueta “Email” con el formulario cuyo id es “form1”.
La Etiqueta <fieldset> en HTML
Un ejemplo de uso de la etiqueta <fieldset> sería el siguiente:
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</form> En este ejemplo, se usa la etiqueta <fieldset> para agrupar los elementos del campo “Nombre”, “Correo electrónico” y “Teléfono” juntos. La etiqueta <legend> proporciona un título para el grupo de elementos “Información Personal”.
Atributos
Los atributos más comunes de la etiqueta <fieldset> de HTML son:
disabled: Indica si el conjunto de campos está habilitado o deshabilitado
form: Especifica el ID del formulario al que pertenece el conjunto de campos.
name: Especifica un nombre para el conjunto de campos, el cual puede ser usado para referirse a él en JavaScript.
legend: Especifica el título o etiqueta del conjunto de campos.
Además, también se pueden emplear atributos globales como id, class, style, entre otros.
Ejemplo
Un ejemplo completo de la etiqueta <fieldset> de HTML podría ser el siguiente:
<form>
<fieldset name="personal_info" disabled>
<legend>Información personal:</legend>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Teléfono:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<input type="submit" value="Enviar">
</form>
En este ejemplo se crea un formulario usando la etiqueta <form>, dentro del cual se emplea la etiqueta <fieldset> para agrupar los campos relacionados a la información personal del usuario. Se utiliza el atributo “name” para darle un nombre al conjunto de campos y el atributo “disabled” para deshabilitarlo.
También se usa la etiqueta <legend> para proporcionar un título para el conjunto de campos y las etiquetas <label> para proporcionar etiquetas para los campos de entrada.
La Etiqueta <legend> en HTML
La etiqueta <legend> se utiliza para proporcionar un título o una descripción para el fieldset y su contenido. Es recomendable utilizar la etiqueta <legend> dentro de un fieldset y debe ser la primera etiqueta dentro del fieldset.
El contenido del <legend> debe ser una descripción corta y concisa del contenido del fieldset.
Un ejemplo de uso de la etiqueta <legend> sería el siguiente:
<form>
<fieldset>
<legend>Información de contacto</legend> <label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">
<label for="phone">Teléfono:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</form>
En este ejemplo, se utiliza la etiqueta <legend> para proporcionar un título al fieldset que contiene los campos de entrada para la información de contacto del usuario. El contenido del <legend> es “Información de contacto”.
El fieldset es un contenedor para los campos de entrada de nombre, correo electrónico y teléfono.
Atributos
La etiqueta <legend> de HTML tiene algunos atributos que se pueden utilizar para personalizar su apariencia y comportamiento:
align: Este atributo especifica la alineación del contenido dentro del fieldset. Los valores permitidos son “left”, “center” y “right”. Este atributo ha sido obsoleto desde HTML5 y se recomienda utilizar estilos CSS en su lugar.
accesskey: Este atributo especifica un atajo de teclado que permite al usuario enfocar en el elemento <legend> de forma rápida.
class: Este atributo se utiliza para especificar una o varias clases para el elemento <legend>, lo que permite aplicar estilos CSS específicos a través de la selección de clase.
id: Este atributo es utilizado para asignar un identificador único al elemento <legend>, lo que permite aplicar estilos CSS y manipular el elemento con JavaScript mediante la selección de ID.
style: Este atributo permite especificar estilos CSS directamente en el elemento <legend>, en lugar de utilizar una hoja de estilos externa o una clase.
title: Este atributo proporciona una descripción adicional o una herramienta de ayuda para el elemento <legend>.
Es importante tener en cuenta que algunos de estos atributos son obsoletos o deprecados en HTML5, por lo que se recomienda utilizar estilos CSS para personalizar la apariencia del elemento <legend>.
Ejemplo Un ejemplo de la etiqueta <legend> con algunos de sus atributos en HTML podría ser el siguiente:
<form>
<fieldset>
<legend accesskey="I" class="contact-legend" id="contact-info" style="font-weight: bold; color: blue;" title="Información de contacto">Información de contacto</legend> <label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">
<label for="phone">Teléfono:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</form>
En este ejemplo se utiliza el atributo “accesskey” para establecer un atajo de teclado para enfocar en el elemento <legend>, el atributo “class” para aplicar una clase específica al elemento <legend>, el atributo “id” para darle un identificador único al elemento <legend>.
El atributo “style” para aplicar estilos CSS directamente al elemento <legend> y el atributo “title” para proporcionar una descripción adicional o una herramienta de ayuda para el elemento <legend>.
La Etiqueta <select> en HTML
Se utiliza junto con la etiqueta <option> para especificar las opciones disponibles en el menú desplegable.
Cada etiqueta <option> representa una opción individual en el menú desplegable y su contenido es el texto que se mostrará en la lista.
Ejemplo de uso
En este ejemplo se crea un menú desplegable con tres opciones “Opción 1”, “Opción 2” y “Opción 3”, cada una con un valor “option1”, “option2” y “option3” respectivamente.
<select>
<option value="option1">Opción 1
<option value="option2">Opción 2
<option value="option3">Opción 3
</select>
Atributos
La etiqueta <select> en HTML5 tiene varios atributos importantes, algunos de los cuales son:
autofocus: Este atributo especifica que el control de selección debe tener el foco automáticamente cuando se carga la página.
disabled: Este atributo deshabilita el control de selección para que el usuario no pueda interactuar con él.
form: Este atributo especifica el formulario al que pertenece el control de selección.
multiple: Este atributo permite seleccionar varias opciones al mismo tiempo.
name: Este atributo especifica el nombre del control de selección, que se utiliza para enviar los datos del formulario.
required: Este atributo especifica que el usuario debe seleccionar una opción antes de enviar el formulario.
size: Este atributo especifica el número de opciones que se deben mostrar en el control de selección.
Más ejemplos
Aquí tienes algunos ejemplos de cómo utilizar la etiqueta <select> en HTML5, con algunos de sus atributos:
<label for="color">Selecciona tu color favorito:</label>
<select id="color" name="color">
<option value="rojo">Rojo</option>
<option value="verde">Verde</option>
<option value="azul">Azul</option>
</select>
<label for="tamaño">Selecciona tu tamaño de camiseta:</label>
<select id="tamaño" name="tamaño">
<option value="s">S</option>
<option value="m" selected>M</option>
<option value="l">L</option>
<option value="xl">XL</option>
</select>
<label for="frutas">Selecciona tus frutas favoritas:</label>
<select id="frutas" name="frutas" multiple>
<option value="pera">Pera</option>
<option value="manzana">Manzana</option>
<option value="platano">Plátano</option>
<option value="naranja">Naranja</option>
</select>
Otro ejemplo:
<form>
<label for="car-select">Elige tu automóvil favorito:</label>
<select id="car-select" name="car" size="3" multiple>
<optgroup label="Fabricante europeo">
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes-Benz</option>
</optgroup>
<optgroup label="Fabricante japonés">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
<input type="submit" value="Enviar">
</form>
El atributo id es utilizado para vincular el elemento <select> con una etiqueta <label> utilizando el atributo for. El atributo name es utilizado para identificar el campo select en el procesamiento del formulario. El atributo size define el número de opciones que se mostrarán en la lista desplegable.
El atributo multiple permite seleccionar varias opciones. La etiqueta <optgroup> se utiliza para agrupar opciones relacionadas en una lista desplegable. El atributo label especifica el nombre del grupo. La etiqueta <option> define las opciones disponibles en la lista desplegable. El atributo value es utilizado para especificar el valor a ser enviado al servidor.
Es importante notar que el elemento <select> debe estar dentro de un <form> para ser procesado correctamente.
La Etiqueta <optgroup> en HTML
La Etiqueta <option> en HTML
La Etiqueta <textarea> en HTML
Lenguaje del código: HTML, XML (xml) En este ejemplo se utilizan los atributos rows, cols, maxlength y required para especificar el tamaño y la validación del área de texto. El atributo placeholder es usado para proporcionar una indicación al usuario sobre qué debe ingresar en el área de texto. Además, se usa el atributo name para identificar el área de texto cuando se envía el formulario y el id junto con el atributo for del label para vincularlo con el label, permitiendo una mejor accesibilidad. Cabe mencionar que el atributo name es importante, ya que es el valor que se utilizará para identificar el campo en la petición del formulario y el atributo id es utilizado para hacer referencia al campo mediante CSS y JavaScript.
La Etiqueta <datalist> en HTML
La Etiqueta <output> en HTML
La Etiqueta <progress> en HTML
Un ejemplo de uso de la etiqueta <progress> en HTML5 podría ser una barra de progreso que muestra el progreso de una descarga.
<p>Download Progress:</p>
<progress id="downloadProgress" value="75" max="100"></progress>
<label for="downloadProgress">75%</label>
En este ejemplo, se crea una barra de progreso con un valor actual de 75 y un valor máximo de 100. También se utiliza una etiqueta para describir el estado de la barra de progreso. El id “downloadProgress” es utilizado para identificar de manera única el elemento <progress>.
También se puede utilizar JavaScript para actualizar dinámicamente el valor de la barra de progreso mientras se lleva a cabo la descarga.
var progressBar = document.getElementById("downloadProgress");
var downloadPercent = 75;
// Simular la descarga
var downloadTimer = setInterval(function(){
downloadPercent += 1;
progressBar.value = downloadPercent;
if(downloadPercent === 100){
clearInterval(downloadTimer);
}
}, 50);
Lenguaje del código: JavaScript (javascript)
En este ejemplo se utiliza javascript para actualizar el valor de la barra de progreso cada 50 milisegundos, simulando una descarga y al llegar al 100% se detiene el proceso.
Atributos
Los atributos importantes de la etiqueta
La Etiqueta <meter> en HTML
La Etiqueta <details> en HTML
de HTML5 es un elemento de contenedor utilizado para proporcionar una forma de mostrar y ocultar contenido adicional en una página web. El contenido se oculta detrás de un resumen o título que se puede hacer clic para mostrar el contenido.
El uso típico es para mostrar una descripción detallada, una lista de elementos o cualquier otro contenido adicional que no sea esencial para el contenido principal de la página.
Tabla de contenidos
Ejemplo de uso
Atributos
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza la etiqueta
en HTML:
Lenguaje del código: HTML, XML (xml)
En este ejemplo se usa la etiqueta para proporcionar un título o resumen del contenido adicional.
El contenido adicional se encuentra dentro de la etiqueta
Más información
Aquí se encuentra la información adicional
- Detalle 1
- Detalle 2
para proporcionar un título o resumen del contenido adicional.
El contenido adicional se encuentra dentro de la etiqueta y puede incluir cualquier tipo de elementos HTML. Al hacer clic en “Más información” se desplegará el contenido adicional y al hacer clic de nuevo se ocultará.
Atributos
La etiqueta de HTML5 solo tiene un atributo opcional:
open: Especifica si el contenido dentro de la etiqueta es visible al cargar la página. Si el atributo está presente, el contenido se mostrará de forma predeterminada, si no está presente el contenido estará oculto y se tendrá que hacer click en el título para mostrarlo.
Ejemplo:
Más información
Aquí se encuentra la información adicional
- Detalle 1
- Detalle 2
Lenguaje del código: HTML, XML (xml)
En este ejemplo el atributo “open” está presente, por lo cual al cargar la página el contenido adicional se mostrara automáticamente.
Es importante mencionar que esta etiqueta es soportada en los navegadores modernos, pero algunos navegadores antiguos pueden no tener soporte para ella.
de HTML5 solo tiene un atributo opcional:
open: Especifica si el contenido dentro de la etiqueta
es visible al cargar la página. Si el atributo está presente, el contenido se mostrará de forma predeterminada, si no está presente el contenido estará oculto y se tendrá que hacer click en el título para mostrarlo.
Ejemplo:
Lenguaje del código: HTML, XML (xml)
En este ejemplo el atributo “open” está presente, por lo cual al cargar la página el contenido adicional se mostrara automáticamente.
Es importante mencionar que esta etiqueta es soportada en los navegadores modernos, pero algunos navegadores antiguos pueden no tener soporte para ella.
Más información
Aquí se encuentra la información adicional
- Detalle 1
- Detalle 2
La Etiqueta <summary> en HTML
. Es una etiqueta de bloque que se utiliza dentro del elemento
para proporcionar información adicional sobre el contenido dentro del elemento
.
El contenido dentro de se mostrará como el título del elemento
se mostrará como el título del elemento y se utilizará como el primer elemento dentro del elemento al ser mostrado.
Tabla de contenidos
Ejemplo de uso
Atributos
Más ejemplos
Ejemplo de uso
Un ejemplo de cómo utilizar la etiqueta junto con el elemento podría ser el siguiente:
Información adicional
Contenido detallado aquí
Lenguaje del código: HTML, XML (xml)
En este ejemplo, el texto “Información adicional” se mostrará como el título del elemento y el contenido dentro del elemento solo se mostrará cuando el usuario haga clic en el título.
Atributos
La etiqueta de HTML5 no tiene atributos específicos, ya que es un elemento de contenido de bloque que solo contiene texto o elementos de marcado dentro de él. Sin embargo, puedes utilizar los atributos globales de HTML5 como class, id, style, etc.
Más ejemplos
Aquí hay algunos ejemplos adicionales de cómo utilizar la etiqueta junto con el elemento en HTML5:
Ejemplo 1:
Haz clic aquí para ver los detalles del producto
Nombre del producto: Camiseta
Talla: M
Color: Azul
Precio: $20
Lenguaje del código: HTML, XML (xml)
Ejemplo 2:
Información del vuelo
Número de vuelo: DL123
Fecha: 01/01/2022
Hora de salida: 8:00 AM
Hora de llegada: 10:00 AM
Lenguaje del código: HTML, XML (xml)
Ejemplo 3:
Más información sobre el evento
Nombre del evento: Concierto de rock
Fecha: 05/05/2022
Hora: 8:00 PM
Lugar: Estadio de fútbol
Artista: Band X
Lenguaje del código: HTML, XML (xml)
En los ejemplos anteriores, el contenido dentro de los elementos solo se mostrará cuando el usuario haga clic en el título proporcionado por y en el segundo ejemplo el contenido se mostrará automáticamente en la carga de la página, ya que se estableció el atributo open en .
al ser mostrado.
Tabla de contenidos
Ejemplo de uso
Atributos
Más ejemplos
Ejemplo de uso
Un ejemplo de cómo utilizar la etiqueta junto con el elemento
junto con el elemento podría ser el siguiente:
Información adicional
Contenido detallado aquí
Lenguaje del código: HTML, XML (xml)
En este ejemplo, el texto “Información adicional” se mostrará como el título del elemento y el contenido dentro del elemento solo se mostrará cuando el usuario haga clic en el título.
Atributos
La etiqueta de HTML5 no tiene atributos específicos, ya que es un elemento de contenido de bloque que solo contiene texto o elementos de marcado dentro de él. Sin embargo, puedes utilizar los atributos globales de HTML5 como class, id, style, etc.
Más ejemplos
Aquí hay algunos ejemplos adicionales de cómo utilizar la etiqueta junto con el elemento en HTML5:
Ejemplo 1:
Haz clic aquí para ver los detalles del producto
Nombre del producto: Camiseta
Talla: M
Color: Azul
Precio: $20
Lenguaje del código: HTML, XML (xml)
Ejemplo 2:
Información del vuelo
Número de vuelo: DL123
Fecha: 01/01/2022
Hora de salida: 8:00 AM
Hora de llegada: 10:00 AM
Lenguaje del código: HTML, XML (xml)
Ejemplo 3:
Más información sobre el evento
Nombre del evento: Concierto de rock
Fecha: 05/05/2022
Hora: 8:00 PM
Lugar: Estadio de fútbol
Artista: Band X
Lenguaje del código: HTML, XML (xml)
En los ejemplos anteriores, el contenido dentro de los elementos solo se mostrará cuando el usuario haga clic en el título proporcionado por y en el segundo ejemplo el contenido se mostrará automáticamente en la carga de la página, ya que se estableció el atributo open en .
Información adicional
Contenido detallado aquí
y el contenido dentro del elemento
solo se mostrará cuando el usuario haga clic en el título.
Atributos
La etiqueta Nombre del producto: Camiseta Talla: M Color: Azul Precio: $20 Número de vuelo: DL123 Fecha: 01/01/2022 Hora de salida: 8:00 AM Hora de llegada: 10:00 AM Nombre del evento: Concierto de rock Fecha: 05/05/2022 Hora: 8:00 PM Lugar: Estadio de fútbol Artista: Band X solo se mostrará cuando el usuario haga clic en el título proporcionado por de HTML5 no tiene atributos específicos, ya que es un elemento de contenido de bloque que solo contiene texto o elementos de marcado dentro de él. Sin embargo, puedes utilizar los atributos globales de HTML5 como class, id, style, etc.
Más ejemplos
Aquí hay algunos ejemplos adicionales de cómo utilizar la etiqueta
junto con el elemento
en HTML5:
Ejemplo 1:
Lenguaje del código: HTML, XML (xml)
Ejemplo 2:
Haz clic aquí para ver los detalles del producto
Lenguaje del código: HTML, XML (xml)
Ejemplo 3:
Información del vuelo
Lenguaje del código: HTML, XML (xml)
En los ejemplos anteriores, el contenido dentro de los elementos Más información sobre el evento
y en el segundo ejemplo el contenido se mostrará automáticamente en la carga de la página, ya que se estableció el atributo open en
.