第07章 HTML表单
我们写的HTML网页是需要与后台的服务器脚本（java）进行交互的，其中最重要的就是将页面上面的数据提交给服务器端。通常情况下，我们在网页中都是通过Form表单收集用户录入的数据，并通过Get或Post的方式提交给服务端的。首先，我们还是创建一个 “07_form.html” 文档看看Form标签的使用方式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form</title>
</head>
<body>
<form action="#" method="get">
</form>
</body>
</html>
我们使用了一个<form>标签，该标签里面有两个重要的属性，一个是action，表示我们Form数据提交的服务器请求URL地址。所谓的请求URL就是服务端提供给客户端的服务地址。这个请求URL类似于“http://www.xxx.com/abc/def”的形式，它是由“http://”协议以及服务器域名“www.xxx.com”以及服务器资源地址“/abc/def”等三部分组成。我们上述代码中action中的“#”号代表当前页面，并不是真正的服务端地址。在后面的java web课程中，我们会重点介绍如何构建服务器端的URL地址，并提供给客户端使用。我们继续form标签另一个是method属性，该属性一般情况下就是使用get或者post，两者区别就是数据提交方式而已 。有了form标签之后，我们如何提交数据呢？还得借助其他标签来完成用户数据的输入，比如常用的<input>标签，如下所示：
<form action="#" method="get">
<input type="text" />
</form>
上述代码中，我们将<input>标签放置到了<form>标签的里面，这样<input>标签采集的数据才能够被form提交到服务器端。我们注意到<input>标签有一个type属性，该属性值有很多，这里我们使用的是text，也就是一个文本输入框。通过文本输入框，用户可以输入数字，字母，汉字等信息。我们在浏览器中查看它的运行效果。
我们可以在里面输入文字信息
这些输入的信息就可以通过form被提交到服务器端。每一个<input>标签除了type属性之外，还有两个重要的属性，就是name和value，name属性代表<input>标签的名称，value属性代表<input>标签的值（例如我们上图中录入的"hello"文本），这两个属性（name-value）会组成一对 key-value 键值对。这个就好比“姓名=张三”就是一组键值对信息，key就是“姓名”，而“张三”就是value。我们服务器端的java代码就是根据name来获取value的值（这个非常类似于Java集合中的Map，它里面的get方法就是根据key来获取value值）。可见name和value非常重要。但是，对于文本输入框来讲，这个value不需要写，即使写了也是空着，因为真正的value值是需要用户录入进来的。例如我们上图中录入的“hello”就是<input>的value值。这个<input>标签的type属性除了text之外，还有其他值表示不同的输入框样式，如下所示：
<form action="#" method="get">
<p>文本框：<input type="text" name="name01" value="" /></p>
<p>密码框：<input type="password" name="name02" value="" /></p>
<p>文件框：<input type="file" name="name03" value="" /></p>
<p>隐藏框：<input type="hidden" name="name04" value="隐藏数据" /></p>
<p>多选框：<input type="checkbox" name="name05" value="Java" /> Java
<input type="checkbox" name="name05" value="Python" /> Python
<input type="checkbox" name="name05" value="Php" /> Php
<input type="checkbox" name="name05" value="C++" /> C++
</p>
<p>单选框：<input type="radio" name="name06" value="1" /> 男
<input type="radio" name="name06" value="2" /> 女
</p>
<p>提交按钮：<input type="submit" name="" value="提交按钮" /></p>
<p>普通按钮：<input type="button" name="" value="普通按钮" /></p>
</form>
以上就是各个标签的展示效果。由于<input>属于行内块标签，为了能使其换行，我们使用<p>标签将其包裹起来。接下来，我们逐一解释上面的代码，首先是输入框的代码，
<p>文本框：<input type="text" name="name01" value="" /></p>我们使用文字对<input>标签类型做了一个说明，文字和<input>标签在水平方向上进行横向排列，这也符合我们的一个视觉习惯。对于这个文本框，我们只添加了name属性，并没有写value的属性值，因为value是用户手动写入的，因此我们value留空即可。
接着是密码框，它的type值是password，我们只定义了name属性值，value也是留空。
<p>密码框：<input type="password" name="name02" value="" /></p>输入框和密码框的区别就是，密码框输入的内容不会以明文的方式显示，而是全部以“点”的方式展示，大家在日常的网页中也经常看到这种的效果，尤其是进行账号密码登录的时候。
接下来，我们说说文件框（type值为file），代码如下：
<p>文件框：<input type="file" name="name03" value="" /></p>它的作用就是从本地选择一个文件（例如一张图片），然后就可以将这个文件上传到服务器端。这个文件框对应的value是用户选择文件之后自动完成录入的，所以我们依然留空就行了（或者干脆省略不行也是可以的）。在表单提交服务数据后，浏览器就会把文件上传到服务器端，服务器端就可以获取到文件内容了。这里需要大家注意的是，如果我们需要在表单中提交文件的话，需要给<form>添加一个新属性“enctype="multipart/form-data"”
<form action="#" method="get" enctype="multipart/form-data">客户端和服务器端进行http协议通信的时候，需要指定通信内容类型，也就是Content-Type。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />还记的这句包含在<head>中的代码嘛，他就指定了服务端返回客户端的通信内容类型是“text/html”。当然，我们也可以设置客户端请求服务端的内容类型。在一个http请求中，客户端发送给服务器的数据可以是文本，也可以是图片或者音视频等等。如果表单只包含基于文本的输入组件（例如输入框），浏览器会将这些数据以 key=value 的形式组织，使用一种被称为 “application/x-www-form-urlencoded” 的 Content-Type 传输。如果表单中包含文件或图片等不能被编码成文本的元素，浏览器就会使用 “multipart/form-data” 向服务器传输数据。这就是我们给<form>添加新属性的原因了。
接下来，我们在说一说隐藏框的使用，
<p>隐藏框：<input type="hidden" name="name04" value="隐藏数据" /></p>这个隐藏<input>标签是不显示在网页上的，因此用户是看不到的。既然用户看不到，说明这个隐藏框并不是给用户使用的。通常情况下，隐藏框是我们开发人员自定义的，用来标识一些额外的不需要让用户知道的数据。这些数据被写在value属性值里面。也就是说，当你需要向服务器传递一些数据，并且不想让用户看到的话，就使用这个隐藏框实现。
接着我们说一下checkbox多选框（也叫复选框），这个输入方式比较特殊。它不是让用户手动写入的，而是需要用户点击选择。你觉得用户录入的时候，喜欢键盘多一点，还是鼠标多一点呢？假如，我们定义一个开发语言的数据集合，由于每个研发人员熟悉的开发语言有很多，因此它应该是一个多选项目。
<p>多选框：<input type="checkbox" name="name05" value="Java" /> Java
<input type="checkbox" name="name05" value="Python" /> Python
<input type="checkbox" name="name05" value="Php" /> Php
<input type="checkbox" name="name05" value="C++" /> C++
</p>
我们给每一项语音都配置了一个checkbox输入框，并且所有checkbox输入框的name属性值都是一样的。因为他们是一个整体，所以name属性必须一致。当然，value是不能一样了。我们可以点击选择其中几项，查看效果。
当我们选择“Java”和“Php”的时候，就可以看到“蓝底白色对勾”的选中状态。如果我们要向服务端提交数据的话，也只有“Java”和“Php”会被提交上去，而另外的“Python”和“C++”则不会被提交上去。我们上面已经提到过，<input>提交的数据是一个K-V 形式的数据对，那么此时这么多相同name的<input>提交的数据形式是不是很乱了呢？不是的，多选框提交的数据也是一个 K-V 形式的数据对，只不过这个V 是一个数组而已。也就是说，当我们服务器端获取name05数据的时候，它是一个数组。例如上图所示，我们选中了Java和Php两项，那么服务端获取到的数据就是name05=["Java","Php"]。请大家注意的是，提交服务器端的数据是<input>标签里面的value值，不是外面写的文字。外面的文字只是我们辅助用户使用checkbox多选框，是解释用途，这里我们将这些辅助文字与value值写出一样了而已。有时候，我们不会将辅助文字和value值保持一致。
为什么不使用文本输入框来获取开发语言数据呢？也可以，但是不如checkbox多选框好用。第一，它不需要用户手动输入，只需要点击即可。第二，它的数据是研发人员自定义的格式，比用户随便输入的方式好严谨很多。设想一下，让用户自己去填写熟悉的开发语言，你都不知道这些人会输入什么形形色色的数据出来。因此，不如我们给用户“框选”一个输入范围。
接下来就是单选框radio的使用，它的使用方式同checkbox一样，只不过是单选。
<p>单选框：<input type="radio" name="name06" value="1" /> 男
<input type="radio" name="name06" value="2" /> 女
</p>
这里大家注意的是，单选框的name属性值也是一样的，value属性值是不一样的，这和checkbox多选框是一样的。但是，因为它是单选，因此提交服务器端的 K-V 形式中的 V 就是一项数据了。注意，这里我们的辅助文字与value值就不一样了。
例如上图中我们选中了“男”，那么我们提交给服务器端的数据就是 “name06=1”，注意数据值是1，因为我们定义的<input>中的value值是 1。也就是说，我们使用1等价代表男，2等价代表女。这样做的目的是让数据更加简单。当然我们也可以字符“男”和"女"来充当value的值。那样的话，我们的服务器端的Java代码就应该使用字符类型来存储这个值。同样，我们使用辅助文字来解释单选框。如果想让单选框默认选中其中一个的话，可以使用“checked="checked"”属性值来实现。
最后就是按钮框的使用，如下代码：
<p>提交按钮：<input type="submit" name="" value="提交按钮" /></p>
<p>普通按钮：<input type="button" name="" value="普通按钮" /></p>
从页面展示来看，两者样子都差不多，但是背后的行为是不一样的。首先，在html中的按钮标签应该是<button>标签。当然这个<button>标签的样子与上面的<input>按钮是一样的。不管是<button>按钮标签，还是<input>按钮标签，他们的使用都是让用户去点击。而点击的目的则是响应一个事件。这个点击事件可以理解为一个“执行动作”，具体做什么事情由开发人员来决定。例如下代码：
<button onclick="javascript:alert('测试按钮')">测试按钮</button>
从页面展示来看，<button>按钮和<input>按钮是差不多的。当我们点击“测试按钮”时候
页面就会弹出一个弹框，里面显示“测试按钮”的文本字样，点击“确定”按钮就可以关闭了。很明显，这是由“οnclick="javascript:alert('测试按钮')"”代码来决定的。属性onclick就代表了点击事件，而事件对应的“执行动作”就是“javascript:alert('测试按钮')”代码。这段代码属于JavaScript脚本语言，意思是弹出一个提示框，提示框内容是“测试按钮”。关于JavaScript脚本语言，我们会在后面的章节介绍。
我们回到之前的<input>按钮上来。普通按钮就是一个普普通通的按钮，等效于<button>按钮标签，我们需要单独设置它点击事件；而submit按钮则是提交按钮，点击它之后，就会将表单中的数据提交到服务器端（这是自动完成的，不需要开发人员设置事件来完成），也就是<form>标签中action对应的请求URL上。因为这两个按钮的作用是触发事件，不涉及数据本身，因此它的name属性就没有多大意义了，而value属性值就是按钮的名称。
接下来，我们在介绍一个<textarea>标签，它是一个可以输入更多内容的输入框。
<p><textarea name="name07" rows="10" cols="20">在这里添加内容</textarea></p>
<p>提交按钮：<input type="submit" name="" value="提交按钮" /></p>
<p>普通按钮：<input type="button" name="" value="普通按钮" /></p>
<button onclick="javascript:alert('测试按钮')">测试按钮</button>
我们同样将新的代码放置到form标签里面，提交按钮的上面。
我们可以使用rows和cols分别定义<textarea>标签的宽度和高度，我们同样定义了该标签的name属性值。这里注意的是<textarea>标签的value值就是标签内容，因此我们不需要为其指定value属性值，而是在标签内直接写内容即可。这个标签主要用来输入大篇幅的文本。
最后在给大家说一下<select>标签（下拉框），如下所示：
<p>
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</p>
我们先看看它的效果
点击下拉效果
选取其他选项的效果
当我们选中“上海”的时候，提交服务端的数据为“city=2”的格式，也就是说，<select>的name属性值和 <option> 的value值来决定的上传数据格式。默认情况下，<select>是单选模式。如果想要改成多选模式的话，需要给<select>标签添加 “multiple="multiple"”属性，同时在多选的时候，还需要按住“Ctrl”键才可以哦。多选方式比较麻烦，因此很少使用。因此，我们平常都是按照 <select>的单选模式来使用。如果需要多选的话，还不如使用checkbox更加直观和方便。
以上就是我们在<form>中如何采集用户的数据，其实就是借助各种标签来实现的，包括输入框，选择框等等。每个输入标签都必须配置name属性和value属性，两者会以键值对(key=value)的形式提交到服务器端。这一点大家要清楚。当我们使用上述标签的时候，由于其默认的显示效果不是很好看，因此，我们经常会使用CSS来修改它们的外观，例如：
<style type="text/css">
.ipt { width:200px; height:30px; padding-left:10px; border:1px solid #999999; font-size:14px; }
</style>
<p><input type="text" class="ipt" /></p>
我们可以进行前后对比，发现经过我们自己定义后的<input>样式会更好一些。当然，有些还会给<input>添加一个背景图片，还有的设置 <input> 的border边框。这些都是我们改善原始<input>标签样式的方法。关于如何使用CSS让我们的表单标签变得更加好看，我们就不再多介绍了。
本课程的内容可以通过CSDN免费下载：https://download.csdn.net/download/richieandndsc/88962032