Html笔记(七)表单

表单标签： <form>

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签；接受用户输入信息

其中type属性指定输入标签的类型

• 文本框 text：输入的文本信息直接显示在框中。
• 密码框 password：输入的文本以圆点或者型号的形式显示。
• 单选框 radio：如：性别选择。
• 复选框 checkbox：如：兴趣选择。
• 隐藏字段 hidden：在页面上不显示，但在提交的时候随其他内容一起提交。
• 提交按钮 submit：用于提交表单中的内容。
• 重置按钮 reset：将表单中填写的内容设置为初始值
• 按钮 button：可以为其自定义事件。
• 文件上传 file ：后期扩展内容，会自动生成一个文本框，和一个按钮。
• 图像 image 它可以替代 submit 按钮

<select>：选择标签，提供用户选择内容。如：用户所在省份。size属性为显示项目个数。

<option>：子项标签，属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

<textarea>：多行文本框，如：个人信息描述。

<label>：用于给各元素定义快捷键。

for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的 id 值相同。

accesskey 属性：指定快捷键，此快捷键需要和 alt 键组合使用。

例：

1 <tr>
2                 <td><label accesskey="u" for="userid">用户名</td>
3                 <td><input type="text" name="user" id="userid"/></td>
4             </tr>

表单提交：

1. 先定义 form 表单中的 action属性值，指定表单数据提交的目的地(服务端)。
2. 明确提交方式，通过指定 method 属性值。如果不定义，那么 method 的值默认是 get。

get和post这两种最常用的提交方式的区别：

1. get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏。
2. 地址栏中存放的数据是有限的，所以 get 方式对提交的数据体积有限制。post可以提交大体积数据。
3. 对提交数据的封装方式不同：get：将提交数据封装到了消息头前面，请求行中。post：将提交的数据封装到消息头后，数据体中。

• 注意：
• 通常表单使用post提交，因为编码方便。对于Tomcat服务器端，默认的解码方式是ISO8859-1，那么中文会出现乱码。通过post提交，可以使用 request.setCharcterEncoding("GBK");来解决乱码问题，该方法只对数据体有效
• 如果是 get 提交，request.setCharcterEncoding("GBK");对乱码问题解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦，所以建议表单提交使用 post。

例子：

 1 <fieldset>
 2     <legend>注册区域</legend>
 3     <form action="http://127.0.0.1:8888" method="post">
 4         <table border="5" width="75%" cellpadding="10" cellspacing="0" bordercolor="#3399FF">
 5             <tr>
 6                 <td colspan="2" align="center"><b>信息注册页面</b></td>
 7             </tr>
 8             
 9             <tr>
10                 <td><label accesskey="u" for="userid">用户名</td>
11                 <td><input type="text" name="user" id="userid"/></td>
12             </tr>
13             <tr>
14                 <td>密码</td>
15                 <td><input type="password" name="passwd"/></td>
16             </tr>
17             <tr>
18                 <td>确定密码</td>
19                 <td><input type="password" name="passwd_conform"/></td>
20             </tr>
21             <tr>
22                 <td>性别</td>
23                 <td>
24                     <input type="radio" name="sex" value="man"/>男
25                     <input type="radio" name="sex" value="woman" />女
26                 </td>
27             </tr>
28             <tr>
29                 <td>技术</td>
30                 <td>
31                     <input type="checkbox" name="tech" value="java" />Java
32                     <input type="checkbox" name="tech" value="jsp" />Jsp
33                     <input type="checkbox" name="tech" value="servlet" />Servlet
34                 </td>
35             </tr>
36             <tr>
37                 <td>国家</td>
38                 <td>
39                     <select name="country">
40                         <option>--选择国家--</option>
41                         <option value="cn">中国</option>
42                         <option value="en">英国</option>
43                         <option value="usa">美国</option>                        
44                     </select>
45                 </td>
46             </tr>
47             <tr>
48                 <td colspan="2" align="center">
49                     <input type="submit" value="submit"/>
50                     <input type="reset"  value="reset"/>
51                 </td>
52             </tr>
53             
54         </table>
55     </form>
56 </fieldset>    

安全问题：

暴力提交、暴力注册

1 <a href=”http://注册地址?name=value&id=value......”>暴力开始</a>

超链接默认就是get方式提交

客户端首先进行数据有效性校验，服务端对客户端提交的数据必须再次校验