HTML & CSS - 表單：註冊 + 登入（案例）
阿新 • • 發佈：2020-11-24
HTML & CSS - 表單：註冊 + 登入
2.1.1 註冊
<!DOCTYPE html> <html lang="en"> <head> <title>註冊頁面</title> <style> body{ background: url("../img/bg.png"); } .center{ /*背景顏色*/ background: white; /*寬度*/ width: 400px; /*文字對齊方式*/ text-align: center; /*外邊距*/ margin: auto; } </style> </head> <body> <!--頂部-公司圖示--> <div> <img src="../img/logo.png"/> </div> <!--中間-註冊資訊--> <div class="center"> <div>註冊詳情</div> <hr/> <!--表單標籤--> <form action="#" method="get" autocomplete="off"> <div> <label for="username">姓名：</label> <input type="text" id="username" name="username" value="" placeholder=" 在此輸入姓名" required/> </div> <div> <label for="password">密碼：</label> <input type="password" id="password" name="password" value="" placeholder=" 在此輸入密碼" required/> </div> <div> <label for="email">郵箱：</label> <input type="email" id="email" name="email" value="" placeholder=" 在此輸入郵箱" required/> </div> <div> <label for="tel">手機：</label> <input type="tel" id="tel" name="tel" value="" placeholder=" 在此輸入手機" required/> </div> <hr/> <div> <label for="gender">性別：</label> <input type="radio" id="gender" name="gender" value="men"/>男 <input type="radio" name="gender" value="women"/>女 </div> <div> <label for="hobby">愛好：</label> <input type="checkbox" id="hobby" name="hobby" value="music"/>音樂 <input type="checkbox" name="hobby" value="movie"/>電影 <input type="checkbox" name="hobby" value="game"/>遊戲 </div> <div> <label for="birthday">出生日期：</label> <input type="date" id="birthday" name="birthday" value=""/> </div> <div> <label for="city">所在城市：</label> <select id="city" name="city"> <option>---請選擇所在城市---</option> <optgroup label="直轄市"> <option>北京</option> <option>上海</option> <option>廣州</option> <option>深圳</option> </optgroup> <optgroup label="省會市"> <option>西安</option> <option>杭州</option> <option>鄭州</option> <option>武漢</option> </optgroup> </select> </div> <hr/> <div> <label for="desc">個性簽名：</label> <textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 請寫下您的與眾不同"></textarea> </div> <hr/> <button type="submit">註冊</button> <button type="reset">重置</button> </form> </div> </body> </html>
2.1.2 登入
login.css
/*新增背景圖片*/ body{ background: url("../img/bg.png"); } /*中間表單樣式*/ .center{ background-color: white; /*背景色*/ width: 40%; /*寬度*/ margin: auto; /*外邊距*/ margin-top: 100px; /*上邊距*/ border-radius: 15px; /*弧度*/ text-align: center; /*文字水平對齊*/ } /*表頭樣式*/ thead th{ font-size: 30px; /*字型大小*/ color: orangered; /*顏色*/ } /*表體提示樣式*/ tbody label{ font-size: 20px; /*字型大小*/ } /*表體輸入框樣式*/ tbody input{ border: 1px solid gray; /*邊框*/ border-radius: 5px; /*弧度*/ width: 90%; /*寬度*/ height: 40px; /*高度*/ outline: none; /*取消輪廓*/ } /*表底按鈕樣式*/ tfoot button{ border: 1px solid crimson; /*邊框*/ border-radius: 5px; /*弧度*/ width: 95%; /*寬度*/ height: 40px; /*高度*/ background: crimson; /*背景色*/ color: white; /*文字顏色*/ font-size: 20px; /*文字大小*/ } /*錶行樣式*/ tr{ line-height: 60px; /*行高*/ } /*底部頁尾樣式*/ .footer{ width: 35%; /*寬度*/ margin: auto; /*外邊距*/ font-size: 15px; /*字型大小*/ color: gray; /*顏色*/ } /*超連結樣式*/ a{ text-decoration: none; /*去除下劃線*/ color: blue; /*超連結文字顏色*/ }
登入頁面.html
<!DOCTYPE html> <html lang="en"> <head> <title>登入頁面</title> <link rel="stylesheet" href="../css/login.css"/> </head> <body> <!--頂部公司圖示--> <div> <img src="../img/logo.png"/> </div> <!--中間表單--> <div class="center"> <form action="#" method="get" autocomplete="off"> <table width="100%"> <thead> <tr> <th colspan="2">賬 密 登 錄<hr/></th> </tr> </thead> <tbody> <tr> <td> <label for="username">賬號</label> </td> <td> <input type="text" id="username" name="username" placeholder=" 請輸入賬號" required/> </td> </tr> <tr> <td> <label for="password">密碼</label> </td> <td> <input type="password" id="password" name="password" placeholder=" 請輸入密碼" required/> </td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> <button type="submit">確 定</button> </td> </tr> </tfoot> </table> </form> </div> <!--底部頁尾--> <div class="footer"> <br/><br/> 登入/註冊即表示您同意 <a href="#" target="_blank">使用者協議</a> 和 <a href="#" target="_blank">隱私條款</a> <a href="#" target="_blank">忘記密碼?</a> </div> </body> </html>