九、表单（绿叶学习网）

1. 简单来说，对于一个网页，只限用户浏览的，那就是静态网页。如果用户能实现与服务器交互，如登陆注册、评论交流、问卷调查这些动作的，就是动态页面。表单，这是我们接触动态页面的第一步。表单最重要的作用就是在客户端收集用户的信息，然后将数据递交给服务器来处理。学习HTML主要是实现客户端的效果，而ASP.NET更多的是实现服务器端的逻辑功能。

2. 创建一个表单看上去就像创建一个表格，表格的行、列和单元格都放在<table>标签中，而创建表单的方式跟创建表格的一样。如果你要创建一个表单，那你就要把表单的那些各种标签放在表单标签<form>内部。语法：<form>表单各种标签</form>。

3. <form>标签有几个属性，分别是action、method、enctype和target属性。
   A. 表单名称name
   一个页面你的表单可能不止一个，为了区分这些表单，我们使用name属性来给表单进行命名。这样也是为了防止表单提交之后到后台程序出现混乱。语法：<form name="表单名称">。表单名称中不能包含特殊字符和空格。
   B. 提交表单action
   action用于指定表单数据提交到哪个地址进行处理。表单的处理程序是表单要提交的地址，这个程序地址用来处理从表单搜集的信息。这个地址可以是相对地址，也可以是绝对地址，还可以是一些其他形式的地址。
   C. 传送方法method
   表单method属性作用是告诉浏览器，指定将表单中的数据使用哪一种HTTP提交方法，取值为get或post。
   get 默认值，表单数据被传送到action属性指定URL，然后这个新URL被送到处理程序上
   post 表单数据被包含在表单主体中，然后被传送到处理程序上
   这两种方式的区别在于，get在安全性上较差，所有的表单域的值直接显示出来。而post除了只有可见的处理脚本程序之外，其他的信息都可以隐藏。所以实际的开发当中通常都选择post这种处理方式。
   D. 目标显示方式target
   <form>标签的target属性跟<a>标签的target属性一样，都是用来指定目标窗口的打开方式。target这4个属性值都是以下划线“_” 开头的，书写的时候很容易遗漏。
   一般情况下，target采用默认属性值（即“_self”）和”_blank”这两种方式，跟a标签的target属性类似，其他两种用得比较少。
   E. 编码方式enctype
   <form>标签的enctype属性用于设置表单信息提交的编码方式。
   application/x-www-form-urlencoded： 默认的编码方式
   multipart/form-data： MIME编码，对于“上传文件”这种表单必须选择该值
   一般情况下，采用默认值就行了（即enctype属性不需要设置）。
   综上，语法为：<form name="form1" action="mailto:lvyestudy@foxmail.com" method="post" target="_blank" enctype="application/x-www-form-urlencoded"></form>

4. 所谓的表单对象，简单来说，就是放在<form>标签内部的各种标签。最常见的文本框、下拉列表都是表单对象。表单对象有3种：① input；②textarea；③select和option。
   记住，表单标签就只有4个：<input>、<textarea>、<select>和<option>，其中<select>和<option>是配合使用的，就像<ol>和<li>配合使用一样。

5. HTML<input>标签
   说明：input标签是[自闭合标签]，因为它没有结束标签。

A. 单行文本框text--单行文本框比较常见，我们经常在用户登录模块用到。语法：<input type="text"/>
文本框text有以下几个属性可以设置：
value 定义文本框的默认值，也就是文本框内的文字
size 定义文本框的长度，以字符为单位
maxlength 设置文本框中最多可以输入的字符数
<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>

B. 密码文本框password--密码文本框可以说是一种特殊的文本框，它和普通文本框的属性都相同。密码文本框与普通文本框不同的是，普通文本框输入的字符可见，而密码文本框输入的字符不可见，这个设置主要是为了防止周围的人看到自己的密码。
密码文本框跟普通文本框属性类型一样。密码文本框同样有以下几个属性可以设置：
<input type="password" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>

C. 单选按钮radio--单选按钮radio只能从选项列表中选择一项，选项与选项之间是互斥的。
语法：<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"/>
说明：name和value属性是radio必要属性，这两个属性必须要设置。对于同一个问题的不同选项必须要设置一个相同的name属性值，这样才能把这些选项归为同一个问题上。表面上加value属性值跟没加是没什么区别的（外观上）。之所以加value是为了方便像服务器端传递数据，这个是属于后端技术的内容。

D. 复选框checkbox--单选按钮radio只能从选项列表中选择一项，而复选框checkbox可以从选项列表中选择一项或者多项。
语法：<input type="checkbox" value="复选框取值" checked="checked"/>
说明：checked属性表示该选项在默认情况下已经被选中。不像单选按钮，对于复选框，一个选项列表中可以有多个复选框被选中。复选框checkbox不像单选按钮radio，它不需要设置选项列表的name，因为复选框可以多选。HTML中的复选框是没有文本的，需要加入label标签，并且用label标签的for属性指向复选框的id。
“<label for="checkbox1">苹果</label>”表示label指向id为checkbox1的复选框，以此类推。复选框是checkbox必须和label标签配合使用的。第一句代码中加了checked="checked"这个属性值，表示该选项默认情况下被选中。

