表单
在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签、 表单域、表单按钮。
一 表单标签
用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
< form id="Id1" name="Name1" action = " " method = "post" > < /form>
// id不可重复//name可重复 // action=url ;用来指定处理提交表单的服务端.它可以是一个URL地址(提交给程式)或一个电子邮件地址. // method=get或post ;指明提交表单的HTTP方法 // get提交有长度限制,并且编码后的内容在地址栏可见, // post提交无长度限制,且编码后内容不可见。
二 表单元素
1、文本类
(1)文本框
< input type = " text " />
是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等
<input type="text" name="example1" size="20" maxlength="15" /> // type="text" 定义单行文本输入框 // name 定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称; // size 定义文本框的宽度,单位是单个字符宽度; // maxlength 最多输入的字符数。 // value 文本框的初始值
(2)密码框
< input type = "password" />
用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。
<input type="password" name="example3" size="20" maxlength="15">
//type="password" 定义密码框 //name 密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称; //size 密码框的宽度,单位是单个字符宽度; // maxlength 最多输入的字符数。 //value 文本框的初始值
(3)文本域
< textarea > < / textarea >
也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。
<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA> //name 定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称; //cols 定义多行文本框的宽度,单位是单个字符宽度; //rows 定义多行文本框的高度,单位是单个字符宽度; //wrap 定义输入内容大于文本域时显示的方式, 默认值是文本自动换行,而数据在被提交处理时自动换行的地方不会有换行符出现 , Off,用来避免文本换行,必须用Return才能将插入点移到下一行; //Virtual 允许文本自动换行。 //Physical 让文本换行,当数据被提交处理时换行符也将被一起提交处理。
(4)隐藏域
< input type = " hidden " / >
用来收集或发送信息的不可见元素,访问者隐藏域看不见。当表单被提交时将信息发送到服务器上。
<input type="hidden" name="ExPws" value="dd"> //type="hidden" 定义隐藏域; //name 定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称 //value 性定义隐藏域的值
2、按钮类
(1)一般按钮
< input type = " button " / >
一般按钮用来控制其他定义了处理脚本的处理工作。
<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"> //type="button" 定义一般按钮; // name 定义一般按钮的名称; // value 定义按钮的显示文字; // onClick 也可以是其它的事件,通过指定脚本函数来定义按钮的行为;
(2)提交按钮
< input type = " submit " / >
提交按钮用来将输入的信息提交到服务器。
<input type="submit" name="mySent" value="发送"> //type="submit" 定义提交按钮; //name 定义提交按钮的名称; //value 定义按钮的显示文字;
(3)重置按钮
< input type = " reset " / >
用来重置表单。
<input type="reset" name="myCancle" value="取消"> //type="reset" 定义复位按钮 //name 定义复位按钮的名称 //value 定义按钮的显示文字
(4)图片按钮
< input type = " image " / >
把图片作为提交按钮
<input type="image" src=" " / > //type="image" 定义图片按钮 //src 图片地址
disabled,使按钮失效;
enable,使可用。
3、选择类
(1)单选框
< input type = " reido " / >
访问者在单选项中选择唯一的答案.
<input type="radio" name="..." value="..." checked = "checked" > <input type="radio" name="sex" value="1" checked="checked" id=" nan " /> <label for = " nan "> 男 </ label> <input type="radio" name="sex" value="0" id=" nv " /> <label for = " nan "> 女 </ label> //点击字符“ 男 ” "女" 文字也能选中按钮 //type="radio" 定义单选框 //name 定义单选框的名称,分组 //value 定义单选框的值,给程序看的 //checked="checked" 定义默认选项
(2)复选框
< input type = "checkbox " / >
在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。
<input type="checkbox" name="..." value="..."> //例 <input type="checkbox" name="bao" id="bao1" value="b001" /> <label for="bao1">香辣鸡腿堡</label> <input type="checkbox" name="bao" id="bao2" value= "b002"/> <label for="bao2">劲脆鸡腿堡</label> <input type="checkbox" name="bao" id="bao3" value= "b003"/> <label for="bao3">深海鳕鱼堡</label> //type="checkbox" 定义复选框; //name 定义复选框的名称,分组,每一个多选分一组; //value 定义复选框的值,给程序看的
(3)下拉选择框
< select >
< option> - - - < /option>
< /select >
允许你在一个有限的空间设置多种选项
允许你在一个有限的空间设置多种选项
<select name="mySelt" size="3" multiple> <option value="1" selected></option> <option value="d2"></option> <option value="3"></option> </select> //size 定义下拉选择框的行数; //name 定义下拉选择框的名称; //multiple 表示可以多选,按Ctrl可以多选,如果不设置本属性,那么只能单选; //value 定义选择项的值; //selected 表示默认已经选择本选项。
(4)文件上传框
< inpot type ="file" / >
用户用来上传自己的文件,文件上传框看上去和其它文本域差不多,包含一个浏览按钮。访问者可以输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。
表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码;
表单的传送方式必须设置成POST。
<input type="file" name="myfile" size="15" maxlength="100"> //type="file" 定义文件上传框; //name 定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称; //size 定义文件上传框的宽度,单位是单个字符宽度; //maxlength 定义最多输入的字符数。