form表单的讲解

form表单在开发中使用频率非常高，尤其是在注册，登录界面，form表单是无处不在。form表单中元素非常的多。form表单是一个块级元素，首先，他的作用是将我们表单中的数据传递给我们的应用程序而进行处理。form表单中有几个重要的属性。语法如下：

那么其中，action是我们请求的地址，method是我们请求的方式,method方式分为post和get。post和get的区别我们在java后台的学习中会详细讲到。现在我们只要知道在开发过程中，一般采用post的方式来进行form表单的提交。
常用的有以下几种：
1.text框：

效果如下：

属性比较多，这里我一一讲解：
type=”text” 代表这个input是一个text框
placeholder=”请在这里输入文本” 这是一个h5的属性，在text框没有输入任何文字的情况下，默认会显示这一行文字。当输入第一个文字的时候，这行字会消失。
maxlength=”10” 这个代表的是你在这个text框里输入的文字不能超过10个，10个字符以后，浏览器默认就不会让你再往下输入了。
autofocus=”true” 该属性作用是自动获取焦点，就是在打开浏览器的时候默认直接可以在设置了该属性的input 框中输入东西。注意，整个浏览器中只有第一个设置该属性的input框会生效。
autoComplete=”off” 该属性的作用是是否显示历史记录框。我举个例子：

我们在input框中输入文字时，可能会触发浏览器的历史记录框的操作。如果设置了autoComplete的off，那么就不会弹出这个框，默认是on。
同时，我们也可以给text框设定默认值和只读属性，代码如下：

效果如下：

那么这个text框里默认填入了默认值这3个字，并且无法进行编辑。
value=”” 就是显示默认值
readonly=”true” 属性作用是只读，false即为可编辑。默认false。注意！这里有一个非常重要的点。text框中还有一个属性同样能将text框设定为只读：disabled=”true”
那么readonly和disabled有什么区别呢？
1.readonly只针对 text、password、textarea有效，而disabled 对于表单的所有元素都有效
2.当表单被提交时，被readonly的表单元素值会被提交出去，但是disabled的值不会被提交出去。
3.表单元素被readonly了以后，仍然可以获取焦点，disabled不能获取焦点。
2.password框

password框同理，也拥有和text一样的属性。但是passsword框是密码框，所以显示出来的所有字符以·代替：

3.textarea框

textarea是form表单中一个比较特殊的框，因为他是一个文本域。效果如下:

textarea中有他独有的属性 rows 和cols，分别代表行和列。rows=”10”就代表10行，cols=”40” 就代表40列。但是我们在一般的工作开发中不适用rows和cols来进行textarea的填充，因为每个浏览器对行和列的定义不一样，所以我们一般适用width和height来达到行和列的同样的效果。
另外，我们发现这个框是可以被拖动的。那么能被拖动，就一定有一个对应的样式来禁止他的拖动：resize:none; 我们设定了这个css样式以后，右下角的拖动小标签就会消失，并且这个textarea框禁止被拖动。
4.file框

file框是form表单元素中的文件提交域。效果如下图：

这只是一个文件提交域的效果，如果真的要提交到后台，还有很多工序需要进行。这里只做一个展示，后面会有详细的介绍。
5.select选择框

select框是form表单中的下拉列表框。效果如下：

注意，当form表单提交的时候，select 框提交的是选中的option元素的value属性的属性值，而不是option的文本。在项目工程中，我们一般定义一个value为空的option放在第一个，文本内容为请选择，这样就不会产生提交了默认value的情况。
同时，我们也可以给select 默认选中值，只要给我们需要默认选中的option加上一个selected=”true”，那么浏览器在加载的时候会默认选中该option：


6.radio框

注意，我这里定义了2组radio，radio是form表单中的单选框，首先我们先来看一下效果：

在上图gif中，我们发现，男和女是一组，笑笑和蕊蕊是一组。同一组里只能选中一组中的一个值。那么这个组是如何区分的呢？就是通过radio的name,name相同的radio为同一组。同样，form表单提交的时候，提交上去的是value的属性值，而不是radio的文本。
7.checkbox框

checkbox是form表单中的复选框。可以进行多项选择。checked是默认加载时选中，效果如下图：

和radio一样，提交的时候提交的是value的值。
8.hidden框

hidden框是form表单中的隐藏域，主要作用是用来在提交表单的时候提交一些必要的值，但是又不用显示在页面上，比如以后学到的数据库中，需要提交主键ID，但是ID又没必要在页面中显示，这时候就需要用到hidden框。
9.button按钮

效果如下：

我们可以给这个按钮加上宽高，颜色等各种样式来美化按钮，同时，可以给他绑定click事件，来根据需求触发点击事件执行不同的代码。
10.submit提交按钮

效果如下：

注意，这看上去像是一个普通的按钮。但是当点击他后，form表单会被提交出去。根据method的提交方式提交到action所写的地址。
11.reset重置按钮

效果如下：

重置按钮的作用是：当你点击重置按钮以后，该form表单中所有的元素都会回到最初始的状态。

以上是平常非常常用的一些form表单的元素，其他还有h5新增的一些元素，比如email框，date框，time框，range框，month框，week框，color框，number框，url框，tel框，datetime框，search框等。但是h5提供的元素只有IE9+的浏览器才支持，并且不一定是支持全部。