Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting focus on an HTML input box on page load
    text
    copied!<p>I'm trying to set the default focus on an input box when the page loads (example: google). My page is very simple, yet I can't figure out how to do this.</p> <p>This is what I've got so far:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Password Protected Page&lt;/title&gt; &lt;script type="text/javascript"&gt; function FocusOnInput() { document.getElementById("PasswordInput").focus(); } &lt;/script&gt; &lt;style type="text/css" media="screen"&gt; body, html {height: 100%; padding: 0px; margin: 0px;} #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;} #middle {vertical-align: middle} #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;} &lt;/style&gt; &lt;/head&gt; &lt;body onload="FocusOnInput()"&gt; &lt;table id="outer" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt;&lt;td id="middle"&gt; &lt;div id="centered"&gt; &lt;form action="verify.php" method="post"&gt; &lt;input type="password" name="PasswordInput"/&gt; &lt;/form&gt; &lt;/div&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>How come that doesn't work while this works fine?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function FocusOnInput() { document.getElementById("InputID").focus(); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="FocusOnInput()"&gt; &lt;form&gt; &lt;input type="text" id="InputID"&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Help is much appreciated :-)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload