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

最新推荐文章于 2019-05-22 21:37:13 发布

LauZyHou

最新推荐文章于 2019-05-22 21:37:13 发布

阅读量658

点赞数

分类专栏： HTML 文章标签：表单元素 type datalist 提交文件

本文链接：https://blog.csdn.net/SHU15121856/article/details/72671174

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>

运行结果：

LauZyHou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML5学习笔记】11：表单元素其二

input元素提供一个可以给用户输入的文本框，这节学input元素的type属性。type属性总汇：text 一个单行文本框，默认行为password 隐藏字符的密码框search 搜索框，在某些浏览器键入内容会出现叉标记取消submit、result、button 生成一个提交按钮，重置按钮，普通按钮number、range 只能输入数值的框；只能输入一个数值范围的框
复制链接

扫一扫