HTML表单有什么作用?HTML表单 (form) 的作用解释
表单在网页中主要负责的是数据采集功能,一个表单基本由三部分组成:表单标签:这里面包含了处理表单数据所用 CGI (Common Gateway Interface,通用网关接口)程序的 URL (Uniform Resource Location,统一资源定位符)以及数据提交到服务器的方法。表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
(资料图片)
下面对表单的三个部分分别进行说明。
一、表单标签
1. 功能
表单标签用于申明表单,定义采集数据的范围。也就是说< form>和< /form >里面包含的数据将被提交到服务器或者电子邮件里。
2. 标签格式
基本格式:
基本语法格式:
......
上述属性解释如下:
action=url:用来指定处理提交表单的格式。它可以是一个URL地址(提交给程式),或一个电子邮件地址;method=get | post:指明提交表单的 HTTP 方法,可能的值有 POST 或 GET,在数据传输过程中分别对应了 HTTP 协议中的 GET 和 POST 方法。虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响;其他说明见注;enctype=cdata:指明用来把表单提交给服务器时(当 method 值为 POST)的互联网媒体形式。这个特性的缺省值是”application/x-www-form-urlencoded”;TARGET=”…”:指定提交的结果文档显示的位置: _blank:在一个新的、无名浏览器窗口调入指定的文档;_self:在指向这个目标的元素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父 FRAMESET 框中;这个值在当前框没有父框时等价于_self;_top :把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.
注: 1、关于 GET 与 POST:
GET 是用来从服务器上获得数据,而 POST 是用来向服务器上传递数据;GET 将表单中的数据按照 variable=value的形式,添加到 action 所指向的 URL 后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;POST 是将表单中的数据放在 form 的数据体中,按照变量和值相对应的方式,传递到 action 所指向 URL;GET 是不安全的:因为在传输过程,数据被放在请求的 URL 中,而如今现有的很多服务器、代理服务器或者用户代理都会将请求 URL 记录到日志文件中,然后放在某个地方。这样就可能会有一些隐私的信息被第三方看到。另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。POST的所有操作对用户来说都是不可见的;GET 传输的数据量小,这主要是因为受 URL 长度限制;而 POST 可以传输大量的数据,所以在上传文件只能使用 POST;GET 限制 Form 表单的数据集的值必须为 ASCII 字符;而 POST 支持整个 ISO10646 字符集;GET 是 Form 的默认方法;使用 POST 传输的数据,可以通过设置编码的方式正确转化中文;而 GET 传输的数据却没有变化,在以后的程序中,我们一定要注意这一点。
二、表单域
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等,用于采集用户的输入或选择的数据,下面分别讲述这些表单域的代码格式。
1. 文本框
文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。代码格式如下:
属性解释如下:
type=”text”:定义单行文本输入框;name:定义文本框名称; 要保证数据的准确采集,必须定义一个独一无二的名称;size:定义文本框的宽度,单位是单个字符宽度;maxlength:定义最多输入的字符数;value:定义文本框的初始值;
示例如下:
2. 多行文本框
多行文本框也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。代码格式如下:
属性解释如下:
name:定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;cols:定义文本框的宽度,单位是单个字符宽度;rows:定义文本框的高度,单位是单个字符宽度;wrap:定义输入内容大于文本域时显示的方式,可选值如下: 默认值:文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;Off:用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行;Virtual:允许文本自动换行;Physical:让文本换行,当数据被提交处理时,换行符也将被一起提交处理。
示例如下:
3. 密码框
密码框是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。代码格式如下:
属性解释如下:
type=”password”:定义密码框;name:定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size:定义文本框的宽度,单位是单个字符宽度;maxlength:定义最多输入的字符数;
示例如下:
4. 隐藏域
隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。代码格式如下:
属性解释如下:
type=”hidden”:定义隐藏域;name:定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;value:定义隐藏域的值;
示例如下:
5. 复选框
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。代码如下:
属性解释如下:
type=”checkbox”:定义复选框;name:定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;value:定义复选框的值;
示例如下:
xxxcom
6. 单选框
单选框用于访问者在选项中选择唯一答案的情况。代码如下:
属性解释如下:
type=”radio”:定义单选框;name:定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;value:定义单选框的值,在同一组中,它们的域值必须是不同的;
示例如下:
7. 文件上传框
有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。 注:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=”multipart/form-data”来确保文件被正确编码;另外,表单的传送方式必须设置成POST。 代码格式如下:
属性解释如下:
type=”file”:定义文件上传框;name:定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size:定义文件上传框的宽度,单位是单个字符宽度;maxlength:定义最多输入的字符数;
示例如下:
8. 下拉选择框
下拉选择框允许你在一个有限的空间设置多种选项。代码格式如下:
......
属性解释如下:
size:定义下拉选择框的行数;name:定义下拉选择框的名称;multiple:表示可以多选,如果不设置本属性,那么只能单选;value:定义选择项的值;selected:表示默认已经选择本选项;
示例1如下:
Try oneTry two
示例2如下:
Default23三、表单按钮表单按钮控制表单的运作。1. 提交按钮提交按钮用来将输入的信息提交到服务器。代码如下:
属性解释如下:
type=”submit”:定义提交按钮;name:定义提交按钮的名称;value:定义按钮的显示文字;
示例如下:
2. 复位按钮
复位按钮用来重置表单。代码如下:
属性解释如下:
type=”reset”:定义复位按钮;name:定义复位按钮的名称;value:定义按钮的显示文字;
示例如下:
3. 一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
属性解释如下:
type=”button”:定义一般按钮;name:定义一般按钮的名称;value:定义一般按钮的显示文字;onClick:可以是其它事件,通过制定脚本函数来定义按钮的行为;
示例如下:
标签:
相关推荐:
最新新闻:
- 2016版word的光标怎么变粗?两种方法可使光标变粗
- 移动硬盘提示参数错误该怎么办?移动硬盘提示参数错误有方法可以解决吗?
- 如何使用VC2008运行库?VC2008运行库的用法详解及注意事项
- 笔记本电脑如何作为wifi热点?详解三种方法参考一下
- 笔记本定时开机怎么设置?笔记本定时开机设置步骤
- 运放放大器的负反馈与缓冲器 运放负反馈实例总结
- qsed文件怎么打开?qsed文件怎么转换?转换方法介绍
- Swift集成指南初始化Podfile 移动端调试工具Flipper了解一下
- 路由器怎么当交换机用?教你路由器当做交换使的连接方法
- 重点聚焦!英语语法:现在完成时形式haddone的用法介绍
- 笔记本电脑如何禁用触控板?详解禁用触控板的方法
- internet临时文件在哪里?ie临时文件文件夹位置
- 硬盘版是什么意思?硬盘版和免安装版有什么区别?
- Hosts是什么文件?Hosts文件位置及作用
- 如何用XLSTransformer生成excel文件?jxls的使用方法
- DirectX是什么?卸载DirectX的详细操作步骤
- 世界即时:bmp格式解析 Windows3.0:位图文件格式与显示设备无关
- 中国主要山脉及山峰分布 中国山脉的分布与走向介绍-当前快报
- OLT基本概念是什么?最全的OLT设备介绍
- 【全球新视野】uiso9软碟通软件安装教程 轻松制作光盘映像文件
- 【MD5】数据加密获取前端密码
- 百事通!实例检查视频是否已暂停:myVid=document
- ubuntu16.04怎么安装搜狗输入法?安装搜狗输入法流程步骤
- 《冒险岛单机版》经验是100倍?最新盛大地图及BOSS
- 东风谷早苗最新钢达姆模型(附代码)|实时
- itunes备份系统的正确修改方法——iTunes备份路径:今日热闻
- HTML表单有什么作用?HTML表单 (form) 的作用解释
- 【聚看点】MacOSX操作系统 MacOSX和iOS应用程序的设置
- 每日短讯:虚拟数字人影响力指数报告发布中新社北京分社
- 世界新动态:日本一男子拍摄大熊猫12年 出版十多册“香香”专辑
- 微软与欧盟进行重要会面:斯宾塞、吉姆·瑞恩等出席
- 修长城模拟器 《中国边疆》最新演示 预定二季度steam发售
- VR解谜续作《我觉得你会死3:机器里的齿轮》公布
- Blumhouse Productions建立游戏工作室 开发原创恐怖游戏_天天热闻
- 2399元!Minisforum发布UM773 Lite迷你主机:搭载R7 7735HS
- 仰望易四方技术平台解读 带来全新出行体验:天天看热讯
- 放羊的星星回忆杀!刘荷娜林志颖16年后晒同框合影_每日热文
- 天天新资讯:索尼2.24迎新发布会:时长45分钟、16款新作展示
- 《城市猎人》剧场版动画天使之泪预告片发布:天天速递
- 八达岭长城缆车图片_八达岭长城缆车
- 航空公司专利:一边飞行一边刺激大脑_环球信息
- 面板白菜价!TCL雷鸟75寸巨屏电视跌至2699元:每日速读
- Chrome不占内存了!快使用最新版试试
- 《地狱男爵》20年后即将重启:环球关注
- 天天新动态:PCIe4.0!金邦2T只要653元
- 暴雪公布《暗黑破坏神4》7分钟加长说明视频:热讯
- 天天播报:原Quest游戏《Nock》将于3月登陆PSVR2
- 《极限竞速:地平线5》新扩展包将于本周五公布
- 平价显示器王者 梅捷IPS大屏显示器仅需363元
- 环球快资讯丨799元高特效吃鸡显卡 预算不高的可以冲
- 天天速递!小米13廉价版将至!小米13T系列曝光
- 平价显示器王者 梅捷IPS大屏显示器仅需363元
- 学生福利!罗技神鼠G102特价99元
- 【全球新视野】《最后生还者》艾莉演员片场被误伤:眼圈都打青了
- 《如龙 维新!极》正式发售 上市预告公布|世界新要闻
- 观热点:新一期State of Play公布 含15分钟《自杀小队》演示
- 中日韩自贸区板块2月21日跌0.93%,青岛金王领跌,主力资金净流出3.17亿元_焦点要闻
- 天津:六项利好鼓励创新创业 发挥创业带动就业倍增效应
- 环球消息!男子发现亡父739万债务3年偿清 网友盛赞“真汉子”
- 七彩虹将星X15 AT游戏本性能实测:13代酷睿HX处理器联手RTX4070轻松玩转2K分辨率:最新
- XGP新增游戏阵容公开 《原子之心》《卧龙》等:环球观热点
- 天天新资讯:V社:《DOTA2》下一个更新将于3月7日揭晓
- 世界今头条!国外游戏速通活动封禁《霍格沃茨之遗》等哈利波特游戏:具体理由未给出
- 导演谈《美末》剧集过早加入第二部元素:这非常自然
- 资讯:《英雄连3》媒体评分出炉 单人战役IGN 6分
- 文明是什么,一种文明对一个种族或者是一个国家来说代表了什么,应该起什么作用?
- 魅族20上架:预约量超10万单
- 当前讯息:iOS16仍存大量Bug 大量iPhone用户怒喷
- 英国非营利组织Conservation AI在全球濒危物种威胁检测方面取得巨大飞跃
- 嵌入式冰箱的美学评价自今起有了标准答案-天天短讯
- 焦点速递!数毛社:《霍格沃茨之遗》PS5运行效果好于XSX 多方面表现碾压!
- 《使命召唤》太赚钱!索尼给了动视更多收入分成
- 当前热议!《命运2》外挂销售商须赔偿Bungie 430万美元
- vivo X Fold 2曝光:折叠屏首次出现120W快充
- 环球精选!博主称嘎子卖的手机最多999元:别用高价低配忽悠人
- 【全球新视野】《王国之泪》鬼手林克Amiibo开启预购:售价244元
- 《新蝙蝠侠2》将于今年11月开拍-环球热文
- 贾跃亭:FF 91下月量产|微资讯
- 魅族20系列上架:1元预定:全球滚动
- 每日报道:大屏电视集体降价!长虹65英寸4K电视仅需1849元
- 任天堂和马里奥不敢说话,MarioGPT可无限生成关卡
- 全球快消息!美菱2.5L电饭煲特惠82元:具有多种功能
- 衡东园区用心“纾困” 企业竞相“争春”|世界时快讯
- PSVR2到手价3999元!比官方定价便宜500元:每日快讯
- 曝腾讯计划引进Quest 2!运营模式或类似国行Switch_天天即时