温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用html表单form中的常用属性

发布时间:2021-02-24 09:47:48 来源:亿速云 阅读:141 作者:清风 栏目:web开发

这篇文章主要为大家展示了如何使用html表单form中的常用属性,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“如何使用html表单form中的常用属性”这篇文章吧。

html有什么特点

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。  3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

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,即可进行百度搜索。

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。且<form>标签支持所有的浏览器。

下为自己粗糙编写的关于form表单的简单应用,制作了一个注册界面,仅实现了界面互动,未实现其注册功能,主要是为了体现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 />
			确认密码:<input id="re_password" type="password" placeholder="再次输入以确认密码" /><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个字符;确认密码与密码需一致;且出现问题的地方定位焦点。

以上就是关于“如何使用html表单form中的常用属性”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI