Question

如何使我的代码像图像中的那样？

目前，我的代码如下所示：

<form id="form" action="/action_page.php">
    Login ID:<br>
    <input type="text" name="id" id="id">
    <br>
    Password:<br>
    <input type="password" name="password" id="password">
    <br><br>
    <a href="#" class="btn btn-info" role="button">Register</a>
    <input type="submit" value="Submit">
</form>

Answer 1

使用CSS代替

<style>
 .login_form
 {
    width: 200px;
    height: 200px;
    margin: auto;
    background: gray;
    text-align: center;

 }
.login_form a{

    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;

 }
</style>


<div class="login_form">
  <form id="form" action="/action_page.php">
    Login ID:<br>
    <input type="text" name="id" id="id">
    <br>
    Password:<br>
    <input type="password" name="password" id="password">
    <br><br>
    <a href="#" class="btn btn-info" role="button">Register</a>
    <input type="submit" value="Submit">
  </form> 
</div>

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        #form{
            margin-top: 200px
        }
        .button,.btn-info{
            font-size: 20px;
            border: solid 1px black;
            background: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            margin: 15px;
            padding: 12px;
            width: 120px

        }

        .btn-info{
            text-decoration: none;
            color: #000;
        }

        .button:hover,.btn-info:hover{
            background-color: gray;
            color: #fff
        }

        .label1,.label2{
            font-weight: 500;
            font-size: 25px
        }
        .password,.id{
            width: 150px;
            height: 20px;
        }

    </style>
</head>
<body>
    <center>
        <form id="form" action="/action_page.php">
          <table>
              <tr>
                  <td><label for="id" class="label1">Login ID :</label></td>
                  <td> <input type="text" name="id" id="id" class="id"></td>
              </tr>
              <tr>
                  <td><label for="password" class="label2"> Password :</label></td>
                  <td> <input type="password" name="password" id="password" class="password"></td>
              </tr>

              <tr>

                  <td></td>
                  <td></td>
              </tr>
          </table>

        <a href="#" class="btn-info" role="button" >Register</a>
        <input type="submit" value="Login" class="button">


        </form> 
    </center>
</body>
</html>

将表单放在页面中间

2 个答案: