Help me modify this Form

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:

src="images/login.png"

Code (markup):

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?

<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
<p>
<style type="text/css">
.form_label {
font-size: 100%;
color: #000000;
}
#user_name_login {
width: 70px;
}
#password_login {
width: 40px;
}
</style>
&nbsp;<label for="user_name_login" class="form_label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Username&nbsp;</label>
<input type="text" name="user_name_login" id="user_name_login" size="10" />
<label for="password_login" class="form_label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Password&nbsp;</label>
<input type="password" name="password_login" size="10" />
 
<select name="cookie_time"  class="login-field">
                <option value="1440">[var.lang_1_day]</option>
                <option value="10080">[var.lang_1_week]</option>
                <option value="43200">[var.lang_1_month]</option>
                <option value="-1" selected="selected">[var.lang_forever]</option>
              </select>
<input type="submit" value="[var.lang_login_now]" class="button-form" />
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
<input type="hidden" name="referer_url" value="[var.referer]">
</p>
</form>

Code (markup):

 

1. Do it with CSS ("background-image").
2. What the hell does "won't work" mean? Be descriptive.

.button-form { 
    background-image: url(http://example.com/whatever-image.png);
    background-position:  0px 0px;
    background-repeat: no-repeat;
    height: xxxpx;
    width: xxxpx;
    border: 0px;
}

Code (markup):

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.

 

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.

 

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.

 

Thanks for your reply.
Yes, how can I make the "select" lines hidden?
thanks

 

Well, you don't want to do that exactly.

<input type="hidden" name="cookie_time" value="10080" />

Code (markup):

But, I think you should change all this "backend", rather in the HTML form.

 

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.

 

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.

 

Thanks for that link, however, I don't see "the CSS on the right".

 

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.

 

Thanks for the help. (The CSS didn't appear in IE8, but did appear via Chrome).

 

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.