利用HTML與JavaScript實現(xiàn)注冊頁面源碼
1.實現(xiàn)效果
以上圖片為效果圖展示，當(dāng)我們輸入錯誤的信息時，在注冊框的最下方會提示相應(yīng)的錯誤信息。當(dāng)你輸入正確的信息，則輸出注冊成功。性別實現(xiàn)單選，愛好實現(xiàn)多選，住址實現(xiàn)選擇框等等。在下方2-3小節(jié)中講解相關(guān)屬性的用法，如想要源碼直接跳過2-3節(jié)直接到第4節(jié)，第4節(jié)為源碼展示。
最終實現(xiàn)效果:
- 賬號或密碼輸入錯誤，提示警告信息
- 性別實現(xiàn)單選框
- 愛好實現(xiàn)多選框
- 住址實現(xiàn)選擇框
- 自我介紹實現(xiàn)多行文本輸入框
- 提交按鈕實現(xiàn)窗口事件
2.HTML表單
<form> 標簽用于為用戶輸入創(chuàng)建HTML表單。表單能夠包含<input>標簽，表單還可以包含menus、textarea、fieldset、legend和label元素，本期主要講解<label>標簽的用法。
2.1input標簽
<input>標簽中type里面設(shè)置的就是屬性，你想要輸入的是文本就設(shè)置text屬性，想要輸入的是密碼就設(shè)置password屬性。
一個密碼框:
<body> <form> <div> <label>密碼</label> <input type="password"/> </div> </form> </body>
顯示效果:
2.2for屬性
for屬性可把label綁定到另外一個元素。for 屬性的值設(shè)置為相關(guān)元素的id屬性的值，就能與相關(guān)屬性同步，因此for屬性規(guī)定label綁定到哪個表單元素。如:
<body> <form> <div> <label for="class">密碼</label> <input type="password" id="class"/> </div> </form> </body>
效果展示:
當(dāng)我們點擊密碼這個文本時，后面的方框會閃爍光標，達到了一個綁定的效果。這就是for屬性的用途。
2.3name屬性
當(dāng)我們在使用單選框時，如果直接編寫幾行單選框時。我們不必須每個單選值都得選，因此我們可以使用name屬性來使這幾行單選框達到只能選一個單選值的效果。如：
<body> <form> <div> <label>愛好:</label> <input type="radio"/>籃球 <input type="radio"/>羽毛球 <input type="radio"/>拳擊 </div> </form> </body>
顯示效果:
我們可以看到，所有的單選都能夠被選，那我們編寫這幾行代碼就沒有意義了，因此我們可以這樣去修改:
<body> <form> <div> <label>愛好:</label> <input type="radio" name="rad"/>籃球 <input type="radio" name="rad"/>羽毛球 <input type="radio" name="rad"/>拳擊 </div> </form> </body>
顯示效果:
以上代碼中，我們把每個<input>標簽中都加入了一個name="rad"的屬性，達到了這三個單選框變?yōu)橐粋€單選框的效果。
2.4select標簽
<select>標簽，代表選擇框。<select>標簽里面使用<option>標簽來達到選擇效果。<option>標簽里面有value值，value值代表著該字段在第幾行，注意一般按照從0往后增加。
<body> <form> <div> <select> <option value="0">選擇住址</option> <option value="1">湖北</option> <option value="2">新疆</option> <option value="3">西藏</option> </select> </div> </form> </body>
顯示效果:
以上代碼展示了<select>、<option>、value的用法，實現(xiàn)了一個簡單選擇框。
3.JS窗口事件
3.1document.getElementById簡單介紹
當(dāng)我們點擊一個表單中的id時想要達到某些效果的時候，我們可以使用document.getElementById('id名').onclick來創(chuàng)建一個匿名函數(shù)。如:
<body>
<form>
<div>
<button id="but">按鈕</button>
</div>
</form>
<script>
document.getElementById('but').onclick = function() {
alert("彈出一個警告");
}
</script>
</body>顯示效果:
以上代碼展示了document.getElementById('id名').onclick創(chuàng)建一個匿名函數(shù)，并且彈出一個警告框。
4.HTML和JavaScript源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注冊框的實現(xiàn)</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
.register-wrap {
width: 600px;
margin: 50px auto;
border: 1.5px solid #2d77bd;
border-radius: 10px;
padding: 20 px 50ox;
box-shadow: 0;
}
.register-wrap h1 {
background-color:#2d77bd;
height:60px;
line-height: 50px;
border-radius: 10px 10px 0 0;
font-size: 30px;
color: whitesmoke;
text-align: center;
font-weight: 15px
}
#username,#password,#iner {
padding:10px 20px;
width: 45%;
border: 1px solid ;
border-radius: 5px;
padding-left: 0px;
}
.form-control label {
margin-right: px;
padding-left: 100px;
}
.form-control input[type=button] {
width: 20%;
height: 50px;
line-height: 50px;
background-color: #2d77bd;
border: none;
color: #fff;
font-size: 20px;
margin-left: 230px;
border-radius: 6px;
}
.errorInfo {
color: red;
font-size: 20px;
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="register-wrap">
<h1>注冊</h1>
<form>
<div class="form-control">
<label for="username">賬號</label>
<input type="text" id="username" placeholder="賬號設(shè)置在6-8位數(shù)字,不能包含有admin字段"/>
</div>
<div class="form-control">
<label for="password">密碼</label>
<input type="password" id="password" placeholder="密碼設(shè)置在6-8位數(shù)字，不能包含有admin字段"/>
</div >
<div class="form-control">
<label>性別</label>
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
</div>
<div class="form-control">
<label>愛好</label>
<input type="checkbox" name="sport" value="1"/>藍球
<input type="checkbox" name="sport" value="2"/>羽毛球
<input type="checkbox"name="sport" value="3"/>足球
</div>
<div class="form-control">
<label>住址</label>
<select>
<option value="0">請選擇住址</option>
<option value="1">湖北</option>
<option value="2">湖南</option>
<option value="3">新疆</option>
<option value="4">西藏</option>
</select>
</div>
<div class="form-control">
<label>自我介紹</label>
<textarea id="iner" class="texta"></textarea>
</div>
<div class="form-control">
<input type="button" id="subnit" value="提交"/>
</div>
<div>
<div id="errorInfo" class="errorInfo"">錯誤提示</div>
</div>
</form>
</div>
</div>
<script>
document.getElementById('subnit').onclick = function(e) {
e.preventDefault();
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
let errorInfo = document.getElementById('errorInfo');
if(username.length < 6 || username.length>10) {
errorInfo.innerText = "賬號長度應(yīng)當(dāng)在6~8之間";
errorInfo.style.display = "block";
}
else if(username.toLocaleLowerCase().includes("admin")) {
errorInfo.innerText="不能包含admin這個字段";
errorInfo.style.display = "block";
}
else if(password.length<6 || password.length>8) {
errorInfo.innerText="密碼長度應(yīng)當(dāng)6~8之間";
errorInfo.style.display = "block";
}
else if(password.charAt(password.length-1) !== "*") {
errorInfo.innerText="密碼的最后一位必須是*";
errorInfo.style.display = "block";
}else {
errorInfo.innerText="注冊成功";
}
}
</script>
</body>
</html>總結(jié)
到此這篇關(guān)于利用HTML與JavaScript實現(xiàn)注冊頁面源碼的文章就介紹到這了,更多相關(guān)HTML與JS實現(xiàn)注冊頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript惰性載入函數(shù),結(jié)合實例形式分析了JavaScript惰性載入函數(shù)的概念、原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
本文給大家介紹js如何禁止查看網(wǎng)頁源代碼，并給大家分享了三種查看路徑的方法，本文給大家介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
JavaScript實現(xiàn)的簡單Tab點擊切換功能示例
這篇文章主要介紹了JavaScript實現(xiàn)的簡單Tab點擊切換功能,涉及JavaScript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了小程序?qū)崿F(xiàn)展開/收起的效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
函數(shù)中首先給maxChars變量指定了值(輸入?yún)^(qū)內(nèi)最多可用的字符數(shù)，注意，該變量是個可用于計算的數(shù)值)2008-07-07
onmousewheel event 縮放圖片效果...2006-09-09
JavaScript使用前綴樹(trie樹)實現(xiàn)文本高亮
這篇文章主要為大家詳細介紹了JavaScript如何使用前綴樹(trie樹)實現(xiàn)文本高亮效果,文中的示例代碼講解詳細,有需要的小伙伴可以參考下2024-04-04
深拷貝和淺拷貝是在JavaScript中復(fù)制對象或數(shù)組時經(jīng)常遇到的概念,下面這篇文章主要給大家介紹了關(guān)于JS實現(xiàn)深拷貝的幾種簡單方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了JavaScript中實現(xiàn)繼承的三種方式和實例,本文講解了類式繼承、原型式繼承、使用擴充方法實現(xiàn)多重繼承三種方式,需要的朋友可以參考下2015-01-01
JavaScript表格排序?qū)崿F(xiàn)代碼，需要的朋友可以參考下。2009-10-10