h5 新增input类型

Love The Way You Lie 2021-07-24 23:57 458阅读 0赞

input新增,自带校验功能
    	浏览文件
    		type='file'
    			js下获取对象后的length属性，长度为上传的文件个数,改对象返回数组
    		
    	邮箱
    		type="email"  必须包含@，且@后有内容     
    		
    	搜素框
    		type="search"  搜索内容后多个×号，和浏览器有关
    		
    	重置
    		type="reset"
    		
    	url类型
    		type="url"   内容必须包含http://,且后面有内容
    		
    	颜色选择框
    		type="color"
    		
    	数字
    		type="number"  只能输入数字,且自带上下点击，加减数字功能
    			自带
    				max属性
    					max="10"    数字不能超过10
    				min属性
    					min="0"		数字不能低于0
    				step属性
    					step="5"    设置上下点击时数字的变化值
    	
    	
    	范围，可拉动的进度条
    		type="range"
    			max属性
    			   范围的上限
    			min属性
    				范围的下限
    			step属性
    				每次滑动递增或递减长度
    			value属性
    				初始值
    	
    	日期类型
    		type="date"  可选择日期的框
    		
    	周类型
    		type="week"  可选择周类型
    		
    	月类型
    		type="month"  可选择月

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<form action="#">
    			<p>
    				邮箱:<input type="email" />
    				搜索<input type="search" />
    				颜色: <input type="color" />
    				数组: <input type="number" max="10" min="0"  step="2"/>
    				范围: <input type="range" min="0" max="100" value="80" step="20"/>
    				日期: <input type="date" />
    				周: 	 <input type="week" />
    				月:   <input	type="month"/>
    			</p>
    			<p>
    				<input type="submit" value="提交"/>
    				<input type="reset" />
    			</p>
    		</form>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，458人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5新增type类型，HTML5新增属性

html5版本新增了很多类型，我们挑一些常用的进行展示：详细学习地址可以参照w3c进行学习： https://www.w3school.com.cn/html5/at

比眉伴天荒/ 2023年09月27日 13:41/ 0 赞/ 143 阅读

相关 H5系列之新input

虽说H5 新填了几个很方便的input 类型，但是吧，想法是美好的，但是现实很残酷，兼容性不太好。基本只有google浏览器能用。但是既然出了，那么就要了解他，知道有这么一个东

朱雀/ 2023年08月17日 15:23/ 0 赞/ 121 阅读

相关 H5 新增语义标签

1、HTML5 简介 1. HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 2. HTML5的设计目的是为了在移动设备上支持

ゝ一世哀愁。/ 2022年12月29日 09:16/ 0 赞/ 169 阅读

相关 html5新增属性----多媒体、input类型

HTML5 HTML5是HTML最新的修订版本 HTML5 中的一些新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio

àì夳堔傛蜴生んèń/ 2022年11月30日 01:59/ 0 赞/ 264 阅读

相关 html5中input新增属性

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

素颜马尾好姑娘i/ 2022年09月21日 11:44/ 0 赞/ 224 阅读

相关 H5新增语义化标签

一、根据页面的结构，由div派生的标签。 <header> <footer> <nav> 导航在H4中导航栏一般用ul-li标签

忘是亡心i/ 2022年05月24日 11:35/ 0 赞/ 259 阅读

相关 h5新增标签

article: 标签定义外部的内容。 aside:标签定义 article 以外的内容。a audio:h5新增音频标签。没有高宽属性。 can

妖狐艹你老母/ 2022年04月22日 13:28/ 0 赞/ 243 阅读

相关 h5 新增input类型

input新增,自带校验功能浏览文件 type='file' js下获取对象后的length属性，长度为上传的文件个数,改对象返回

Love The Way You Lie/ 2021年07月24日 23:57/ 0 赞/ 459 阅读

相关 h5 新增属性

默认提示内容 placeholder <input type="text" placeholder="请输入用户名" /> 多输

拼搏现实的明天。/ 2021年07月24日 18:04/ 0 赞/ 483 阅读

相关 h5 新增结构标签

头部 <header>头部</header> 导航 <nav>导航</nav> 定义文档中的节。章节、页眉、标题 <sec

秒速五厘米/ 2021年07月24日 16:54/ 0 赞/ 474 阅读