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

 

getpost这两种最常用的提交方式的区别:

  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方式提交

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

posted @ 2013-10-13 22:38  ShawnWithSmallEyes  阅读(353)  评论(0编辑  收藏  举报