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...
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.
Re: aligning Textboxes and label in HTML
Hi there sanju4kk,
you have used some very unusual coding for your layout. :eek:
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
