1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help me modify this Form

Discussion in 'HTML & Website Design' started by chrisj, Jun 26, 2013.

  1. #1
    This Form works on another page on the site. But I'd like a log-in form also on the home page.

    1. I'd like to add this as the submit button:
    Code (Text):
    1. src="images/login.png"
    2. And I'd like to remove the options. But when I remove the "select area" the form won't work.

    Can you help me modify this working form with my above 1. & 2. requests?

    Code (Text):
    1. <form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
    2. <p>
    3. <style type="text/css">
    4. .form_label {
    5. font-size: 100%;
    6. color: #000000;
    7. }
    8. #user_name_login {
    9. width: 70px;
    10. }
    11. #password_login {
    12. width: 40px;
    13. }
    14. </style>
    15. &nbsp;<label for="user_name_login" class="form_label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Username&nbsp;</label>
    16. <input type="text" name="user_name_login" id="user_name_login" size="10" />
    17. <label for="password_login" class="form_label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Password&nbsp;</label>
    18. <input type="password" name="password_login" size="10" />
    19.  
    20. <select name="cookie_time"  class="login-field">
    21.                 <option value="1440">[var.lang_1_day]</option>
    22.                 <option value="10080">[var.lang_1_week]</option>
    23.                 <option value="43200">[var.lang_1_month]</option>
    24.                 <option value="-1" selected="selected">[var.lang_forever]</option>
    25.               </select>
    26. <input type="submit" value="[var.lang_login_now]" class="button-form" />
    27. <input type="hidden" name="submitted" value="yes" />
    28. <input type="hidden" name="remember_me" value="remember_me" />
    29. <input type="hidden" name="referer_url" value="[var.referer]">
    30. </p>
    31. </form>
    chrisj, Jun 26, 2013 IP
  2. ryan_uk

    ryan_uk Prominent Member

    Messages:
    3,943
    Likes Received:
    991
    Best Answers:
    33
    Trophy Points:
    365
    #2
    1. Do it with CSS ("background-image").
    2. What the hell does "won't work" mean? Be descriptive.
    Code (Text):
    1. .button-form {
    2.     background-image: url(http://example.com/whatever-image.png);
    3.     background-position:  0px 0px;
    4.     background-repeat: no-repeat;
    5.     height: xxxpx;
    6.     width: xxxpx;
    7.     border: 0px;
    8. }
    At least I assume you won't want a border as you will be using an image. Replace the xxx in height and width with the respective values of the image.
    ryan_uk, Jun 27, 2013 IP
  3. chrisj

    chrisj Active Member

    Messages:
    450
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Thanks for your reply.
    I used your CSS background suggestion, and it shows the image, thanks.
    However, I still need to hide the 'select" area". Any help with that will be greatly appreciated.
    In regard to being descriptive, sorry, the Form code shows alot about "login", I just assumed that the person reading it might know that it "won't work" would mean - unable to login.
    Any additional help is appreciated.
    chrisj, Jun 27, 2013 IP
  4. ryan_uk

    ryan_uk Prominent Member

    Messages:
    3,943
    Likes Received:
    991
    Best Answers:
    33
    Trophy Points:
    365
    #4
    I assume because whatever underlying code there is is not receiving a value for "cookie_time". You could make a hidden form field for it instead, if you can't change the underlying code.

    But this is a guess, as really there's not much information to go on.
    ryan_uk, Jun 27, 2013 IP
  5. chrisj

    chrisj Active Member

    Messages:
    450
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    Thanks for your reply.
    Yes, how can I make the "select" lines hidden?
    thanks
    chrisj, Jun 27, 2013 IP
  6. ryan_uk

    ryan_uk Prominent Member

    Messages:
    3,943
    Likes Received:
    991
    Best Answers:
    33
    Trophy Points:
    365
    #6
    Well, you don't want to do that exactly.

    Code (Text):
    1. <input type="hidden" name="cookie_time" value="10080" />
    But, I think you should change all this "backend", rather in the HTML form.
    ryan_uk, Jun 27, 2013 IP
  7. chrisj

    chrisj Active Member

    Messages:
    450
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #7
    Thanks much. Now the only issue I have is alignment. Now, when I remove the image, the user and password fields are vertically centered, but, as you can see by the attached image, when the "Log In" image is added in the user and password fields are lower. I've tried to fix this, but I guess I'm not skilled enough. Any suggestion will be appreciated.

    Attached Files:

    chrisj, Jun 27, 2013 IP
  8. ryan_uk

    ryan_uk Prominent Member

    Messages:
    3,943
    Likes Received:
    991
    Best Answers:
    33
    Trophy Points:
    365
    #8
    More like this?
    http://jsfiddle.net/q8ker/2/

    Look at the CSS on the right. I used position and margins. You will need to experiment as your image is probably a different size.
    ryan_uk, Jun 27, 2013 IP
  9. chrisj

    chrisj Active Member

    Messages:
    450
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #9
    Thanks for that link, however, I don't see "the CSS on the right".
    chrisj, Jun 27, 2013 IP
  10. ryan_uk

    ryan_uk Prominent Member

    Messages:
    3,943
    Likes Received:
    991
    Best Answers:
    33
    Trophy Points:
    365
    #10
    The link opens up the JSFiddle.net site and there should be four boxes. Top Left - a mix of CSS/HTML. Bottom Left - empty. Top Right - CSS. Bottom Right - the form.
    ryan_uk, Jun 27, 2013 IP
  11. chrisj

    chrisj Active Member

    Messages:
    450
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #11
    Thanks for the help. (The CSS didn't appear in IE8, but did appear via Chrome).
    chrisj, Jun 28, 2013 IP
  12. ryan_uk

    ryan_uk Prominent Member

    Messages:
    3,943
    Likes Received:
    991
    Best Answers:
    33
    Trophy Points:
    365
    #12
    Yeah, using a real browser is always a better idea, mate. The only time I use IE is to check how a site looks, otherwise I prefer Chrome to ensure a site is rendered properly.
    ryan_uk, Jun 28, 2013 IP