html5新增表单控件和表单属性

新的输入性表单控件:

email：电子邮箱文本框,跟普通的没什么区别

- 当输入不是邮箱的时候,验证不通过

- 移动端的键盘会发生变化

tel：电话号码

url：网页的URL

search：搜索引擎

- chrome下输入文字后，会多出一个关闭的X

range：特定范围内的数值选择器

- min、max、step(步数)

- 例子：用js来显示当前数值

number：只能包含数字的输入框

- 输入框末尾有两个箭头上为加下为减

color：颜色选择器

- 点击显示颜色版

datetime：显示完整日期

- 类似select选择样式

datetime-local：显示完整日期，不包含时区

time：显示时间，不含时区

date：显示日期{年月日}

week：显示周{年月日周}

mouth：显示月{年月}

<form><input type="email" /><input type="tel" /><input type="url" /><input type="search" /><!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字--><input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" /><input type="submit" />
</form>

新的表单特性和函数

placeholder：输入框提示信息

- 例子：微博的密码框提示

autocomplete

- 默认为on，关闭提示选择off

autofocus：指定表单获取输入焦点

list和datalist：为输入框构造一个选择列表

- list值为datalist标签的id

required：此选项必填，不能为空

Pattern：正则验证

- pattern=“\d{1,5}”

Formaction在submit里定义提交地址

<input type="text"placeholder="请输入4-16个字符" // 输入框内显示autocomplete="off" // 是否记录输入的值autofocus // 聚焦required // 输入框不能为空pattern="\d{1,5}" // 必须输入1到5个数字/>
//  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验// 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://www.baidu.com"><input type="text"><input type="submit" value="提交" /><input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>

转载于:https://www.cnblogs.com/wssjzw/p/9286751.html

html5新增表单控件和表单属性相关推荐

表单和表单控件以及表单域详解
表单域:存放表单的区域.把表单控件里面的信息全部收集提交. 表单控件 input表单控件: 1.是个单标签 </input> 2.input可以通过type(类型)属性来变换形状单选按钮 ...
HTML基本语法之表单标签：表单的组成，表单域，表单控件元素（表单元素），input表单元素， label标签，表单控件（表单元素）， select表单元素， textarea表单元素
文章目录表单标签表单的组成表单域常用属性: 表单控件元素(表单元素) input表单元素 label标签表单控件(表单元素) select表单元素 textarea表单元素表单元素几个总结 ...
html中完整表单控件,HTML表单和表单控件
表单标签(掌握) 表单目的是为了收集用户信息. 在网页中,我们也需要跟用户进行交互,收集用户资料,这时就需要表单. 在HTML中,一个完整的表单通常由表单控件(也叫表单元素),提示信息和表单域3个部分 ...
html5表单域,html5表单控件和表单域
一.表单控件文章目录一.表单控件 1.1 认识表单 1.2 input控件 1.2.1 文本框与密码框 1.2.2 单选框和复选框 1.2.3 默认选中表单属性 1.2.4 input按钮组 1. ...
最新医疗系统三测单控件（体温单控件）
最新实现的医疗系统中的三测单控件,很早之前(好像2年前),实现了一个体温单控件,那个时候,由于刚刚做Delphi没多久,所以,做的不是很灵活,很多东西都写死了,最终还是依靠东拼西凑的,凑了一个控件出来 ...
表单控件（表单元素）
1.在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件. 2.<input>表单元素在表单元素中,<input>标签用于收集用户信息. 在 ...
新增表单控件和表单属性
·email 电子邮箱文本框 ·tel 电话号码 (主要功能在移动端,一个键盘的切换) ·url 网页的url ·search 搜索引擎 (chrome下输入文字后, ...
html文本框控件,HTML5的文本框表单控件
E-mail表单控件 E-mail表单控件与文本框相似,作用是链接电邮地址,为元素设置type="email":即可配置一个E-mail地址表单控件.只有支持HTML5email属 ...
autojs遍历当前页面所有控件_HTML5表单和表单控件的使用
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...

html5新增表单控件和表单属性

html5新增表单控件和表单属性相关推荐

最新文章

热门文章