Need help to combine CSS with Javascipt - Login form

Dev Shed Forums Sponsor:

September 18th, 2012, 05:03 PM

codernoob

Registered User

Join Date: Sep 2012

Posts: 1

Time spent in forums: 43 m 20 sec
Reputation Power: 0

Need help to combine CSS with Javascipt - Login form

Hi,

Am building a website - which will run on bunch of network computers.
Practically new to Javascript and CSS and so been using available templates and code snippets to build this.

I have a CSS code for the login box whichs is as below

Code:

    
    <H2>Admin Login</H2>
    <br />
    <br />
    <div id="login-box-name" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="q" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div>
    <div id="login-box-name">Password:</div><div id="login-box-field"><input name="q" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>
    <br />
    <span class="login-box-options"><input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
    <br />
    <br />
    <a href="#"><img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>

Now I have a simple javascript username/password script which I would like to combine (this owrks fine in its own way - but i would like to add the above css /PSD combination for login with this code below):

Code:

    <script type="text/javascript">
    <!--
    if (location.search.indexOf("auth=failed") != -1) {
    	document.write("<span style=\"color:#ff0000\">Authorization Failed! Please Enter correct Details</span>");
    }
    // -->
    </script>
    <form id="form1" action="javascript://"
     onsubmit="return authPass(this.user.value,this.pass.value)">
      <table>
        <tbody>
          <tr>
            <td>Username: </td>
            <td><input name="user" type="text"></td>
          </tr>
          <tr>
            <td>Password: </td>
            <td><input name="pass" type="password"></td>
          </tr>
          <tr>
            <td colspan="2" align="center"><input
     value="Login" type="submit"></td>
          </tr>
        </tbody>
      </table>
    </form>

Can anyone help me combine these two??

Would be great help!

Thanks

September 19th, 2012, 05:56 AM

Lenton

Registered User

Join Date: Mar 2012

Posts: 10

Time spent in forums: 4 h 45 m 27 sec
Reputation Power: 0

html4strict Code:

Original - html4strict Code

<script type="text/javascript">
if(location.search.indexOf("auth=failed") != -1) {
    document.write('<span style="color:#ff0000">Authorization Failed! Please Enter correct Details</span>');
}
</script>
<h2>Admin Login</h2>
<br /><br />
<form id="form1" action="javascript://" onsubmit="return authPass(this.user.value,this.pass.value)">
    <div id="login-box-name" style="margin-top:20px;">Username:</div>
    <div id="login-box-field" style="margin-top:20px;"><input name="user" class="form-login" title="Username" size="30" maxlength="2048" /></div>
    
    <div id="login-box-name">Password:</div>
    <div id="login-box-field"><input name="pass" type="password" class="form-login" title="Password" size="30" maxlength="2048" /></div>
    <br />
    
    <span class="login-box-options"><input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
    <br /><br />
    
    <input type="image" src="images/login-btn.png" style="margin-left:90px;width:103px;height:42px" />
</form>

Need help to combine CSS with Javascipt - Login form

Developer Shed Advertisers and Affiliates