Input Atributos

El elemento HTML <input> nos permite crear varios controles de formulario para recoger las entradas del usuario. Podemos personalizar el comportamiento y la apariencia de estos controles utilizando diferentes atributos. Vamos a explorar algunos atributos de uso común:

value

El atributo value se utiliza para establecer el valor inicial del elemento <input>. El valor específico que toma depende del tipo de entrada:

Para botones (type="button", type="reset", type="submit"), define el texto mostrado en el botón;
Para los campos de texto (type="text") y contraseña (type="password"), define el valor por defecto del campo de entrada;
Para las casillas de verificación (type="checkbox") y los botones de radio (type="radio"), define el valor asociado a la entrada.

Nota

El atributo value no puede utilizarse con <input type="file">.

Ejemplo:

index.html

autofocus

El atributo autofocus especifica que el campo de entrada debe tener automáticamente el foco cuando se carga la página web. Cuando se cargue la página, el campo de entrada se seleccionará automáticamente, permitiendo al usuario empezar a escribir sin hacer clic primero en el campo de entrada.

Ejemplo:

index.html

required

El atributo required se utiliza para hacer obligatorio un campo de entrada. Especifica que el campo debe rellenarse antes de que el usuario pueda enviar el formulario. Si el usuario intenta enviar el formulario sin rellenar el campo obligatorio, recibirá un mensaje de error de validación indicando que el campo es obligatorio.

Ejemplo:

index.html

placeholder

El atributo placeholder proporciona al usuario una pista o ejemplo del valor de entrada esperado. Se muestra una breve cadena de texto dentro del campo de entrada antes de que el usuario introduzca ningún valor. Esto es útil para campos que requieren un formato específico, como números de teléfono o de tarjeta de crédito.

Ejemplo:

index.html

Nota

En los ejemplos anteriores, utilizamos diferentes atributos type para los elementos <input>, lo que afecta significativamente a su apariencia y funcionalidad. Profundizaremos en los distintos tipos de entrada en el próximo capítulo.

1. ¿Qué atributo se utiliza para establecer el valor por defecto de un elemento de entrada?

2. ¿Qué atributo se utiliza para establecer una sugerencia o un ejemplo del valor esperado para un elemento de entrada?

3. ¿Qué atributo se utiliza para especificar que un campo de entrada debe rellenarse antes de enviar el formulario?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 5. Capítulo 4