【HTML5学习笔记】11:表单元素 其二

版权声明:本文为博主原创学习笔记,如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/72671174

input元素提供一个可以给用户输入的文本框,这节学input元素的type属性。

type属性总汇:

text 一个单行文本框,默认行为

password 隐藏字符的密码框

search 搜索框,在某些浏览器键入内容会出现叉标记取消

submit、result、button 生成一个提交按钮,重置按钮,普通按钮

number、range 只能输入数值的框;只能输入一个数值范围的框

checkbox、radio 复选框,用户勾选框;单选框,只能在几个中选一个

image、color 生成一个图片按钮、颜色代码按钮

email、tel、url 生成一个检测电子邮件、号码、网址的文本框

date、month、time、week、datetime、datetime-local 获取日期和时间

hidden 生成一个隐藏控件

file 生成一个上传控件

 

type值为test时提供的额外属性:

maxlength 提供文本框最大字符长度

pattern 用于输入验证的正则表达式

placeholder 输入字符的提示

readonly 文本框处于只读状态(仍可以提交出其内容)

disabled 文本框处于禁用状态(没法提交出其内容)

size 设置文本框宽度

value 设置文本框初始值

required 表明用户必须输入一个值,否则不能通过输入验证

list 指定为文本框提供建议值的datalist元素,其值为datalist元素的id值

 

type为number或range时还提供属性:

min 设置可接受的最小值

max 设置可接受的最大值

step 设置上下调节的步长

value 设置初始值

 

*几个验证

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>表单元素 其二</title>
	<meta charset="utf-8">
</head>
<body>
	<form action="http://www.haosou.com">
		<input type="text" name="user" maxlength="5" size="40" value="LZH" readonly>几个属性
		<button>提交</button>
		<br>
		<input type="password" placeholder="请输入密码">密码框
		<button>提交</button>
		<br>
		<input type="search">搜索框
		<button>提交</button>
		<br>
		<input type="number" step="3">只能输入数字(输入别的不让提交)
		<button>提交</button>
		<br>
		<input type="range" min="50">只能输入范围
		<button>提交</button>
		<br>
		<input type="text" list="abc">普通的text框(带list)
		<button>提交</button>
		<br>
		<input type="color">颜色(提交出的是16进制颜色代码)
		<button>提交</button>
		<br>
		音乐<input type="checkbox" name="OK" value="1">
		体育<input type="checkbox" name="OK" value="2">
		<button>提交</button>
		<br>
		<input type="radio" name="sex" value="1">男 <!-- name值需要一致才能组合在一起 -->
		<input type="radio" name="sex" value="0" checked>女 <!-- checked表示默认选它 -->
		<button>提交</button>
		<br>
		<input type="submit">
		<input type="reset"> <!-- 全部重置 -->
		<input type="button" value="普通按钮">
		<br>
		<input type="image" src="img.png">
		<br>
		<input type="email"> 必须输成电子邮件格式才能提交
		<br>
		<input type="file" accept="image/gif"> <!-- accept属性指定可接受的MIME类型 -->
		<br>
		<input type="hidden" value="1" id="1">隐藏控件一般用于表单提交时关联主键id提交,而这个值作为隐藏存在
		<button>隐藏控件的提交</button>
	</form>

	<datalist id="abc">
		<option value="1">苹果</option>
		<option value="2">橘子</option> <!-- 双标签方式 -->
		<option value="3" label="香蕉"> <!-- 单标签方式1 -->
		<option value="菠萝"> <!-- 单标签方式2(这时候label=value) -->
	</datalist>
</body>
</html>

运行结果:


展开阅读全文

没有更多推荐了,返回首页