HTML5-表单

一、新的表单元素

<datalist> 元素规定输入域的选项列表。

<body>
    <form action="demo.php" method="get">
        <!-- autocomplete="off"可以解决文本内容缓存问题 -->
        <input list="demo" name="name" autocomplete="off"> 
        <datalist id="demo">
            <option value="1">
            <option value="2">
            <option value="3">
            <option value="4">
        </datalist>
        <input type="submit">
    </form>
</body>

 

兼容性：Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。

<keygen> 元素的作用是提供一种验证用户的可靠方法（不常用）。

<output> 元素用于不同类型的输出（不常用）。

 

二、表单控件

<input  type="email">

 email: 输入合法的邮箱地址
 url：  输入合法的网址
 number： 只能输入数字
 range： 滑块
 color： 拾色器
 date： 显示日期
 month： 显示月份
 week ： 显示第几周
 time：  显示时间

 

二、新的表单属性

<form>新属性：autocomplete、novalidate

autocomplete=on | off       自动完成填写

novalidate=true | false      是否关闭校验

 

<input>新属性

autocomplete=on | off       自动完成填写

autofocus  ： 自动获取焦点

form 属性规定输入域所属的一个或多个表单。

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

formaction 属性用于描述表单提交的URL地址，会覆盖<form> 元素中的action属性。

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)，会覆盖 form 元素的 enctype 属性。

formmethod 属性定义了表单提交的方式，会覆盖了 <form> 元素的 method 属性。

novalidate属性描述了 <input> 元素在表单提交时无需被验证，会覆盖 <form> 元素的novalidate属性。

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示，会覆盖 <form>元素的target属性。

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

multiple 属性规定<input> 元素中可选择多个值，适用于以下类型的 <input> 标签：email 和 file。

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值， title 属性描述匹配模式。

placeholder 占位符  （提示信息）描述输入域所期待的值。

required 必填项，规定必须在提交之前填写输入域（不能为空）。

 

很多记不住，知道有什么功能就行了，用的时候可以查一下。

 

posted @ 2020-12-30 18:04  JS-Feng  阅读(145)  评论(0)    收藏  举报