如何设置用户名和密码文本框

时间：2013-11-05 05:46:19

标签： php html css

我正在尝试将管理员登录设置在中间，以便它看起来更好，这是代码。 

<?php
session_start();
$username="user";
$password="123";

if(isset($_POST['username']) && $_POST['password'] == $password)
{
    header("Location: mainpage.php");
}
else
{
?>

<html>
    <head>
    </head>
    <body>

        <div style='text-align:center'>
        <h3>Welcome To Kontak</h3>
        </div>
        <hr /><br />
        <form id='login' action="" method='post' accept-charset='UTF-8'>
            <fieldset style="width:550px">
            <legend>Admin Login</legend>
            <input type='hidden' name='submitted' id='submitted' value='1'/>

            <label for='username' >UserName:</label>
            <input type='text' name='username' id='username'  maxlength="50" />


            <label for='password' >Password:</label>
            <input type='password' name='password' id='password' maxlength="50" />

            <input type='submit' name='submit' value='Submit' />
            </fieldset>
        </form>
    </body>
</html>
<?php
}
?>

管理员登录和框没有居中，我确信解决方案很简单，但我不是最好的PHP。

3 个答案:

答案 0 :(得分：1)

这不是php问题，您可以使用HTML和CSS执行此操作。

我已创建登录表单...


enter image description here


的 HTML 

<form id="login" class="login">
  <h2>Please log in</h2>
  <label for="user" class="icon-user">User:</label>
  <input class="user" id="user" />
  <label for="password" class="icon-lock">Password:</label>
  <input type="password" class="password" id="password" />

  <input type="submit" value="Go" />
  <ul class="extra">
    <li><a href="#" class="forgetPassword">Forgot Password</a></li>
  </ul>
</form>

<div class="blur"></div>

<强> CSS 

* {
  user-select: none;
  @include box-sizing(border-box);
}

html {
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;
}

body {
  font-family:"Roboto", Arial, sans-serif;
  font-weight: 400;
  color: white;
}

.blur {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url('http://www.wallgc.com/images/2013/05/abstract-wallpaper-abstract-wallpapers.jpg') no-repeat;
  background-position: center bottom;
  z-index: -1;
}

