直播軟體app開發，HTML和CSS分別實現註冊頁面表單

zhibo系統開發發表於2023-01-31
APPHTMLCSS

直播軟體app開發，HTML和CSS分別實現註冊頁面表單

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML註冊頁面</title>
</head>
<body>
<form action="#" method="post"><!--傳入地址為：#-->
  <table border="1" width="500px">
    <tr>
      <td><label for="username">使用者名稱</label></td>
      <td><input type="text" name="username" id="username" required></td><!--required為必選-->
    </tr>
 
    <tr>
      <td><label for="password">密碼</label></td>
      <td><input type="password" name="password" id="password" required></td>
    </tr>
 
    <tr>
      <td><label for="email">Email</label></td>
      <td><input type="email" name="email" id="email" required></td>
    </tr>
 
    <tr>
      <td><label for="name">姓名</label></td>
      <td><input type="text" name="name" id="name" required></td>
    </tr>
 
    <tr>
      <td><label for="tel">手機號</label></td>
      <td><input type="text" name="tel" id="tel" required></td>
    </tr>
 
    <tr>
      <td><label>性別</label></td>
      <td><input type="radio" name="sex" value="male" checked="checked">男<!--checked為預設選擇-->
        <input type="radio" name="sex" value="famale">女</td>
    </tr>
 
    <tr>
      <td><label for="birthday">出生日期</label></td>
      <td><input type="date" name="birthday" id="birthday"></td>
    </tr>
 
    <tr>
      <td><label for="checkcode">驗證碼</label></td>
      <td><input type="text" name="checkcode" id="checkcode">
        <img src="img/yzm1.jpg" width="100px" height="20px"></td>
    </tr>
 
    <tr>
      <td colspan="2"><input type="submit" value="註冊"></td><!--colspan合併兩個單元格-->
    </tr>
  </table>
</form>
 
</body>
</html>

CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS註冊頁面</title>
    <style>
        *{
            margin: 0px;/*margin是盒子的外邊距，即盒子與盒子之間的距離，而pdding是內邊距，是盒子的邊與盒子內部元素的距離*/
            padding: 0px;
            box-sizing: border-box;
        }
 
        body{
            background: url("../img/background.jpg") no-repeat center;
        }
 
        .ra_layout{
            width: 950px;
            height: 550px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;/*讓div水平居中*/
            margin-top: 50px;
            padding: 15px;
        }
 
        .re_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
 
        .re_left > p:first-child{/*選擇re_left下的第一個p*/
            color: #FFD026;
            font-size: 20px;
        }
 
        .re_left > p:last-child{/*或者給下面的p設定一個id，用ID選擇器也行*/
            color: #A6A6A6;
            font-size: 20px;
        }
 
        .re_center{
            /*border: 1px solid red;*/
            float: left;
            width: 500px;
        }
 
        .re_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
 
        .re_right > p:first-child{
            font-size: 20px;
        }
 
        .re_right p a{
            color: pink;
        }
 
        .td_left{
            width: 100px;
            text-align: right;/*右對齊*/
            height: 45px;/*上下兩行間隔開，出現空行笑過*/
        }
 
        .td_right{
            padding-left: 50px;/*將文字與文字框之間出現間隔*/
        }
 
        #username,#password,#email,#tel,#name,#birthday,#checkcode{
            width: 250px;
            height: 25px;
            border: 1px solid #A6A6A6;
            /*設定邊框圓角*/
            border-radius: 5px;
            padding-left: 10px;
        }
 
        #checkcode{
            width: 125px;
        }
 
        #img_check{
            height: 25px;
            width: 125px;
            vertical-align: middle;/*圖片水平居中*/
        }
 
        #but{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }
    </style>
</head>
<body>
     <div>
         <div>
            <p>新使用者註冊</p>
            <p>USER REGISTER</p>
         </div>
 
         <div>
             <div>
 
                 <form action="#" method="post">
                     <table>
                         <tr>
                             <td><label for="username">使用者名稱</label></td>
                             <td><input type="text" name="username" id="username" placeholder="請輸入使用者名稱" required></td>
                         </tr>
 
                         <tr>
                             <td><label for="password">密碼</label></td>
                             <td><input type="password" name="password" id="password" placeholder="請輸入密碼" required></td>
                         </tr>
 
                         <tr>
                             <td><label for="email">Email</label></td>
                             <td><input type="email" name="email" id="email" placeholder="請輸入郵箱" required></td>
                         </tr>
 
                         <tr>
                             <td><label for="name">姓名</label></td>
                             <td><input type="text" name="name" id="name" placeholder="請輸入姓名" required></td>
                         </tr>
 
                         <tr>
                             <td><label for="tel">手機號</label></td>
                             <td><input type="text" name="tel" id="tel" placeholder="請輸入手機號" required></td>
                         </tr>
 
                         <tr>
                             <td><label>性別</label></td>
                             <td><input type="radio" name="sex" value="male" checked="checked">男
                                 <input type="radio" name="sex" value="famale">女</td>
                         </tr>
 
                         <tr>
                             <td><label for="birthday">出生日期</label></td>
                             <td><input type="date" name="birthday" id="birthday" required></td>
                         </tr>
 
                         <tr>
                             <td><label for="checkcode">驗證碼</label></td>
                             <td><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼" required>
                                 <img src="../img/yzm1.jpg" id="img_check"></td>
                             <!--
                                相對路徑：
                                ./代表當前目錄下
                                ../代表上一級目錄下
                             -->
                         </tr>
 
                         <tr>
                             <td colspan="2"><input type="submit" value="註冊" id="but"></td>
                         </tr>
                     </table>
                 </form>
 
             </div>
         </div>
 
         <div>
             <p>已有賬號?<a href="#">立即登入</a></p>
         </div>
         
     </div>
 
</body>
</html>

以上就是直播軟體app開發，HTML和CSS分別實現註冊頁面表單， 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2933416/，如需轉載，請註明出處，否則將追究法律責任。

相關文章