表格标签和表单标签(下)

表格标签和表单标签（下）二、表单1.表单的作用表单在网页中主要负责数据采集功能，是网站管理者与浏览者之间沟通的桥梁。

2.表单的组成一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上或者取消输入。

3.表单页面的实现第一步：先写一对form标签及其它的标签属性。

<form action=“表单提交地址”method=“post/get”>这里面包含了所有的表单控件</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：文本框公司名称：<input type=”text” name=”username”/>b)、text：文本框并带有默认值的.公司网站：<input type=”text” name=”url” value=””/>c)、password:密码框登录密码：<input type=”password” name=”pwd“/>d)、radio:单选按钮,但注意radio按钮的name要设置成一样的，要不每个按钮都能选中了。

另外单选按钮还有一个设置选中属性，就是checked属性，属性值也是checked,也可以不写。

性别:<input type="radio" name="sex" value="男"checked="checked"/>男<input type="radio" name="sex" value="女" />女e)、checkbox：复选按钮，但注意checkbox按钮的name也要设置成一样的。

另外复选按钮还有一个设置选中属性，就是checked属性，属性值也是checked,也可以不写。

申请产品:<input type="checkbox" name="type" value="实木" />实木<input type="checkbox" name="type" value="沙发"checked="checked"/>沙发<input type="checkbox" name="type" value="办公" />f)、file:上传文件域联系人证件:<input type="file" name="file" />g)、select:下拉框，但是注意，select里有一个option常和select一起使用，表示下拉选项，另外option还有一个selected属性，表示选中，属性值也为selected.如果没有写这个属性，默认选中第一项。

密码查询问题:<select name="problem"><option value="">请选择查询问题</option><option value="1">你的毕业院校</option><option value="2">你居住的城市</option><option value="3">你的职业</option></select>密码查询问题:<select name="problem"><option value="">请选择查询问题</option><option value="1">你的毕业院校</option><option value="2" selected="selected">你居住的城市</option> <option value="3">你的职业</option></select>h)、textarea:多行文本域，可以输入多行文本的，有两个属性分别是Cols属性：定义文本域的宽度rows属性：定义文本域的高度。

备注:<textarea rows="6" cols="30"></textarea>i)、submit:提交按钮，使用submit可以将当前页面的数据提交到action的提交地址，reset:重置按钮，可以让当前页面的数据重新恢复到初始状态。

<input type="submit" value="提交" /><input type="reset" value="取消" />j)、button:普通按钮不具有提交和重置的作用，以后可以结合javascript让其具有相关功能。

k)、hidden:隐藏域，在页面中没有任何效果，但是他可以传递数据。

<input type="hidden" />好了，我们每个元素都讲完了，我们总结一下：输入标签：<input type=“值”value=“” name=“”/> 值：text 单行文本框，只能输入一行文本password 密码框radio 单选框checkbox 复选框file 文件域submit 提交按钮reset 重置按钮button 普通按钮（一般按钮）表单元素属性介绍:value:指的是表单元素的值。

文本框密码框单选框复选框提交按钮上传文件域重置按钮文本域下拉列表框<form action="#" method="get">公司名称:<input type="text" name="name" maxlength="16" /><br>公司网站:<input type="text" name="url" /><br>登录密码:<input type="password" name="pwd" /><br>性别:<input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女" />女<br>申请产品:<input type="checkbox" name="type" value="实木" />实木<input type="checkbox" name="type" value="沙发"checked="checked"/>沙发<input type="checkbox" name="type" value="办公" />办公<br>联系人证件:<input type="file" name="file" /><br>密码查询问题：<select name="problem"><option value="">请选择查询问题</option><option value="1">你的毕业院校</option><option value="2">你居住的城市</option></select><br>备注：<textarea rows="6" cols="30"></textarea><br><input type="submit" value="提交" /><input type="reset" value="取消" /></form>页面效果大家看到上面的效果在浏览器中显示的不是很好看，所以我们一般写表单的时候还是放到表格里，就整齐，美观。