写在前面：java作为一门世界级编程语言金字塔顶尖的语言。需要大量的练习、练习、练习来巩固自己所获得的知识。冰冻三尺非一日之寒，希望大家在学习java的日子里一定一定要坚持不懈，严格要求。多练，多问，多百度。祝大家早日成为一名优秀的软件工程师！
文章摘要：本文主要讲解html中比较重要的一个元素，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+的浏览器才支持，并且不一定是支持全部。
互动：原创不容易，很多人看完文章没有点赞留言的习惯，请大家支持我为文章点赞、分享。蕊蕊才有动力写更好的文章分享给大家。要有一万鐧界櫆椋庣殑娌荤枟鑽墿鍖椾含甯傜櫧鐧滈