How to set the default input focus on a field in an HTML web form

When I create a web-based user interface I tend to be a fanatic about making sure that the first input field on a form gets input focus when the form is first displayed. It always drives me crazy when I go to a web form that requires text input, but the developer of the page hasn‘t taken the time to put the default focus in the first field of the form.

So ... after looking around at some HTML/JSF/Struts/JSP code I‘ve written over the last few years, the following JSF example shows the most concise way I know of setting default input focus on an HTML form field:

<h:form id="contact_add">
<table>
<tr>
  <td>Contact Name:</td>
  <td><h:inputText id="contact_name" size="20" value=""/></td>
  <td><h:message for="contact_name"/></td>
</tr>
<!-- the rest of your form would be here ... ->
</table>
</h:form>

<!-- code to set the default input focus -->
<script>
  document.getElementById(‘contact_add:contact_name‘).focus();
</script>

In this example I use the

document.getElementById(‘contact_add:contact_name‘).focus();

syntax to put the default input focus in the textfield named contact_add:contact_name. When using JSF, this is the name JSF ends up applying to my "first name" textfield. In your code just use the name of your HTML component.