E. 普通按钮button--普通按钮一般情况下要配合JavaScript脚本来进行表单的实现。
语法：<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
说明：value的取值就是显示在按钮上的文字，onclick是普通按钮的事件。

F. 提交按钮submit--提交按钮可以看成一种具有特殊功能的普通按钮，单击提交按钮可以实现将表单内容提交给服务器处理。
语法：<input type="submit" value="提交按钮的取值"/>
说明：value的取值就是显示在按钮上的文字。提交按钮submit真正的用处还得我们学了后端技术才能真正理解。

G. 重置按钮reset--重置按钮也可以看成一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在页面表单中输入的信息。
语法：<input type="reset" value="重置按钮的取值"/>
说明：value的取值就是显示在按钮上的文字。你在文本框输入字符之后，按下重置按钮，你会发现文本框的内容清除了！这就是重置按钮的功能。但是重置按钮只能清除“当前所在form标签”内的表单元素内容，对当前所在form标签之外的表单元素无效。提交按钮也是针对当前所在<form>标签而言的。

H. 图片域image--语法：<input type="image" src="图像的路径"/>
说明：图片域image既拥有按钮的特点，也拥有图像的特点。因此，它需要设置图片的路径，方法跟img标签引用图片设置路径一样。参考“[相对路径和绝对路径]”。我们完全可以用图片域image来实现各种漂亮的按钮，但是在前端开发中，我们更多的是使用CSS3来实现。因为前端有一个不成文的规定是，图片往往数据传输大，对于页面效果能不用图片就尽量不用图片，而是尽量使用CSS来实现。

I. 隐藏域hidden--有时候我们想要在页面传送一些数据，但是又不想让用户看见，这个时候我们可以通过一个隐藏域来传送这样的数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。
语法：<input type="hidden"/>
说明：在浏览器预览，隐藏域这个表单并没有显示出来，这样我们就可以在后台程序传递一些数据。但是我们通过查看HTML页面源代码，是可以看到该元素属性的值的。所以尽量不要使用hidden来传递敏感信息，如密码、手机号码等。

J. 文件域file--在HTML中，文件上传同样也使用input标签。当使用文件域file时，必须在form的标签中说明编码方式“enctype=“multipart/form-data”。这样，服务器才能接收到正确的信息。语法：<input type="file"/>

6. 单行文本框只能输入一行信息，而多行文本框可以输入多行信息。多行文本框使用的是textarea标签，而不是input标签。
   语法：<textarea rows="行数" cols="列数">多行文本框内容</textarea>
   说明：在该语法中，不能使用value属性来建立一个在文本域中显示的初始值，这一点跟单行文本框不一样。对于多行文本框的默认文字内容，你可以设置，也可以不设置。文本框有3种形式：单行文本框text、密码文本框password和多行文本框textarea。单行文本框和密码文本框使用的是input标签，而多行文本框使用的是textarea标签。

7. 下拉列表由<select>和<option>这2个标签配合使用。这个特点跟列表是一样的，如无序列表是由<ul>标签和<li>标签配合使用。为了更好理解，我们可以把下拉列表看成一个特殊的无序列表。下拉列表是一种最节省页面空间的选择方式，因为在正常状态下只显示一个选项，单击下拉菜单打开菜单后才会看到全部的选项。
   A. 下拉列表<select>标签属性：
   multiple 可选属性，只有一个属性值"multiple"。默认情况下下拉列表只能选择一项，当设置multiple=“multiple”时，下拉列表可以选择多项。想要选取多项，使用“Ctrl+鼠标左键”即可。
   size 下拉列表展开之后可见列表项的数目
   B. 下拉列表<option>标签属性
   value 选项值
   selected 是否选中
   option标签value值，自不多说。selected属性表示这个列表项是否选中，跟复选框checkbox的checked是一样的意思。

8. 表单按钮语法格式如下：
   <input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
   我们知道表单按钮使用的是<input>标签，而<input>标签是自闭合标签，这是因为它没有结束符号。从自闭合标签的特点我们知道，表单按钮是没有办法插入其他内容的。
   一般标签都有开始符号和结束符号，而自闭合标签只有开始符号没有结束符号。一般标签开始符号和结束符号之间能插入其他标签或文字，而自闭合标签只能定义自身的一些属性。
   而<button>标签语法格式如下：<button>文本或图像</button>
   说明：开始符号<button>与结束符号</button>之间可以插入文本或者图像。
   <button>标签与表单按钮相比，<button>标签开始符号与结束符号之间可以插入其他标签或文本，因此它的功能更加强大。
   分析：<button>标签可以插入文本或者其他标签，并且<button>与</button>标签之间的所有内容都是按钮的内容。在button标签内部插入<img>图像，实现效果跟图片域image有着异曲同工之效。
   button标签按钮：<button>这是一个按钮</button>
   表单标签按钮：<input type="button" value="这是一个按钮"/>
   分析：这两个按钮在浏览器预览效果是一样的，但是代码实现方式却不一样。大家留意一下按钮中的文字在表单按钮和button标签按钮都是怎样定义的？表单按钮显示的文字是在<input>标签的属性value中定义，而button标签按钮显示的文字是在开始符号<button>和结束符号</button>之间定义的。