如何使用html表單form中的常用屬性

發(fā)布時(shí)間：2021-02-24 09:47:48 來源：億速云閱讀：139 作者：清風(fēng) 欄目：web開發(fā)

這篇文章主要為大家展示了如何使用html表單form中的常用屬性，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“如何使用html表單form中的常用屬性”這篇文章吧。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 3、平臺(tái)無關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。

HTML 對(duì)象之 Form 對(duì)象：Form 對(duì)象代表一個(gè) HTML 表單。

以下就是一個(gè)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表單的簡(jiǎn)單應(yīng)用，制作了一個(gè)注冊(cè)界面，僅實(shí)現(xiàn)了界面互動(dòng)，未實(shí)現(xiàn)其注冊(cè)功能，主要是為了體現(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="請(qǐng)輸入用戶名" /><br />
			密碼：<input id="password" type="password" placeholder="請(qǐng)輸入密碼" /><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 />
			年級(jí)：<select id="grade">
				<option value="0">一年級(jí)</option>
				<option value="1">二年級(jí)</option>
				<option value="2">三年級(jí)</option>
				<option value="3">四年級(jí)</option>
				<option value="4">五年級(jí)</option>
			</select>
			<input type="submit" value="注冊(cè)"/><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個(gè)字符！"
					$("user_name").focus();
					return false;
				}
				if (password.length==0) {
					$("msg").innerHTML="密碼不能為空！"
					$("password").focus();
					return false;
				}
				if (password.length>15) {
					$("msg").innerHTML="密碼不能超過15個(gè)字符！"
					$("password").focus();
					return false;
				}
				if (password!=rePassword) {
					$("msg").innerHTML="兩次密碼不一致！"
					$("re_password").focus();
					return false;
				}
				return true;
			}
		</script>
	</body>
</html>

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

以上就是關(guān)于“如何使用html表單form中的常用屬性”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何使用html表單form中的常用屬性

html有什么特點(diǎn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