form表单控件及控件属性

前端 同时被 3 个专栏收录
1 篇文章 0 订阅
22 篇文章 0 订阅
27 篇文章 0 订阅

今天又学习了前端的form控件,这是我第二遍学习,确实发现不少新东西,把自己觉得常用的记下来

表单控件:

**form:最主要的一个标签,但是这个元素不会生成可是化部分**
	属性:
		action:表单提交的地址
	     method:属性值为get/post,该属性必填,默认get
		name:指定表单唯一的名字,尽量使其与id值保持一致
		target:打开目标地址的方式
input:input是表单中功能最丰富的控件,根据type属性的属性值不同生成不同的功能
	属性:
		**1、type:**
			属性值:text(文本框)、password(密码)、hidden(隐藏)、radio(单选框)、				checkbox(复选框)、image(图像)、file(上传文件)、submit(提交)
		**2、checked:**设置单选框、复选框的初始状态是否处于选中状态
		注意:要设置单选框,所有的选项的name值要相等
		**3、disable:**设置首次加载禁用此元素
		**4、maxlength**:指定文本框可输入的字符串的最大长度
		**5、readonly:**指定文本框的值不允许修改
		**6、size:**指定元素宽度,当type=“hidden”时没有意义
		**7、src:**指定图像区域的图像的URL,当type=“image”时有意义
		**8、width**:图形的宽度
		**9、height**:图像的高度
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>from</title>
</head>
<body>
	<form action="http://www.crazyit.org" method="get">
		单行文本框<input type="text" id="username" name="username" maxlength="3" /><br/>
		不能编辑的文本框:<input type="text" id="readonly" name="readonly" readonly="readonly"/><br>
		密码框<input type="password" name="password" type="password" /> <br>
		隐藏框<input type="hidden" id="hidden" name="hidden" /><br>
		第一组单选框<br>
		红:<input type="color" id="color" name="color" value="red" checked /><br>
		绿:<input type="radio" id="color2" name="color" value="green"/><br>
		蓝:<input type="radio" id="color3" name="color" value="blue" /><br>
		第二组单选框:<br>
		男性:<input type="radio" id="gender" name="gender" value="male"/><br>
		女性:<input type="radio" id="gender2" name="gender" value="female"/><br>

		两个复选框:<br>
		<input value="leegang.org" type="checkbox" id="web" id="web" checked /><br>
		<input type="checkbox" id="web2" name="web" value="crazyit.org" /><br>

		文件上传域:<input type="file" id="file" name="file" /> <br>
		图像域:<input type="image" src="../image/887.jpg" alt="篮球" width="400" height="300" /> <br>

		下面是四个按钮:<br>
		<input type="submit" id="ok" name="ok" value="提交"/><br>
		<input type="submit" id="dis" disabled name="dis" value="提交" /><br>
		<input type="submit" id="cancel" name="cancel" value="重填"/><br>
		<input type="submit" id="no" name="no" value="无动作" /><br>
	</form>
	
</body>
</html>

**lable:**定义标签
属性:
for属性:将某个表单控件的id值赋给for,就可以将此lable与此元素联接
select和option元素:设置下拉框,option是下拉框内的选项
属性:
disable:设置禁止使用该列表框和下拉框
multiple:设置此下拉框否允许多选,一旦设置为允许多选,就会生成列表框
size:指定列表框内可以同时显示几个元素
**option:**用于定义列表框选项和菜单项
optgroup:用于定义列表项和菜单项组,该元素下包含的option元素属于该分组
disable:指定禁止用该项
selected:指定该列表初始项是否处于被选中状态
value:指定该选项对应的请求参数值

<form action="#" method="post">
	下面是一个下拉菜单:<br>
	<select name="skills" id="skills">
		<option value="java">java语言</option>
		<option value="c">c语言</option>
		<option value="rudy"> rudy语言</option>
	</select><br>
	<br>
	<br>
	下面是允许多选的列表框:<br>
	<select name="books" id="books" size="4" multiple="multiple">
		<option value="java">java语言</option>
		<option value="Android">Android语言</option>
		<option value="ee">轻量级java语言</option>
	</select><br><br>

	下面是允许多选的列表框:<br>
	<select name="leegang" id="leegang" multiple size="6">
		<optgroup label="疯狂的java板块一">
			<option value="java"> java语言</option>
			<option value="Android">Android语言</option>
			<option value="ee">eejava轻量级语言</option>
		</optgroup>
		<optgroup label="其他图书">
			<option value="sture"> sture书</option>
			<option value="book1"> 其他图书1</option>
			<option value="book2">其他图书2</option>
		</optgroup>
	</select>

