Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: PHP/HTML

  1. #1
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Hi!
    I'm currently setting up a homepage using PHP/MySQL and using Photoshop to design background graphics.

    My question is: I've designed a loginpage (photoshop) wich illustrates a vault with an electronic keypad where visitors should enter their username and password. I've got all the nuts and bolts in place with regard to the members database and PHP code to verify users and to start sessions or launch cookies, but I haven't found a way to make an input form fit my graphics.

    What I would like to accomplish is to make my "electronic keypad" the form-input to verify users. Are there any way I could make a form input overlay the two input windows I graphically designed? Whenever I try to "manipulate" the form code in HTML, I get an error code. It seems form input in HTML are limited to the boring white fields neatly arranged vertically and with no possibilty to alter font-type or size. I know you can use an image to emulate a submit button, but are there any way to alter the design of the text-input boxes?
    S. Rosland

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    use javascript that activates on the onMouseover="" in the <img>, that changes the value of a hidden field(s) sorry can't spell it out for you because I suck at javascript.. but the idea is there.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    use the style property to change your input field's look, and place it in a div so you can put it exactly where you want it:
    Code:
    <div style="position: absolute; top: 100px; left: 100px">
        <input type="text" style="width: 200px; height: 40px; 
            font-family: verdana; font-color: #0000ff; 
            border: 1px solid #0000ff; background-color: #CCCCCC" />
    </div>
    Tweak the settings to make the input look exactly how you want it to, and move it to the exact location on the page where you want it with the div's style.

  5. #4
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    You should
    • Turn the keypad into an imagemap, and for each button on the map, you should have href="javascript:KeyInput(x)", with x the key pressed.
    • Add a hidden field to your form
      Code:
      <form ... name="TheForm">
        <input type="hidden" name="Password">
      </form>
    • Write a javascript function KeyInput(x) that appends x to the end of the hidden field:
      Code:
      <script language="JavaScript">
      function KeyInput(x) {
      document.TheForm.Password.value += x;
      }</script>
    • You'll have to do some extra work to make the backspace key work, but that should do it.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    James, that wouldn't display the text in the "inputs". Doing it that way, he'd also have to add divs to the screen to display the text in and use DOM to populate them.

    He's better off just using CSS to change the style and position of the input box.

  7. #6
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Thanks for all the tips!

    I'm not up to scratch on JavaScript James, I have a "bible" floating around here somwhere but I thought I'd try the CSS-style-layer combination Transio suggested first.

    And thank you Transio, that worked excellently!!

    Rosland
    S. Rosland

  8. #7
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    d'oh, misread the question. :dead: Good idea though. :cry:
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com