html5 新增表单控件,html5新增的表单控件和表单属性有哪些

bc364eb079247f14c3fc40bc7d6a0f5b.png

HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。

新的输入性表单控件:

email:电子邮箱文本框,跟普通的没什么区别- 当输入不是邮箱的时候,验证不通过

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

tel:电话号码

url:网页的URL

search:搜索引擎- chrome下输入文字后,会多出一个关闭的X

range:特定范围内的数值选择器- min、max、step(步数)

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

number:只能包含数字的输入框- 输入框末尾有两个箭头 上为加 下为减

color:颜色选择器- 点击显示颜色版

datetime:显示完整日期- 类似select选择样式

datetime-local:显示完整日期, 不包含时区

time:显示时间,不含时区

date:显示日期{年月日}

week:显示周{年月日周}

mouth:显示月{年月}

新的表单特性和函数

placeholder:输入框提示信息- 例子:微博的密码框提示

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

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

list和datalist:为输入框构造一个选择列表- list值为datalist标签的id

required:此选项必填, 不能为空

Pattern:正则验证- pattern=“\d{1,5}”

Formaction在submit里定义提交地址

placeholder="请输入4-16个字符" // 输入框内显示

autocomplete="off" // 是否记录输入的值

autofocus // 聚焦

required // 输入框不能为空

pattern="\d{1,5}" // 必须输入1到5个数字

/>

// required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验

// 如果用户在某个页面输入相当多的数据,临时有事需要离开一段时间,此时数据应该保存至草稿箱,那么同一个form表单下,将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值