快捷導(dǎo)航

利用HTML與JavaScript實(shí)現(xiàn)注冊(cè)頁面源碼

更新時(shí)間：2023年12月28日 09:31:19 作者：一只愛打拳的程序猿

這篇文章主要給大家介紹了關(guān)于利用HTML與JavaScript實(shí)現(xiàn)注冊(cè)頁面的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家實(shí)現(xiàn)注冊(cè)頁面具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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)屬性的用法，如想要源碼直接跳過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屬性來使這幾行單選框達(dá)到只能選一個(gè)單選值的效果。如：

 	<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>

顯示效果:

以上代碼中，我們把每個(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)簽來達(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è)簡單選擇框。

3.JS窗口事件

3.1document.getElementById簡單介紹

當(dāng)我們點(diǎn)擊一個(gè)表單中的id時(shí)想要達(dá)到某些效果的時(shí)候，我們可以使用document.getElementById('id名').onclick來創(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)長度應(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="密碼長度應(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è)頁面源碼的文章就介紹到這了,更多相關(guān)HTML與JS實(shí)現(xiàn)注冊(cè)頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: