上一篇：Java 0基础入门 (Html标签的使用)

表单在网页中主要负责数据采集功能。

一.表单实际应用场景

如上两张图，图中的黑色线条是我画上去的，如果按照黑线，在Excle中画出这两张表单，相信大家都可以也不是很难，那在Html中，我们同样也是画出这样的表单，最后将黑线隐藏即可。

二.表单包含的控件

具体写法：(插一句，Html代码中,这样的内容，是注释内容，也就是代码执行的时候并不执行，只是类似看文言文时，旁边的注解一样)

单行文本框：

单行文本框：

密码框：

男女

跑步 打球

dsadasdas

隐藏域：

====请选择====江苏浙江上海

====请选择====江苏浙江上海山东安徽福建

提交按钮 重置按钮 普通按钮

标题按钮

三.表单的基本结构

……

action：指定提交后，由服务器上哪个处理程序处理，是一个路径，绝对路径，相对路径都可以。

method：指定向服务器提交的方法，一般为post或get方法, post方法比较安全，且能传输的数据量更大

四.表单的基本语法

用户名：

密 码：

表单输入元素：input，当然也有其它的。

五.表单的执行原理(了解即可)

客户端(比如：我们打开的网页)请求登陆，填写表单信息，点击某按钮提交→数据传输到服务器，服务器会执行后端代码(后续会讲到)，验证发来的信息，给出反馈(比如：通过；不通过)→客户端接收服务器的反馈，在页面上显示出来。

举个例子：

一个客户去某店买东西，客户(客户端)说我是你们会员，提供了姓名，手机号(这就类似填写表单的一个过程)，然后店员(服务器)根据你提供的姓名和手机号，查到了你的会员信息，然后告诉你(反馈)已经查到，确实是本店会员。

通过举例，希望大家能通俗的了解表单的执行原理。

六.表单的元素

1.文本框

type：指定input的类型，如果为text表示普通文本框

value：文本框中的初始值

maxlength：最大能够输入的字数

name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userName”)，之后的文章中会讲。

还有一个有用的placeholder属性，同样为初始值，区别于value，以灰色显示，且在输入内容时会自动被所输入的内容覆盖，清空输入内容后，又会显示出来，类似于一个提醒的作用。可自行尝试下。

2.密码框

type：指定input的类型，如果为password表示密码框

value：密码框中的初始值

maxlength：最大能够输入的字数

name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userPwd”)，之后的文章中会讲。

3.按钮

type的取值不同代表不同类型的按钮，对于提交按钮会提交表单，重置按钮可以清空表单内容，但是其它类型的按钮，具体实现什么功能，只能通过后面学习脚本以后才能进行处理，value属性表示按钮上显示的文本，name属性的主要作用体现在后期脚本的绑定上

4.button按钮

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

控件 与 相比，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

写法：开

5.单选按钮

input的type取值为radio时，表示单选按钮

name属性除了能够让服务器获取选中的单选按钮信息外，还能将单选按钮进行分组

checked=”checked”表示选中状态，同一组单选按钮，其中选中状态的按钮最多只有一个

value表示最后服务端真正能获取到的值。并不是显示在单选按钮外边的内容。

还可以在外边嵌套标签提升用户体验

6.复选框

input的type取值为checkbox时，表示复选框

name属性除了能够让服务器获取选中的复选框信息外，还能将复选框进行分组

checked=”checked”表示选中状态，同一组复选框，其中，选中状态的可以任意多个

value表示最后服务端真正能获取到的值。并不是显示在复选框外边的内容。

还可以在外边嵌套标签提升用户体验

7.文本域

用来输入多行文本

写法：12345

name:用于在服务端获取数据时使用

cols：列数

rows：行数

值得注意的是：textarea中的内容应该写在标签之间，而不是value属性中！！！如上述写法中，“12345”即为多行文本框的内容。

8.文件域

当input的type为file时，表示文件上传按钮，一般会和提交按钮一起使用，此处不做太多说明，文件具体上传时需要学习服务端编程后方可掌握。

9.列表框

[选择月份]

一月

二月

三月

四月

select：name属性，列表名称，用于服务器获取选中项

option是列表下面的每一个小项，value属性是服务器能获取到的具体的值，标签之间是呈现给用户的选项信息，selected="selected"表示该项选中。

10.隐藏域

方便“记住”一些供服务端使用的信息、但又不希望客户看到的数据

主要就是type属性为hidden，其他属性与input框的属性填写相同。

七.表单中的一些属性

只读和禁用属性

readonly：希望某个框内的内容只允许用户看，不能修改

disabled：因没达到使用的条件，限制用户使用

上面的属性也可用于其它表单元素，达到只读或禁用的效果。

form 表单中disabled属性的元素不参与表单提交，也就是表单submit后，后台无法获取有disabled属性元素的值。

八.HTML5 新的 input 类型及支持的浏览器

九.音频标签

写法：

暂不支持此标签

src：要播放的音频的 URL。

autoplay：如果出现该属性，则音频在就绪后马上播放。

loop：如果出现该属性，则每当音频结束时重新开始播放。

controls：若出现该属性，则向用户显示控件，比如播放按钮。

暂不支持此标签，是在你使用的浏览器，不支持的情况下显示。

具体浏览器的兼容性，见下图

十.视频标签

写法：

您的浏览器不支持video标签

src：要播放的视频的 URL。

controls="controls" 若出现该属性，则向用户显示控件，比如播放按钮。

loop="loop" 循环播放

autoplay="autoplay" 自动播放

width、height:指定视频窗口的大小

相比音频标签，可以添加width和height指定视频窗口大小