HTML5保留的表单元素 以及 新增的属性

首先是HTML5所保留的一些元素:

  1. input元素
    input元素中有好多的类型,例如(单行文本框)text ,(密码输入框)password,(隐藏框)hidden,(单选框)radio,(复选框)checkbox,(图像域)image,(文件上传域)file,(提交,重设,无动作按钮)submit,reset,button。
    在这里插入图片描述

  2. lable定义标签
    在这里插入图片描述
    首先lable中的for属性要和input中的ID属性一致,人性化的是,点击文本框或者前边的“框”字,都可以进行框内输入。增加了用户体验。
    在这里插入图片描述

  3. button
    简单的定了一个按钮, 中可以包括文本和图片,这是和input的不同之处。
    按钮可以设置成图片按钮。但是一般都是文字按钮,文字是 提示信息。这个就不再详细描述了。

  4. select 和option元素
    select元素用于创建列表框或者下拉菜单,元素必须用option
    还有optgroup元素,子元素必须是option
    multiple 和size 规定了下拉菜单中的元素是否可以多选和显示的数量。
    在这里插入图片描述

  5. textarea
    简单的定义了多行文本框,可以指定其大小 ,与上述单行唯一的区别,还存在只读,就是上边的不可编辑的文本框。

  6. fielset 和 legend
    在这里插入图片描述
    ps:fielset的 disable属性可以使该表单组内的所有表单禁用

  7. form属性
    简单来说,HTML5新增了form属性,用于定义该表单控件所属的表单,该属性的值是它所属表单的id,不必使所有表单都放在form元素内部了

  8. formxxx (enctype methon target)
    enctype:改变表单的提交方式
    methon : 改变表单的提交方式
    target(_blank,_self):提交打开一个新的窗口和提交在本身窗口打开

  9. autofocus 和 placeholder
    一张图解决它们的作用
    在这里插入图片描述

  10. list属性(datalist)
    在这里插入图片描述

  11. autocomplete属性
    此属性有两个值 off 和 on 也就是开关
    当值为off 时 ,表单中,例如用户名(单行文本框)在第二次输入时候就不会提示第一次输入的用户名信息。当设置为on时候 ,第二次输入用户名会出现第一次输入的用户名作为提示。

  12. lable的control属性
    在这里插入图片描述
    ps:一张图说明白此属性

  13. 功能丰富的input元素

    在这里插入图片描述

    ps:HTML5新增的功能丰富的元素,省去了javascript繁琐的代码,太tmd 人性化了。

  14. HTML5新增的客户端校验
    required:表示该表单控件必须填写
    pattern:该表单控件填写必须符合这个正则表达式
    min,max,step:表示数值大小在min和max之间 ,step 表示步长
    在这里插入图片描述
    就总结 到这里了,后期再补充。欢迎大佬指点批评。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值