Jump to content

Archived

This topic is now archived and is closed to further replies.

a1ias

Button foucs on forms

Recommended Posts

Hi ppl

This is not particularly php specific I imagine but does play a major part in any php driven form script so the information will be very useful.

I basically have a form on a page - in this instance a login form that asks for username and password.

Below the forms are 2 Submit buttons, a 'Lost Password' on the left and a 'Login' on the right as follows:

<td><input type="submit" name="lostpass" value="Lost Password"></td><td><input type="submit" name="login" value="Login"></td>

By default, as soon as an entry is made in one of the fields, the focus appears on the 'Lost Password' button, no doubt as it is the first button that the code comes to. The problem being that for the lazy page users who enter their username/password then hit enter instead of actually clicking on a button, they are taken to the 'lostpass' script.

Is there a way to apply the focus to the 'Login' button by default without changing the actual orientation [i](that's my daily "Lost" reference covered")[/i] of the buttons on the page.

many thanks in advance for your assistance

a1ias

Share this post


Link to post
Share on other sites
Since PHP runs on the server and has no clue as to the presentation of the form to the user, this needs to be done client-side. It's usually done via Javascript.

Moving this to the Javascript forum

Ken

Share this post


Link to post
Share on other sites
You can float the login button to the right and place it first.
[code]
<form>
<table><tr>
<td>Username:</td><td><input type="text" /></td>
</tr><tr>
<td colspan="2">
<input type="submit" name="login" value="Login" style="float:right;">
<input type="submit" name="lostpass" value="Lost Password">
</td>
</tr>
</table>
</form>
[/code]
Make sure the table is big enough to fit both buttons.

Share this post


Link to post
Share on other sites
[code]
<td><input type="submit" name="lostpass" value="Lost Password" tabindex="2"></td>
<td><input type="submit" name="login" value="Login" tabindex="1"></td>
[/code]

Job's a goodun :)

Share this post


Link to post
Share on other sites
Thanks for the responses guys, I'll play around and let you know the result as soon as my server is back up :/

I did actually try the tabindex, but I think that it quite literally works only in conjunction with tabbing between buttons.

However, I'll see what happens later :)

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.