HTML(5)表单元素以及对各个表单元素的name、value属性的理解

我在学习表单元素的时候感觉很混乱，特别是 name value 这两个属性，没有真正理解它们是干什么的，所以需要梳理一下。

HTML表单元素主要有

HTML5新增的表单元素有三个

元素定义HTML表单，收集用户输入。

属性主要有 action 和 method ；

action 定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮（type为 submit 的 元素）； 如果省略该属性，则action会被设置为当前页面 。

method 属性规定在提交表单时所用的HTTP方法（HTTP方法有GET和POST两种，这里只说一下两者的主要区别：GET方法会使表单数据在页面地址栏是可见的，而POST方法不可见，所以POST方法安全性更佳）。

元素很常用（为行内元素，在“去哪儿”找实习面试的时候被问到过，当时都答错......），根据不同的 type 属性，可以变化为多种形态。

type 的取值有 text radio checkbox password submit button ;HTML5又新增了 type 类型 email url search number range color date pickers（date month week...） ，这些新类型提供了更好的输入控制和验证。

对于 元素，除了 type 属性，常用的就是 name 和 value 属性：

name 属性----想要被正确地提交，每个输入字段必须设置一个 name 属性。

value 属性----为 元素设定值，对于不同的 type ， value 属性的含义也不同。

效果图如下

当选择“许嵩”，点击“提交”按钮后，看到页面地址栏里表单数据的内容如下图所示。

注意：单选钮的各个 name 属性值要完全一致，否则会不只选中一个选项

效果图如下

定义下拉列表，需要配合 使用， 定义待选择的选项；通常会把首个选项显示为被选选项；可通过selected属性来定义预定义选项。

效果图如下：

当 value 的属性值是空的时候，会取 的内容值作为表单数据提交。

定义多行输入字段（文本域）

效果如下图

地址栏数据如下图所示。当文本域为空时，提交的表单数据也为空；改变文本域的值，再次提交，则表单数据也会相应的改变。

元素的 type 属性有三个可能的值 button submit 和 reset ；这里只介绍属性值 button

type 为 button 时，定义可点击的按钮

效果如下图

点击后出现

规定输入域的选项列表；需要配合 元素一起使用，该元素定义列表项；如需把datalist绑定到输入域，需要把输入域的 list 属性值设置为datalist的 id 值； 元素必须要设置 value 属性。

效果图如下

当选择第三项，并点击"提交"按钮后，地址栏数据如下

提供一种验证用户的可靠方法。

元素是密钥对生成器（key-pair generator）。当提交表单时会生成两个键，一个是公钥，一个是私钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

目前浏览器对该元素糟糕的支持程度 不足 以使其成为有用的安全标准。

效果图如下

点击第一项并提交后，地址栏的数据为

用于不同类型的输出，如计算或脚本输出。

效果如下图

通过总结对这些元素的认识更加深刻了，所以要经常整理！

通俗的讲form标签是用来进行表单提交用的。

form标签里面的常见属性如下。

action: 表单提交的地址, 肯定是要提交给某个服务器的,action的地址就是要提交的服务器的地址。

method:以何种方式提交,常见的为get和post. 区别在于一个是明文(在url中显示),一个是暗文。

form标签是和服务器交互用的, 以用户注册为例。

用户在浏览器中的注册页面添加信息后,点击提交,此时是将这些信息提交至某个服务器。

服务器根据提交的信息将注册信息保存. 这个过程就需要使用form标签了。

form中action属性应该是服务器注册模块的地址。

form标签下应该有input,textarea,select等表单标签以及

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com