直播軟體app開發，HTML和CSS分別實現註冊頁面表單
直播軟體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/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 直播電商平臺開發，HTML和CSS分別實現註冊頁面表單HTMLCSS
- Html完整表單頁面(註冊)HTML
- HTML基礎實現簡單的註冊和登入頁面HTML
- 直播app開發搭建，註冊頁面樣式，全部程式碼APP
- 直播系統app原始碼，Android studio 實現app登入註冊頁面APP原始碼Android
- 直播app開發，使用koa和MongoDB實現分頁和模糊查詢APPMongoDB
- HTML 使用表單標籤實現註冊頁面的例項程式碼HTML
- uniapp 美化註冊頁面APP
- CSS3/HTML5實現漂亮的分步驟註冊登入表單CSSS3HTML
- javascript - 使用者註冊頁面（表單驗證）JavaScript
- app直播原始碼，平臺登入頁面實現和修改密碼頁面實現APP原始碼密碼
- 成品直播原始碼推薦，登入和註冊兩個頁面的簡單實現原始碼
- HTML頁面和CSS檔案HTMLCSS
- 共享軟體中註冊部分的簡單實現(轉)
- 直播軟體app開發，刪除主頁搜尋框APP
- 登陸註冊頁面html程式碼(仿知乎)HTML
- 直播軟體app開發，產品頁面顯示折扣倒數計時一欄APP
- 前端利用ajax實現使用者註冊頁面前端
- 直播app開發，首頁輪播圖效果實現APP
- 9款大氣實用的HTML5/CSS3註冊登入表單HTMLCSSS3
- 直播原始碼網站，新使用者登入時的註冊頁面和登入頁面原始碼網站
- 直播平臺軟體開發，uni-app實現選項卡功能APP
- JSP註冊頁面JS
- 直播軟體app開發，CSS超出隱藏並且能滾動APPCSS
- HTML5商城開發五實現返回頁面頂部HTML
- 使用float,flex和tailwind實現同一個表單註冊效果FlexAI
- javaWeb登入註冊頁面JavaWeb
- bootstrap4註冊頁面boot
- Spartacus 註冊和登入頁面的實現細節
- 成品直播原始碼，html頁面點選按鈕實現頁面跳轉的兩種方法原始碼HTML
- 利用JavaScript實現註冊頁面省市聯動效果（附程式碼）JavaScript
- 直播商城原始碼，實現左右聯動商品分類頁面原始碼
- 線上直播系統原始碼，利用css和html實現首頁圖片輪播效果原始碼CSSHTML
- 使用者註冊頁面原型原型
- Dubbo+Nacos實現服務註冊和發現
- 用 etcd 實現服務註冊和發現
- 服務註冊與發現的原理和實現
- 誰不想利用直播軟體app開發的賺錢功能實現財富自由呢？APP