明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html表單Form的說明及其容易的應(yīng)用案例（完整代碼）

發(fā)表時間：2023-09-04 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于html表單Form的介紹及其簡單的應(yīng)用實例（完整代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。HTML 對象之 Form 對象：Form 對象代表一個 HTML 表單。以下就是一個form表單（以“百度一下”為例）<form>&l...
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于html表單Form的介紹及其簡單的應(yīng)用實例（完整代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

HTML 對象之 Form 對象：Form 對象代表一個 HTML 表單。

以下就是一個form表單（以“百度一下”為例）

<form>
            <input name="wd" />
            <input type="button" value="百度一下" onclick="submitForm()"/>
</form>

該表單如果添加action屬性為“https://www.baidu.com/s”，按鈕input的type改為submit，即可進(jìn)行百度搜索。

<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用于向服務(wù)器傳輸數(shù)據(jù)。且<form>標(biāo)簽支持所有的瀏覽器。

下為自己粗糙編寫的關(guān)于form表單的簡單應(yīng)用，制作了一個注冊界面，僅實現(xiàn)了界面互動，未實現(xiàn)其注冊功能，主要是為了體現(xiàn)form中常用屬性的如何使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="msg" style="color: red;"></span>
		<form onsubmit="return check()">
			用戶名：<input id="user_name" placeholder="請輸入用戶名" /><br />
			密碼：<input id="password" type="password" placeholder="請輸入密碼" /><br />
			確認(rèn)密碼：<input id="re_password" type="password" placeholder="再次輸入以確認(rèn)密碼" /><br />
			性別：<input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女<br />
			愛好：<input type="checkbox" name="hobby" value="0" />籃球
			<input type="checkbox" name="hobby" value="1" />羽毛球
			<input type="checkbox" name="hobby" value="2" />乒乓球<br />
			年級：<select id="grade">
				<option value="0">一年級</option>
				<option value="1">二年級</option>
				<option value="2">三年級</option>
				<option value="3">四年級</option>
				<option value="4">五年級</option>
			</select>
			<input type="submit" value="注冊"/><input type="reset" value="撤銷"/>
		</form>
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			
			function check(){
				var radios=document.getElementsByName("sex");
				for(var i=0;i<radios.length;i++){
					var radio=radios[i];
					//radio.disable()=true;
					console.log(radio.checked+","+radio.value);
				}
				var checkboxes=document.getElementsByName("hobby");
				for(var i=0;i<checkboxes.length;i++){
					var checkbox =checkboxes[i];
					checkbox.checked=true;
					console.log(checkbox.checked+","+checkbox.value);
				}
				
				var select=document.getElementById("grade");
				//select.disabled=true;
				console.log(select.length);
				console.log(select.selectedIndex);
				
				var options=select.options;
				console,log(options[select.selectedIndex]);
				for (var i=0;i<options.length;i++) {
					var option =options[i];
					console.log(option.value);
				}
				
				var userName =$("user_name").value;
				var password =$("password").value;
				var rePassword =$("re_password").value;
				if (userName.length==0) {
					$("msg").innerHTML="用戶名不能為空！"
					$("user_name").focus();
					return false;
				}
				if (userName.length>12) {
					$("msg").innerHTML="用戶名不能超過12個字符！"
					$("user_name").focus();
					return false;
				}
				if (password.length==0) {
					$("msg").innerHTML="密碼不能為空！"
					$("password").focus();
					return false;
				}
				if (password.length>15) {
					$("msg").innerHTML="密碼不能超過15個字符！"
					$("password").focus();
					return false;
				}
				if (password!=rePassword) {
					$("msg").innerHTML="兩次密碼不一致！"
					$("re_password").focus();
					return false;
				}
				return true;
			}
		</script>
	</body>
</html>

其限制條件是：用戶名和密碼不能為空；用戶名不得超過12個字符；密碼不得超過15個字符；確認(rèn)密碼與密碼需一致；且出現(xiàn)問題的地方定位焦點。

相關(guān)推薦：

HTML FORM 表單_html/css_WEB-ITnose

HTML表單（form）學(xué)習(xí)筆記

以上就是html表單Form的介紹及其簡單的應(yīng)用實例（完整代碼）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。