Atributo autofocus en HTML

Focus automático a input de HTML 5

Dejar un comentario / HTML, web / Por

En este post te mostraré a usar el atributo autofocus de los input en HTML para dar un focus automático a los elementos, es decir, dar focus a un campo de texto cuando se carga la página, sin usar JavaScript.

Nota: si quieres enfocar un elemento de manera programada, utiliza JavaScript y la función focus.

Atributo autofocus en HTML 5

Para que un input esté enfocado, hay que definir el atributo autofocus. Esta propiedad es booleana, es decir, el atributo no lleva ningún valor, basta con que esté presente.

<input autofocus type="text" placeholder="Con autofocus"/>

De esta manera el input va a obtener el foco o será enfocado al entrar a la página. Veamos un ejemplo:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Autofocus</title>
</head>

<body>
	<a href="//parzibyte.me/blog">By Parzibyte</a>
	<br>
	<input type="text" placeholder="Sin autofocus"/>
	<br><br>
	<input autofocus type="text" placeholder="Con autofocus"/>
  </body>
</html>

En este caso un input tiene el focus automático y otro no.

Atributo autofocus en HTML

 

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *