收藏
PHPz批改狀態(tài)：合格
老師批語：用列表會更加美觀，方便后續(xù)復習
我們要用到的html標簽有：form，他的屬性有兩個比較重要——method（指定表單的提交方式，get或post），action（指定表單提交的后端處理文件，如：register.php）；label+input，一對標簽可以實現(xiàn)綁定，其中input有很多類型，如：text文本類型、password密碼類型、email郵箱類型、checkbox多選框、radio單選框，還有一種特殊的表單：select下拉菜單；
那我們用上面的input類型，能形成一個什么樣的用戶注冊頁面呢，如下圖所示：
那么實現(xiàn)界面上這些功能的代碼如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>用戶注冊</title></head><body><!-- 用戶名、密碼、性別、愛好、郵箱、下拉列表 --><form action="register.php" method="post" style="display: grid; gap: 10px;"><div><label for="username">用戶名：</label><inputtype="text"name="username"id="username"requiredvalue="admin"placeholder="英文6-8位"/></div><div><label for="password">密碼：</label><inputtype="password"name="password"id="password"requiredplaceholder="英文+數字6-12位"/><button onclick="showPassword(this,this.form.password)" type="button">顯示</button></div><div><label for="email">郵箱：</label><input type="email" name="email" id="email" placeholder="請輸入郵箱" /></div><div><label for="secret">性別:</label><input type="radio" name="gender" id="male" value="male" /><label for="male">男</label><input type="radio" name="gender" id="female" value="female" /><label for="female">女</label><input type="radio" name="gender" id="secret" value="secret" checked /><label for="secret">保密</label></div><div><label>愛好：</label><input type="checkbox" name="hobby[]" id="football" value="football" /><label for="football">足球</label><inputtype="checkbox"name="hobby[]"id="basketball"value="basketball"/><label for="basketball">藍球</label><inputtype="checkbox"name="hobby[]"id="pingpangball"value="pingpangball"/><label for="pingpangball">乒乓球</label><inputtype="checkbox"name="hobby[]"id="music"value="music"checked/><label for="music">音樂</label></div><label for="identity">用戶身份：</label><select name="level" id="identity"><option value="1" checked>普通會員</option><option value="2">高級會員</option><option value="3">永久會員</option></select><div><button type="submit">提交</button><button type="reset">重置</button></div></form><script>function showPassword(btn, ele) {if (ele.type === 'password') {ele.type = 'text'btn.textContent = '隱藏'} else {ele.type = 'password'btn.textContent = '顯示'}}</script></body></html>
這樣一個雖然丑但是有趣實用的注冊就完成啦~
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