.login {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
  width: 300px;
  height: 300px;
  color: rgba(#fff, .85);
  display: inline-block;
  font-size: 16px;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 10px;
  @include background-clip(padding-box);
  @include box-shadow(inset -1px 1px 0px rgba(255, 255, 255, 0.3),
  inset 1px 1px 0px rgba(255, 255, 255, 0.3)
  );
  border: 1px solid #000;
  background-color: rgba(#000, .1);
  @include background-image(linear-gradient(top, rgba(#000, .1), rgba(#000, .3)));
  h2 {
    margin: .5em;
    text-align: center;
    //@include background-image(linear-gradient(#fff, #eee));
    //@include background-clip(text);
    //-webkit-text-fill-color: transparent;
    text-shadow: 0 1px 2px rgba(#000,.5);
    font-weight: 900;
  }
  input,
  label,
  .extra {
    outline: none;
    position: absolute;
  }
}

.user,
.password {
  font-size: 150%;
  color: #fff;
  @include box-sizing(border-box);
  height: 45px;
  padding: .3em 20px .3em 40px;
  width: 270px;
  background: rgba(#000, .3);
  border: 0;
  border-radius: 25px;
  box-shadow: 0 -1px 1px rgba(#fff, .8) inset;
}
.password {
  padding: .3em 70px .3em 40px;
}
[for="user"],
.user {
  top: 70px;
}
[for="password"],
.password,
input[type="submit"] {
  top: 150px;
}

[for="password"],
[for="user"] {
  text-indent: -9999px;
  &:before {
      text-indent: 0;
      position: absolute;
      top: 12px;
      left: 15px;
      font-size: 120%;
      z-index: 1;
  }
}

input[type="submit"] {
  right: 17px;
  height: 43px;
  width: 60px;
  background-color: #6bac14;
  @include background-image(linear-gradient(to bottom, #8ff704, #1c8700));
  border: 0;
  border-radius: 0 25px 25px 0;
  box-shadow: 0 5px 2px #a6ee40 inset, 1px 1px 0 rgba(#000, .5);
  color: #fff;
  text-transform: uppercase;
  font-size: 110%;
  text-shadow: 1px 1px 0 rgba(#000, .5);
  text-align: center;
}

label[for="remember"] {
  top: 210px;
  left: 40%;
  cursor: pointer;
  white-space: nowrap;
}
#remember { visibility: hidden;}
.remember {
  &:before,
  &:after {
      visibility: visible;
      content: '';
      position: absolute;
      left:-35px;
      top: 4px;
  }
  &:before {
      right: -2px;
      width: 30px;
      height: 15px;
      border-radius: 10px;
      box-shadow: inset 0 1px 2px rgba(#000, .8);
      @include background-image(linear-gradient(top, rgba(#000, .1) 0%, rgba(#000,.2) 100%));
  }
  &:after {
      top: 2px;
      width: 16px;
      height: 16px;
      background-color: #fff;
      @include background-image(linear-gradient(top, #E5E5E5 0%, #878787 100%));
      border: 1px solid rgba(#000,.5);
      border-radius: 50%;
      box-shadow: inset 0px 1px 1px white, 0 1px 1px rgba(0,0,0,.8);
      right:11px;
  }
}
#remember:checked + .remember {
  &:before {
    @include background-image(linear-gradient(top, #C25830 0%, #F69C3C 100%));
  }
  &:after {
      left: -21px;
      font-family: FontAwesome;
      content: '\f00c';
      color: rgba(#000, .4);
  }
}

.extra {
  margin: 0;
  padding: 0;
  list-style: none;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: rgba(#000,.3);
  left: 0;
  border-radius: 0 0 10px 10px;
  @include box-shadow(inset -1px 1px 0px rgba(255, 255, 255, 0.3),
  inset 1px 0 0px rgba(255, 255, 255, 0.3)
  );
  border-top: 1px solid #000;
  word-spacing: -1;
  a {
    display: inline-block;
    text-decoration: none;
    height: 100%;
    &.facebook,
    &.googlePlus {
      top: 0;
      background-position: left top;
      background-repeat: no-repeat;
      width: 49px;
      text-indent: 9999px;
      position: absolute;
      top: 0;
      right: 0;
      &:before {
        position: absolute;
        top: 7px;
        left: 12px;
        text-indent: 0;
        color: rgba(#fff, .8);
        font-size: 180%;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
      }
    }

    &.forgetPassword {
      width: 200px;
      color: #fff;
      line-height: 45px;
      text-align: center;
      text-shadow: 0 1px 1px rgba(black, 0.5);
      &:before {
        font-family: FontAwesome;
        content: '\f0e2';
        padding-right: 5px;
      }


    }
  }
}

答案 1 :(得分：0)

使用style="margin: 0px auto; width: 550px;"表格，如下所示

或

您也可以使用<fieldset style="margin: 0px auto;width:550px"> 

<html>
    <head>
    </head>
    <body>

        <div style='text-align:center'>
        <h3>Welcome To Kontak</h3>
        </div>
        <hr /><br />
        <form id='login' action="" method='post' accept-charset='UTF-8' style="margin: 0px auto; width: 550px;">
            <fieldset style="width:550px">
            <legend>Admin Login</legend>
            <input type='hidden' name='submitted' id='submitted' value='1'/>

            <label for='username' >UserName:</label>
            <input type='text' name='username' id='username'  maxlength="50" />


            <label for='password' >Password:</label>
            <input type='password' name='password' id='password' maxlength="50" />

            <input type='submit' name='submit' value='Submit' />
            </fieldset>
        </form>
    </body>
</html>

答案 2 :(得分：0)

<form id='login' action="" method='post' accept-charset='UTF-8'>

到

<form id='login' action="" method='post' accept-charset='UTF-8' style='text-align: center'>

我在这里做的是添加CSS Text-Align

PHP是后端的东西，它与浏览器解释的内容无关

相关问题
最新问题