Formular Gestalltung

[SchokoBrunnen]

Hallo,

ich weiß nicht ob ich das hier richtig ist, aber ich hoffe hier bekomme ich auch Hilfe.
Ich hab folgenden Loginscript:

if( !empty( $exchange['loginerror'] )) echo ''.$exchange['loginerror'].'';echo '<form action="" method="post"><input type="text" name="login_name" size="20"><input type="password" name="login_pass" size="20"> <br><input type="image" src="login.png" alt="LOGIN"></form>';

Das sieht jetzt so aus:


Ich möchte aber, dass es so aussieht:

Der Code zu dem:

<input type="text" name="login_name" onfocus="if(this.value=='Username') { this.value=''; }"  style="width: 163px; height: 32px; border: 0; text-align: center; color: grey; font-weight: bold; padding: 0 0px 0 0px; background-image: url(user.png); background-color: transparent; margin-bottom: 3px; padding: 0 10px 0 27px;"/>

Mein Problem ist es, die kleinen Icons in die Formulare einzubringen. Das mit dem Registrier Button kriege ich auch nicht richtig hin..

 

[SchokoBrunnen]

Kann mir da einer helfen?

 

[Tronjer]

Pack doch die Icons als background-image auf die <input> Felder und positioniere sie mit left center.

 

[SchokoBrunnen]

Hab das jetzt mal so gemacht:

if( !empty( $exchange['loginerror'] )) echo ''.$exchange['loginerror'].'';echo '<form action="" method="post"><input type="text" name="login_name" class="login" size="20"><input type="password" name="login_pass" class="regi"  size="20"> <br><input type="image" src="login.png" alt="LOGIN"></form>';

CSS:

.login{
  background-image:url('user.png');
  background-repeat:no-repeat;
  padding-left:30px;
  padding-bottom:15px;
}


.regi{
  background-image:url('pw.png');
  background-repeat:no-repeat;
  padding-left:20px;
  padding-bottom:15px;
}

Hat zwar geklappt, aber wie entferne ich den Rand?


PS:
Mein neuer Code ist hier, mit dem Registrier Button:

if( !empty( $exchange['loginerror'] )) echo ''.$exchange['loginerror'].'';
echo '<form action="" method="post"><input type="text" name="login_name" class="login" size="20">
<input type="password" name="login_pass" class="regi"  size="20"> 
<br><input type="image" src="login.png" alt="LOGIN">
<input type="image" src="regristrieren1.png" alt="REGISTRIEREN">
</form>';

Wie kann ich es aber machen, dass es bei einem Klick auf eine Seite gelangt? (z.B. test.html)