Linea de Codigo

Antes de tener la especificación de HTML5 si queríamos realizar un autofoco a un campo, es decir, que al cargar una página el foco del cursor se pusiese en un campo de un formulario, teníamos que utilizar código Javascript.
Ahora, gracias a HTML5, podemos acometer esta labor de una forma sencilla.

Lo primero será definir el formulario. En nuestro caso tendrá dos simples campos de entrada de texto:

<form>
  <label for="nombre">¿Cómo te llamas?</label>
  <input id="nombre" type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
  <input id="edad" type="text" />
</form>

Si lo que queremos es que el autofoco se realice sobre el campo INPUT nombre, le añadiremos el atributo autofocus. Quedándonos el siguiente código:

<form>
  <label for="nombre">¿Cómo te llamas?</label>
  <input id="nombre" autofoucs type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
  <input id="edad" type="text" />
</form>

El atributo autofocus solo puede aplicarse sobre un único campo del formulario

Solo tenemos que tener cuidado de una cosa y es que la especificación HTML5 todavía no está terminada ni implementada en todos los navegadores web. Es por ello que puede ser que no funcione correctamente. Las versiones mínimas en las que funciona son Chrome 6, Firefox 4, Opera 11, Safari 5 e Internet Explorer 10. Quizás la versión del Internet Explorer sea la que más problemas pueda ocasionarte.

En este caso podemos recurrir a la implementación en Javascript. En este caso vamos a crear mediante Javascript un elemento INPUT ficiticio y vamos a comprobar si este tiene el atributo autofocus o no. En caso de que no lo tenga lanzaremos el código Javascript con el método .focus()

if(!("autofocus" in document.createElement("input")))
  document.getElementById("nombre").focus();