Jump to content


Photo

Button foucs on forms


  • Please log in to reply
4 replies to this topic

#1 a1ias

a1ias
  • Members
  • PipPip
  • Member
  • 17 posts

Posted 09 June 2006 - 11:46 AM

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 (that's my daily "Lost" reference covered") of the buttons on the page.

many thanks in advance for your assistance

a1ias


#2 kenrbnsn

kenrbnsn
  • Staff Alumni
  • Advanced Member
  • 8,235 posts
  • LocationHillsborough, NJ, USA

Posted 09 June 2006 - 11:59 AM

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

#3 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 09 June 2006 - 05:00 PM

You can float the login button to the right and place it first.
<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>
Make sure the table is big enough to fit both buttons.

NoGray.com


#4 king arthur

king arthur
  • Members
  • PipPipPip
  • Advanced Member
  • 335 posts
  • LocationUK HQ

Posted 09 June 2006 - 10:02 PM

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

Job's a goodun :)
Sir Isaac Newton said "If I have seen farther, it is by standing on the shoulders of giants". But it is not recorded as to whether he said it before or after he was hit on the head by a falling apple.

#5 a1ias

a1ias
  • Members
  • PipPip
  • Member
  • 17 posts

Posted 10 June 2006 - 10:25 AM

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 :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users