Results 1 to 3 of 3

Thread: aligning Textboxes and label in HTML

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Oct 2008
    Location
    India, Kerala, Calicut
    Posts
    242

    Unhappy aligning Textboxes and label in HTML

    Hi

    Iam new to HTML and i am trying to make a login page with two text boxes for username and password
    Now i get stuck with the alighnment

    here is the code
    HTML Code:
    <!DOCTYPE html>
    
    <html>
    
    
    <head>
    
    <style type="text/css">
    
    body {background-color:#FAFAD2;}
    </style>
    
    </head>
    <body>
    
    <fieldset style="background-color:#6B8E23; width: 550px; margin: 250px auto; border-width: 5px;height:350px">
    
    
    <center><font color="#FFA07A;size:"5";WEIGHT:"bold"; ><marquee behavior="alternate" 
    
    direction="up"><center><blink>LOGIN</blink></center></marquee></font></center>
    
    <br>
    <br>
    
    <center><p class="username">Username<input type="text" name="userid"/></center>
    
    <br><center><p class="password">Password<input type="password" name="pswrd"/></center>
    
    <br><br><center><input type="button" onclick="check(this.form)" value="Login"/></center>
    
    <br><center><input type="reset" value="Cancel"/></center>
    
    <form>
    <script language="javascript">
        function check(form)
     if(form.userid.value == "myname" && form.pswrd.value == "myname")
        {
        window.open('welcome')
        }
        
    else
    
    {
    alert("error password or user name")
    }
    </fieldset></center>    
    </form>
    </body>
    </html>
    The text boxes and label are coming to the bottom of the page....
    any help on this will highly appreciated...

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: aligning Textboxes and label in HTML

    Hi. You have 2 <br/> in there, one after the other that are pushing your elements down.Try removing them.
    P.S. A proper way would be to either use div's or you can use a table to align. That (tables) is considered obsolete but i still use it cuz i'm accustomed to that.
    Last edited by sapator; Jun 26th, 2013 at 10:23 PM.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: aligning Textboxes and label in HTML

    Hi there sanju4kk,

    you have used some very unusual coding for your layout.

    Putting aside, the fact that logins should be done server-side rather than
    client-side, here is a more modern coding example for you to try...

    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    html,body {
        display:table;
        width:100%;
        height:100%;
        margin:0;
     }
    body {
        display:table-cell;
        vertical-align:middle;
        background-color:rgb(245,245,206);
        box-shadow:inset 0 0 40px rgba(0,0,0,0.7)
     }
    #form1 {
        background-color:rgb(107,142,35); 
        width:450px;
        padding:50px;
        margin:auto;
        border:5px double rgba(157,192,85,0.4);
        color:rgb(255,160,122);
        box-shadow:inset  0    0   40px rgba(0,0,0,0.7),
                         20px 20px 20px rgba(0,0,0,0.5);
     }
    h3 {
        margin:0 0 50px;
        text-align:center;
        text-shadow:0 0 2px #000;
     }
    div {
        overflow:hidden;
        width:270px;
        padding-bottom:20px;
        margin:auto;
        text-align:center;
     }
    #form1 label {
        float:left;
        width:100px;
        text-align:left;
        text-shadow:0 0 2px #000;
     }
    #form1 input[type=text],#form1 input[type=password] {
        float:left;
        width:160px;
        border:2px solid rgba(40,60,0,0.8);
        border-radius:5px;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
    
    function init(){
        document.getElementById('form1').onsubmit=function() {
       return check(this);
      }
     }
    function check(el) {
    if((el.userid.value=='myname')&&(el.pswrd.value=='myname')) {
      window.open('welcome')
     }
    else {
       alert('there is an error in your password or user name')
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    </script>
    
    </head>
    <body>
    
    <form id="form1" action="#">
    
    <h3>LOGIN</h3>
    
    <div>
     <label for="userid">Username</label>
     <input type="text" name="userid" id="userid">
    </div><div>
     <label for="pswrd">Password</label>
     <input type="password" name="pswrd" id="pswrd">
    </div><div>
     <input type="submit" value="Login">
    </div><div>
     <input type="reset" value="Cancel">
    </div>
    
    </form>
    
    </body>
    </html>
    coothead
    Last edited by coothead; Jun 27th, 2013 at 05:54 PM.


    ~ the original bald headed old fart ~

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width