Html笔记(七)表单
2024-10-20 01:29:26
表单标签: <form>
表单标签是最常用的标签,用于与服务器端的交互。
<input>:输入标签;接受用户输入信息
其中type属性指定输入标签的类型
- 文本框 text:输入的文本信息直接显示在框中。
- 密码框 password:输入的文本以圆点或者型号的形式显示。
- 单选框 radio:如:性别选择。
- 复选框 checkbox:如:兴趣选择。
- 隐藏字段 hidden:在页面上不显示,但在提交的时候随其他内容一起提交。
- 提交按钮 submit:用于提交表单中的内容。
- 重置按钮 reset:将表单中填写的内容设置为初始值
- 按钮 button:可以为其自定义事件。
- 文件上传 file :后期扩展内容,会自动生成一个文本框,和一个按钮。
- 图像 image 它可以替代 submit 按钮
<select>:选择标签,提供用户选择内容。如:用户所在省份。size属性为显示项目个数。
<option>:子项标签,属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。
<textarea>:多行文本框,如:个人信息描述。
<label>:用于给各元素定义快捷键。
for 属性:指定快捷键作用的表单元素。必须与要作用的表单元素的 id 值相同。
accesskey 属性:指定快捷键,此快捷键需要和 alt 键组合使用。
例:
<tr>
<td><label accesskey="u" for="userid">用户名</td>
<td><input type="text" name="user" id="userid"/></td>
</tr>
表单提交:
- 先定义 form 表单中的 action属性值,指定表单数据提交的目的地(服务端)。
- 明确提交方式,通过指定 method 属性值。如果不定义,那么 method 的值默认是 get。
get和post这两种最常用的提交方式的区别:
- get提交将数据显示在地址栏,对于敏感信息不安全。post提交不显示在地址栏。
- 地址栏中存放的数据是有限的,所以 get 方式对提交的数据体积有限制。post可以提交大体积数据。
- 对提交数据的封装方式不同:get:将提交数据封装到了消息头前面,请求行中。post:将提交的数据封装到消息头后,数据体中。
- 注意:
- 通常表单使用post提交,因为编码方便。对于Tomcat服务器端,默认的解码方式是ISO8859-1,那么中文会出现乱码。通过post提交,可以使用 request.setCharcterEncoding("GBK");来解决乱码问题,该方法只对数据体有效
- 如果是 get 提交,request.setCharcterEncoding("GBK");对乱码问题解决不了,必须先进行ISO8859-1编码,然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用,但是麻烦,所以建议表单提交使用 post。
例子:
<fieldset>
<legend>注册区域</legend>
<form action="http://127.0.0.1:8888" method="post">
<table border="5" width="75%" cellpadding="10" cellspacing="0" bordercolor="#3399FF">
<tr>
<td colspan="2" align="center"><b>信息注册页面</b></td>
</tr> <tr>
<td><label accesskey="u" for="userid">用户名</td>
<td><input type="text" name="user" id="userid"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="passwd"/></td>
</tr>
<tr>
<td>确定密码</td>
<td><input type="password" name="passwd_conform"/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td>技术</td>
<td>
<input type="checkbox" name="tech" value="java" />Java
<input type="checkbox" name="tech" value="jsp" />Jsp
<input type="checkbox" name="tech" value="servlet" />Servlet
</td>
</tr>
<tr>
<td>国家</td>
<td>
<select name="country">
<option>--选择国家--</option>
<option value="cn">中国</option>
<option value="en">英国</option>
<option value="usa">美国</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</td>
</tr> </table>
</form>
</fieldset>
安全问题:
暴力提交、暴力注册
<a href=”http://注册地址?name=value&id=value......”>暴力开始</a>
超链接默认就是get方式提交
客户端首先进行数据有效性校验,服务端对客户端提交的数据必须再次校验
最新文章
- 0921MySQL 报错 ERROR 1290 (HY000): running with the --secure-file-priv
- 贪心 Gym 100502E Opening Ceremony
- Symantec更新服务器
- oracle如何获取当年第一月,如今年是2015年,则需获取 201501
- [Javascript] Advanced Console Log Arguments
- swift 创建tableView 并实现协议
- (原)python中matplotlib的颜色及线条控制
- CSS3制作精美的iphone电话图标,不使用图片
- Android_开发人员经常使用的颜色
- Golang 网络爬虫框架gocolly/colly 一
- Python 实现auto linlink 连连看
- .net core 2.2 修改IdentityUser主键标识类型
- Python&#160;基于python+mysql浅谈redis缓存设计与数据库关联数据处理
- 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上
- Linux中systemctl命令详细介绍
- BZOJ2911 : [Poi1997]The Number of Symmetrical Choices
- 安卓之上传文件,即HTTP提交表单
- rsync同步文件(多台机器同步代码...)
- C++ 链接Mysql 函数介绍
- 【Loadrunner】性能测试报告实战
热门文章
- asp.net使用MVC4框架基于NPOI做导出数据到Excel表
- 【分享】 高级Visual Basic 编程 清晰pdf+随书源代码光盘
- [旧博客]Python 第一次
- 关于TFTLCD硬件接口和驱动的问题
- U盘、移动硬盘提示格式化的处理
- [JavaScript] 初中级Javascript程序员必修学习目录
- [转载]C#图片格式(JPG,BMP,PNG,GIF)等转换为ICO图标
- about backbone
- 解决ubuntu无法调整和保存屏幕亮度的问题
- 1101-Trees on the Level