表格标签和表单标签(下)_第1页
表格标签和表单标签(下)_第2页
表格标签和表单标签(下)_第3页
表格标签和表单标签(下)_第4页
表格标签和表单标签(下)_第5页
已阅读5页,还剩7页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

育知同创官网:表格标签和表单标签(下)二、 表单1. 表单的作用表单在网页中主要负责数据采集功能,是网站管理者与浏览者之间沟通的桥梁。2. 表单的组成一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上或者取消输入。3. 表单页面的实现第一步:先写一对form标签及其它的标签属性。 这里面包含了所有的表单控件 Action: 向何处发送表单数据,一般指的是后台程序。Method: 规定如何发送表单数据。有两种方式(get与post)get与post的区别是:a) get是从服务器上获取数据,post是向服务器传送数据。b) get是把参数数据队列加到提交表单的action属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML header内一起传送到action属性所指的URL地址。用户看不到这个过程。c) 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。d) get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。e) get安全性非常低,post安全性较高。但是执行效率却比Post方法好。建议: get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式; 在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;第二步:输入表单元素,值得注意的是每个表单元素都有一个name属性。但这个属性可写可不写。a)、text:文本框公司名称:b)、text:文本框并带有默认值的.公司网站:c)、password:密码框登录密码:d)、radio:单选按钮,但注意radio按钮的name要设置成一样的,要不每个按钮都能选中了。另外单选按钮还有一个设置选中属性,就是checked属性,属性值也是checked,也可以不写。性别:男女e)、checkbox:复选按钮,但注意checkbox按钮的name也要设置成一样的。另外复选按钮还有一个设置选中属性,就是checked属性,属性值也是checked,也可以不写。申请产品:实木 沙发 f) 、file:上传文件域联系人证件:g) 、select:下拉框,但是注意,select里有一个option常和select一起使用,表示下拉选项,另外option还有一个selected属性,表示选中,属性值也为selected.如果没有写这个属性,默认选中第一项。密码查询问题:请选择查询问题你的毕业院校你居住的城市你的职业密码查询问题:请选择查询问题你的毕业院校你居住的城市你的职业h) 、textarea:多行文本域,可以输入多行文本的,有两个属性分别是Cols属性:定义文本域的宽度rows属性:定义文本域的高度。备注:i) 、submit:提交按钮,使用submit可以将当前页面的数据提交到action的提交地址,reset:重置按钮,可以让当前页面的数据重新恢复到初始状态。j)、button:普通按钮 不具有提交和重置的作用,以后可以结合javascript让其具有相关功能。k)、hidden:隐藏域,在页面中没有任何效果,但是他可以传递数据。好了,我们每个元素都讲完了,我们总结一下: 文本框密码框单选框复选框提交按钮上传文件域重置按钮文本域下拉列表框输入标签: 值:text 单行文本框,只能输入一行文本 password 密码框 radio 单选框 checkbox 复选框 file 文件域 submit 提交按钮 reset 重置按钮 button 普通按钮(一般按钮)表单元素属性介绍:value:指的是表单元素的值。name:是给每个表单元素取一个名字,方便找到他将他的值传递到后台程序进而提交到数据库。checked:复选框和单选按钮的属性,表示选中。selected:下拉框表示选中的属性。maxlength:表示输入的最大长度。readonly:表示只读形式。代码:公司名称:公司网站:登录密码:性别:男 女申请产品:实木 沙发办公联系人证件:密码查询问题:请选择查询问题你的毕业院校你居住的城市备注:页面效果大家看到上面的效果在浏览器中显示的不是很好看,所以我们一般写表单的时候还是放到表格里,就整齐,美观。但是需要注意的是table需要放在form里面,而不是table里面放form.代码:公司名称: 公司网站: 登录密码: 性别: 男女 申请产品: 实木沙发办公联系人证件: 密码查询问题: 请选择查询问题你的毕业院校你居住的城市备注:  页面效果以下这些是HTML4.0中的表单元素,在以后我们还会学一下HTML5新增的表单元素及属性。好了,所有的常用标签我们都学完了,其实标签是有分类的,我们来总结一下标签的分类及嵌套规则。三、 元素的表现分类及特点及嵌套规则到目前为止常用的一些标签讲了大部分了,还有些HTML5新增的一些标签放到后面去讲。那我们的标签有是分类的,我们看一下标签的表现分类,标签的分类分以下三种: 块级元素block; 内联元素inline; 内联块inline-block; 块级有那些呢?我们总结一下:div table h1-h6 p form ul ol li dl dt dd行内元素有那些呢?总结如下:a span strong b i em 行内块级元素有那些?总结如下:img input select那下面来看一下块级元素的特点:1、独占一行,默认情况下,其宽度自动填满其父元素宽度2、可以设置宽和高,设置了宽度还是独占一行 3、可以设置margin和padding属性 4、对应的相关display属性:block5、可以互相转换display:inline变成行内元素 6、可以嵌套块级元素及行内元素 再来看一下行内元素的特点:1、不会独占一行,相邻行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化 2、不可以设置宽和高,设置了宽度不是独占一行 3、水平方向的内外都产生边距效果但竖直方向的内外边距却不会产生边距效果 4、对应的相关display属性:inline 5、可以互相转换display:block变成行块级元素 6、不可以嵌套块级元素 我们都知道页面中的元素都不是独立存在,都是互相嵌套的,那嵌套规则是什么呢?1、不能交叉嵌套 2、块级元素嵌套行内元素或者

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论