html5form属性,html5中新增哪些form属性
HTML5有哪些新的表单属性
表单结构更灵活要提交数据的控件可以布局在form标签之外，看下面的代码，表单元素可以写到form元素之外，只需在元素中加入form="form1"属性，也可提交到form元素指定的服务器地址新增表单元素我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用email类型用于验证email的格式，当提交表单时会自动验证email域的值url类型用于验证URL地址的格式，当提交表单时会自动验证url域的值number类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持range类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100日期和时间类型：HTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）search类型用于搜索域，比如站点搜索或Google搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果浏览器的支持情况chrome：firefox：Opera：MicrosoftEdge：好，我们对微软的进步进行表扬！新增表单属性除了新增的表单元素之外，html5中还新增了一些表单属性新的form属性：autocompletenovalidate新的input属性：autocompleteautofocusformformoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)height和widthlistmin,max和stepmultiplepattern(regexp)placeholderrequired在下面的案例中，我们对一些常用的属性做了解释，大家直接看代码和代码旁边的注释，然后对照浏览器的运行结果就理解其意义了
HTML(5)表单元素以及对各个表单元素的name、value属性的理解
我在学习表单元素的时候感觉很混乱，特别是 name value 这两个属性，没有真正理解它们是干什么的，所以需要梳理一下。
HTML表单元素主要有 form input select textarea button fieldset legend
HTML5新增的表单元素有三个 datalist keygen output
form元素定义HTML表单，收集用户输入。
属性主要有 action 和 method ；
action 定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮（type为 submit 的 input 元素）； 如果省略该属性，则action会被设置为当前页面 。
method 属性规定在提交表单时所用的HTTP方法（HTTP方法有GET和POST两种，这里只说一下两者的主要区别：GET方法会使表单数据在页面地址栏是可见的，而POST方法不可见，所以POST方法安全性更佳）。
input 元素很常用（为行内元素，在“去哪儿”找实习面试的时候被问到过，当时都答错......），根据不同的 type 属性，可以变化为多种形态。
type 的取值有 text radio checkbox password submit button ;HTML5又新增了 type 类型 email url search number range color date pickers（date month week...） ，这些新类型提供了更好的输入控制和验证。
对于 input 元素，除了 type 属性，常用的就是 name 和 value 属性：
name 属性----想要被正确地提交，每个输入字段必须设置一个 name 属性。
value 属性----为 input 元素设定值，对于不同的 type ， value 属性的含义也不同。
效果图如下
当选择“许嵩”，点击“提交”按钮后，看到页面地址栏里表单数据的内容如下图所示。
注意：单选钮的各个 name 属性值要完全一致，否则会不只选中一个选项
效果图如下
定义下拉列表，需要配合 option 使用， option 定义待选择的选项；通常会把首个选项显示为被选选项；可通过selected属性来定义预定义选项。
效果图如下：
当 value 的属性值是空的时候，会取 option 的内容值作为表单数据提交。
定义多行输入字段（文本域）
效果如下图
地址栏数据如下图所示。当文本域为空时，提交的表单数据也为空；改变文本域的值，再次提交，则表单数据也会相应的改变。
button 元素的 type 属性有三个可能的值 button submit 和 reset ；这里只介绍属性值 button
type 为 button 时，定义可点击的按钮
效果如下图
点击后出现
规定输入域的选项列表；需要配合 option 元素一起使用，该元素定义列表项；如需把datalist绑定到输入域，需要把输入域的 list 属性值设置为datalist的 id 值； option 元素必须要设置 value 属性。
效果图如下
当选择第三项，并点击"提交"按钮后，地址栏数据如下
提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时会生成两个键，一个是公钥，一个是私钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。
目前浏览器对该元素糟糕的支持程度 不足 以使其成为有用的安全标准。
效果图如下
点击第一项并提交后，地址栏的数据为
用于不同类型的输出，如计算或脚本输出。
效果如下图
通过总结对这些元素的认识更加深刻了，所以要经常整理！
html添加了哪些表单元素和属性
html5 新增了的表单元素和属性如下：
属性：
1、 form属性
在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可。
2、 formaction属性
HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址
3、formmethod属性
既然对提交按钮有了formaction属性，就相应的有了formmethod属性
4、 placeholder属性
给文本框(text或textarea)处于未输入状态时的一种文字提示
5、autofocus属性
自动获得焦点，一个页面只能有一个控件具有该属性
6、 list属性
HTML5为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该蒜素的浏览器出现错误，我们通常使用CSS设置不显示
6、autocomplete属性
自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。
元素：
HTML5大幅度地增加和改良了input元素的种类
search 与text文本框类似，用于搜索；
tel 与text文本框类似，用于电话；
url 与text文本框类似，用于url格式的地址；
email 与text文本框类似，用于email格式的地址；
number 与text文本框类似，用于数值；
range 只允许输入一段范围内的数值，通过min和max属性来设置范围；
color 颜色文本框，“#000000”格式的文字；
file 文件选择文本框，HTML5中通过multiple属性可以多选；
datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；
output 定义不同类型的输出；
表单验证
自动验证
所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
1、 required属性
具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示
2、pattern属性
具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示
3、min属性和max属性
它们是值类型和日期类型的input元素专用属性，限制了输入的范围
4、 step属性
控制元素的值增加或减少的步幅，如输入11-100之间的数字，且步幅是5，那么只能输入11、16、21....
显示验证
除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果。
取消验证
取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate：
自定义错误
在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息
增强的页面元素
1、figure元素
figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption
2、details元素
details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法
3 、mark元素
mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果
4、progress元素
可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。
5、 meter元素
定义度量衡
6、改良的ol列表
在HTML5中为ol元素添加了start属性和reversed属性
7、改良的dl列表
dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn
8、 另外还有cite用于表示作者，small用于标识“小型文本”等
html5中的 表单 form 和input属性中的name属性有啥
表单是前端用于向后台（PHP也好，JAVA也罢）提交数据的，form标签，对于网页来说，会“读取到”这是一个表单，是用于向后台提交数据的，通过form标签中属性的定义，确定要提交数据的地址（向哪里提交数据）以及提交数据的方式。换言之，如果没有form标签，表单数据是不能被“同步”提交的
input当中的name属性，也是为后台准备的，后台获取数据的方法是通过input的name属性，比如想要获取一个input的value值，input的name为user，那么在后台语言（如PHP）中，就通过 $_GET['user'] 的方法来获取
HTML 5 form 属性
form可以理解为一个框，然后把所有的input放在里面，
form的属性action表示你要处理表单内容的那个后端页面，一般是php或asp的；method属性，表示发送请求的方法，包括get和post两种，post加密，无字节限制。
由于实际开发中一个页面的input内容不可能全是连着放一块的，中间可能插入其他内容，所以，html5中form有新的元素，设置一个ID，然后其他的input元素中设置form属性，值等于ID，这样一个页面中不需要有多个form标签了，然后通过相同的ID就可以把所有的input标签放到form元素内了。示例：
form?action="/example/html5/demo_form.asp"?method="get"?id="user_form"
First?name:input?type="text"?name="fname"?/
input?type="submit"?/
/form
p下面的输入域在?form?元素之外，但仍然是表单的一部分。/p
Last?name:?input?type="text"?name="lname"?form="user_form"?/
下面的input标签没有放在form元素内，但是，它有个form属性，指向了form标签的ID值，这样就把他们绑定了。