El atributo de enfoque automático en HTML se usa para especificar que el elemento debe enfocarse cuando se carga la página. Es un atributo booleano.
Sintaxis:
<elementName autofocus>
Nota: Solo admite los siguientes elementos: <button> , <input> , <select> y <textarea> .
Etiquetas admitidas:
- Atributo de enfoque automático del botón
- Atributo de enfoque automático de entrada
- Atributo de enfoque automático Keygen
- Seleccionar atributo de enfoque automático
- Atributo de enfoque automático de área de texto
Ejemplo 1: en este ejemplo, estamos usando un atributo de enfoque automático seleccionado que crea el menú desplegable para los cursos de GeeksforGeeks.
HTML
<!DOCTYPE html> <html> <body> <h2>GeeksforGeeks</h2> <p> The select element is used to create a drop-down list. </p> <form> <label for="courses">Select a course:</label> <select name="DSA Self Paced GfG" id="DSA"> <option value="Full Stack Web Technology"> Web Tech </option> <option value="Amazon Interview Preparation"> Amazon </option> <option value="Complete Interview Preparation"> CIP </option> <option value="Google Test Series"> GTS </option> </select> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
Producción:
atributo de enfoque automático
Ejemplo 2: este ejemplo utiliza el atributo de enfoque automático para crear el foco en el primer nombre al cargar la página por primera vez.
HTML
<!DOCTYPE html> <html> <head> <title>HTML autofocus Attribute</title> </head> <body style="text-align: center;"> <h1 style="color: green;">GeeksforGeeks</h1> <h2>HTML autofocus Attribute</h2> <form> <label>First Name: <input type="text" autofocus placeholder="Enter Name"> </label> </form> </body> </html>
Producción:
atributo de enfoque automático
Ejemplo 3: este ejemplo utiliza el atributo de enfoque automático con la etiqueta <textarea>.
HTML
<!DOCTYPE html> <html> <head> <title>HTML autofocus Attribute</title> </head> <body style="text-align: center;"> <h1 style="color: green;">GeeksforGeeks</h1> <h2>HTML autofocus Attribute</h2> <textarea rows="3" cols="30" autofocus> A computer science portal for geeks. </textarea> </body> </html>
Producción:
atributo de enfoque automático
Navegadores compatibles:
- Google Chrome 5.0
- Internet Explorer 10.0
- Firefox 4.0
- Ópera 9.6
- Safari 5.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA