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