¿Como funciona el comando en HTML5: 'Input'?

Instrucción HTML5 <input>

El elemento <input> en HTML5 es uno de los componentes más esenciales y versátiles para la creación de formularios. Permite a los usuarios introducir información de diversos tipos y, por tanto, viene equipado con una variedad muy amplia de atributos. A continuación se describen los atributos más importantes que pueden utilizarse con el elemento <input>:

• type: Define el tipo de control de entrada a ser mostrado. Los tipos más comunes incluyen text, password, email, number, date, etc.
• name: Especifica el nombre del control de entrada y se usa para identificar el elemento cuando se envia el formulario.
• value: Define el valor inicial del control de entrada.
• id: Proporciona un identificador único para el elemento, útil para vincularlo con etiquetas <label> y para estilos CSS o manipulación con JavaScript.
• class: Añade una o más clases CSS al elemento, permitiendo aplicarle estilos particulares.
• placeholder: Muestra un texto de sugerencia dentro del campo hasta que el usuario comience a introducir texto.
• required: Indica que el campo es obligatorio para enviar el formulario.
• readonly: El campo será de solo lectura, lo que significa que el usuario no puede modificar su valor.
• disabled: Deshabilita el campo, de modo que no se puede interactuar con él y no se envía su valor.
• max y min: Especifican los valores máximo y mínimo para los tipos de entrada que aceptan conteo, como number, date, etc.
• maxlength: Establece el número máximo de caracteres que el usuario puede introducir en un campo de tipo text o password.
• pattern: Define una expresión regular que el valor de entrada debe coincidir.
• autocomplete: Indica si el navegador debe proporcionar autocompletado para el campo de entrada.
• autofocus: Hace que el campo de entrada obtenga automáticamente el foco cuando se carga la página.
• multiple: Permite la selección de múltiples valores para ciertos tipos de entrada, como file y email.
• step: Define el intervalo de validación para tipus como number y date, especificando como deben incrementarse/decrementarse los valores del campo.
• size: Especifica el ancho visual del campo de entrada en caracteres.

Uso de <input> en HTML5 con Ejemplos

El uso del elemento <input> es muy común y diversas formas simplifican la interacción del usuario con los formularios web. A continuación se presentan algunos ejemplos para ilustrar su uso:

Ejemplo 1: Campo de Texto

<form>
  <label for="username">Nombre de usuario:</label>
  <input type="text" id="username" name="username" placeholder="Introduce tu nombre de usuario" required>
  <input type="submit" value="Enviar">
</form>

En este ejemplo, se crea un campo de texto donde el usuario debe introducir su nombre de usuario con un texto de sugerencia. El campo es obligatorio para enviar el formulario.

Ejemplo 2: Campo de Correo Electrónico

<form>
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" placeholder="e.j. usuario@dominio.com" required>
  <input type="submit" value="Enviar">
</form>

Aquí se utiliza un campo de entrada de tipo email que valida automáticamente si el formato del correo es correcto.

Ejemplo 3: Campos de Número

<form>
  <label for="age">Edad:</label>
  <input type="number" id="age" name="age" min="18" max="100" step="1" required>
  <input type="submit" value="Enviar">
</form>

En este caso, se crea un campo para la entrada de número donde se especifican los valores mínimo y máximo, y el paso de incremento.

Ejemplo 4: Fecha y Hora

<form>
  <label for="birthdate">Fecha de nacimiento:</label>
  <input type="date" id="birthdate" name="birthdate" required>
  <input type="submit" value="Enviar">
</form>

Este ejemplo muestra un campo de fecha que permite a los usuarios seleccionar una fecha específica desde un calendario emergente.

Ejemplo 5: Selección de Archivos

<form>
  <label for="avatar">Sube tu avatar:</label>
  <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
  <input type="submit" value="Enviar">
</form>

Este ejemplo permite a los usuarios subir archivos, restringido a formatos de imagen JPEG y PNG.

Cada uno de estos ejemplos demuestra cómo el elemento <input> puede adaptarse a diferentes necesidades de entrada de datos en formularios HTML5.