H5表单学习

玉不琢，不成器。人不学，不知义

表单元素其实还是`HTML`中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能

表单格式

单选框

1、默认情况下单选框不会互斥，即可以多选，想要互斥，那么必须给其添加一个name属性，值可以随便取，但是互斥的几个值必须一样。
2、想要单选框默认选中一个，那么可以给其添加一个checked属性，其值为checked，由于值和属性名一样，所以可以省略值，建议不省略

多选框

按钮

其中value为按钮的文字 onclick为点击事件，reset和submit默认值为重置和提交，当然我们可以添加value为其修改值。
submit为提交按钮，是提交到远程服务器

1、在哪里指定服务器呢？答案是在form标签的action属性中来指定，如下

这里我将其提交到我本地的blogDetail.html文件、

2、指定那些值来提交到服务器

在上面，给账号和密码分别指定了两个name属性，并赋值，这样在提交的时候，会将其值提交到服务器，看下面的提交地址
http://localhost:63342/beegoWebForBlog/views/blogDetail.html?loginname=test1&password=123456&xx=on
通过地址我们发现，参数和值分别跟在了地址后面，还有个xx=on，是因为我在单选框的时候也设置了个属性name

当然提交的数据为on这肯定是不行的，所以我们可以对选项卡进行如下的设置

就是添加一个value属性，这样就可以让我们明确的知道那个值

隐藏域

有时候我们需要提交一些隐藏的数据，但是又不想给用户展示，那么就有了下面这个方式

提交后看地址变成如下
http://localhost:63342/beegoWebForBlog/views/blogDetail.html?loginname=test1&password=123456&xx=on&hidden=yincangxinxi

Lable标签

当我们在登录页面的时候，如果点击前面的账号或者密码的时候，需要让后面的输入框进入选中状态的时候，我们可以将lable和input输入标签进行绑定，代码很简单，如下

在input中添加一个属性id，并在lable中添加一个for属性，然后将对应的值和其进行绑定即可，效果如下

1547793518227.jpg

也可以采取下面的方式来实现点击lable的时候，让输入框进入选中状态

            
                重新输入密码:

datalist标签

给输入框绑定待选选项

将id绑定到input标签中的list属性，由于现在大部分浏览器不支持....所以可以了解

非input标签

select:用于定义下拉列表
不能进行输入，但是能进行选择

效果如下

1549009867185.jpg

textarea 相当于`ios`中的`TextView`可以无限换行

可以通过cols和rows来指定列数和行数，但是还是可以无限往下输入，并且默认情况下可以通过鼠标进行拉伸