El elemento HTML <input> nos permite crear varios controles de formulario para recopilar datos del usuario. Puedes personalizar el comportamiento y la apariencia de estos controles utilizando diferentes atributos. Exploremos algunos de los atributos más utilizados:

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 que se muestra en el botón;

• Para campos de texto ( type="text" ) y contraseña ( type="password" ), define el valor predeterminado del campo de entrada;

• Para casillas de verificación ( type="checkbox" ) y botones de opción ( type="radio" ), define el valor asociado con la entrada.

Nota

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

autofocus

El atributo autofocus especifica que el campo de entrada debe recibir el foco automáticamente cuando se carga la página web. Cuando la página se carga, el campo de entrada será seleccionado automáticamente, permitiendo al usuario comenzar a escribir sin necesidad de hacer clic primero en el campo de entrada.

Nota

El atributo autofocus no funciona aquí porque la página no se recarga al hacer clic en el botón "Run Code".

required

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

placeholder

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

Nota

En los ejemplos anteriores, se utilizan diferentes atributos type para los elementos <input>, lo que afecta significativamente su apariencia y funcionalidad. Explorarás más a fondo los distintos tipos de entrada en el próximo capítulo.