</form>

HTML5增强的textarea :用于生成多行的文本域
属性:
**cols:**指定文本域的宽度
rows:指定文本域的高度
disable:指定禁止使用该文本域
**readonly:**指定该文本域只读
**maxlength:**设置文本域中最多可以输入的字符数
wrap:指定多行文本域是否添加换行符,属性值:soft/hard
fieldset和legend元素:用于对表单内的元素进行分组,放在fieldset内浏览器会用特殊的方式来显示,legend对不同部分的分组进行文字说明

HTML5新增的表单属性

formaction属性:当一个页面里有两个提交按钮时,不用的按钮需要将信息提交到不同的action下,可以给按钮添加此属性
autofocus 属性:当某个表单控件获得此属性后,浏览器打开页面时该控件会自动获取焦点
placeholder 属性: 当用户还未在输入框内输入内容时,输入框内显示提示内容,开始输入时,提示信息会消失

	<form method="post">
		username: <input type="text" name="name" placeholder="请输入用户名" /><br>
		password: <input type="password" name="password" autofocus="true" placeholder="请输入密码" /><br>
		<input type="submit" value="login" formaction="login" /> <br>
		<input type="submit" value="sign_in" formaction="regist"/>
	</form>

**list和datalist属性:**此属性与文本输入框结合,相当于一个下拉框,既可以手动输入内容,可以下拉选择,要求:datalist的id值必须与输入框的list值相同

<form action="#" >
		请输入图书:<input type="text" name="name" list="books11" /><p><br>
		<input type="submit" value="购买" />
		<datalist id="books11"> 
			<option value="java"> java语言</option>
			<option value="Android">Android语言</option>
			<option value="ee">eejava轻量级语言</option>
		</datalist>
	</form>

HTML5新增的表单元素

功能丰富的input:type属性值{color(颜色选择器)、date(日期选择器)、time(时间选择器)、datatime-local(本地日期时间选择器)、week(供用户选择第几周的文本框)、month(月份选择器)(max:指定日期时间的最大值;step:指定日期时间的步长)、valueAsDate(获取从1970年1月1日0时0分0秒经历了多少毫秒)、email(email输入框)、tel(手机号输入框)、url(url输入框)、number(之能输入数字的文本框)、range(让input生产一个托条,让用户只能输入指定范围指定步长的值)、search(生成用于输入搜索关键字的文本框,之类文本框只适用于手机设备)}
output :用于限制指定元素的输出值,用for属性来入其他元素链接

HTML5新增的客户端校验

required:指定空间必须填写
**pattern:**指定空间必须符合指定的正则表达式
**min、max、step:**对日期时间数值型元素进行校验
调用checkValidity 方法进行校验

<form action="#" method="post">
		生日:<input type="date" id="birth" name="birth" /><br>
		邮箱地址:<input type="email" id="email" name="email" /><br>
		<input type="button" value="提交" onclick="return check();"/>
	</form>
	<div id="demo"></div>
	<script type="text/javascript">
		var check=function(){
			return commonCheck("birth" ,"生日" ,"此字段必须是有效日期")&&commonCheck("email","邮箱地址","此字段必须符合电子邮件的格式");

		}
		var commonCheck=function(field,fieldname,tip){
			var targetEle=document.getElementById(field);

			if(targetEle.value.trim()==""){
				var html = document.getElementById("demo").innerHTML+fieldname+'是空的 ';
				
				document.getElementById("demo").innerHTML = html;
				return flase;
			}else if(!targetEle.checkValidity()){
				alert(fieldname+tip);
				return flase;
			}
			return true;
		}
	</script>
  • 5
    点赞
  • 0
    评论
  • 19
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值