自己做的網站根目錄哪里找到網絡推廣seo怎么弄
倘若文章或代碼中有任何錯誤或疑惑,歡迎提出交流哦~
HTML和CSS
首先,我們需要編寫一個簡潔的注冊界面。
簡單編寫下,如下:
呈現(xiàn)效果為:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>結合JavaScript編寫注冊界面</title>
</head><body><div class="main"><h3>注冊界面</h3><form action="#"><ul><li><input type="text" id="name" placeholder="請輸入用戶昵稱"></li><li><input type="text" id="account" placeholder="請輸入賬號"></li><li><input type="text" id="password" placeholder="請輸入密碼"></li><li><input type="text" id="phone" placeholder="請輸入你的手機號碼"></li><li><input type="email" id="email" placeholder="請輸入郵箱地址"></li></ul><input type="submit" id="submit" value="注冊"></form></div>
</body></html>
在添加一定的css樣式后,得到下面文中的效果。
注冊按鈕
給注冊按鈕添加完css樣式后,因為將按鈕向右浮動,會導致上浮,所以添加了清除浮動類。這個比較重要我覺得。
添加如下要求:
- 用戶名:只能包含英文字符、中文字符、數(shù)字,長度在2-15。
- 賬號:只能包含字母和數(shù)字,長度在6-20,不允許包含任何的特殊符號。
- 密碼:密碼長度至少6個字符,且必須同時包含大寫字母,小寫字母,數(shù)字和特殊字符 (例如 !@#$%^&* )。
- 手機號:長度為11位的中國號碼。
- 郵箱:符合電子郵件的常規(guī)格式。
效果如下:
也就是說,如果用戶輸入的內容錯誤了,那么輸入框下的提示信息就會變成紅色,來提醒出錯。
密碼顯示按鈕
可以看到我們使用類型為password的input輸入框時,輸入的內容都是不可見的,而我們在日常使用經??吹?#xff0c;顯示密碼的按鈕,現(xiàn)在加上這個按鈕。
下面是添加眼睛按鈕的HTML和CSS代碼,下一篇文章使用Javascript解決問題。
CSS和HTML代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>結合JavaScript編寫注冊界面</title><style>.main {/* 設置內容寬度以及水平居中 */width: 80%;margin: 0 auto;margin-left: 20px;/* 邊框以及邊框圓角 */border: 1px solid #ccc;border-radius: 5px;/* 背景顏色 */background-color: #f5f5f5;padding: 20px;}form ul li {list-style: none;margin-bottom: 10px;}form ul li input[type="text"],form ul li input[type="password"],form ul li input[type="email"] {width: 80%;margin-top: 5px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;}/* 提示信息部分 */.prompt {/* 讓文本和輸入框更緊湊 */margin-top: 2px;width: 80%;/* 設置提示信息為合適的大小,以及顏色 */font-size: 12px;color: rgba(0, 0, 0, 0.3);}/* 注冊按鈕部分 */form ul li input[type="submit"] {float: right;margin-top: 10px;padding: 10px 20px;border: none;background-color: #4CAF50;color: white;cursor: pointer;}form ul li input[type="submit"]:hover {background-color: #45a049;}/* 顯示圖標部分 */form ul li input[type="password"],button {display: inline;}button {border: none;cursor: pointer;padding-top: 5px;height: 25px;width: 30px;}img {/* 讓圖片占滿整個區(qū)域 */width: 100%;height: 100%;}</style>
</head><body><div class="main"><h3>注冊界面</h3><form action="#"><ul><li><input type="text" id="name" placeholder="請輸入用戶昵稱"><p class="prompt">用戶名只能包含英文字符、中文字符、數(shù)字,長度在2-15。</p></li><li><input type="text" id="account" placeholder="請輸入賬號"><p class="prompt">賬號只能包含字母和數(shù)字,長度在6-20,不允許包含任何的特殊符號。</p></li><li><input type="password" id="password" placeholder="請輸入密碼"><button id="button"><img src="./image/view.png" alt="顯示" id="img"></button><p class="prompt">密碼長度至少6個字符,且必須同時包含大寫字母,小寫字母,數(shù)字和特殊字符</p></li><li><input type="text" id="phone" placeholder="請輸入你的手機號碼"><p class="prompt">手機號為長度11位的中國號碼。</p></li><li><input type="email" id="email" placeholder="請輸入郵箱地址"><p class="prompt">請輸入符合電子郵件的常規(guī)格式。</p></li><li><input type="submit" id="submit" value="注冊"><!-- 消除浮動類,避免上浮 --><div style="clear: both"></div></li></ul></form></div>
</body></html>
頁面效果如下: