En este artículo, discutiremos cómo establecer el foco en el primer campo de formulario. Al establecer el foco en el primer campo del formulario, le indicamos al usuario por dónde empezar. Aumenta la legibilidad de un formulario en una página web. Hay varios enfoques para hacerlo, explicaremos dos de ellos con ejemplos adecuados.
- Uso del atributo de enfoque automático HTML <input>
- Usando el método focus() en JavaScript
Enfoque 1: usar el atributo de enfoque automático HTML <input>. El enfoque automático es un atributo booleano que se usa junto con un elemento <input> en un formulario. El campo del formulario se enfoca automáticamente cuando se carga la página.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Set focus to the first form field</title> </head> <body> <h1> <center>Welcome to GFG</center> </h1> <center> <form> Email id: <input type="text" id="input1" autofocus /> <br /><br /> Password: <input type="text" id="input2" /> <br /><br /> <button type="submit">Submit</button> </form> </center> </body> </html>
Producción:
Enfoque 2 : Uso del método focus() en JavaScript. El método focus() se puede usar para establecer el enfoque automático y manual en el campo de formulario especificado. Puedes leer más sobre este método aquí .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Set focus to the first form field</title>
</head>
<body>
<h1>
<center>Welcome to GFG</center>
</h1>
<center>
<form>
Email id: <input type="text" id="input1" />
<br /><br />
Password: <input type="text" id="input2" />
<br /><br />
<button type="submit">Submit</button>
</form>
</center>
<script>
window.onload = function () {
document.getElementById("input1").focus();
};
</script>
</body>
</html>
Producción: