HTML表单

　　表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.　　表单用form标签来定义,form表单只要有以下几个属性:　　　　name--用来标识这个表单,在javascript中可以通过 document.表单名 来取得这个表单　　　　action--浏览者输入的数据被传送到的地方.　　　　method--表示提交方式,可以选择post和get,默认为get方式.两种方式的区别:　　　　post--所有提交的参数都会隐藏,没有参数的大小限制,建议使用该方式　　　　get--所有提交参数都会在地址栏显示,参数总量最大4-5K.不建议使用　　　　enctype--表示表单的封装方式,只有在进行文件上传时才会使用,当执行文件上传时,必须将这个值设置为 enctype="multipart/form-data"　　　　onsubmit--当表单提交时自动执行的javascript事件,一般在需要进行提交验证时使用.　　input标签　　input标签代表html表单的单行输入域,input标签分为3种类型　　　　1.输入型--包括text,password,file.　　　　2.选择型--包括checkbox和radio　　　　3.点击型--包括button,image,sbumit,reset.　　其中除了name属性是必选的以外，其他属性都是可选的。这些属性的功能和用法介绍如下：　　　　name--该属性用于指定保存用户输入文本的变量和名称　　　　title--该属性用于input元素的标签，通常是位于输入框前的提示信息。　　　　type--用于指定文本输入区的类型.　　　　　　　　value--该属性用于指定name属性所定义变量的值，它将显示在输入框中。　　　　default--该属性用于指定name属性所定义变量的默认值。　　　　format--该属性用于格式化输入的数据。　　　　maxlength--该属性用于指定用户可输入字符串的最大长度。该属性的上限为256，最多不能超过256个字符。　　　　emptyok--用于指定用户是否可以不在输入框内输入内容。　　　　size--该属性用于指定输入框的宽度，宽度值为字符个数。　　　　tabindex--用于指定多个输入框存在时，类似于HTML中Tab键的具体位置。　　　示例:　　　　<input name="variable" title="label" type="type" value="value" default="default" format="specifier" emptyok="false|true" size="n" maxlength="n" tabindex="n"/>　　input标签的type属性值有以下几种:　　　　text -- 文字输入域(输入型)　　　　password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)　　　　file -- 可以输入一个文件路径(输入型)　　　　checkbox -- 复选框.可以选择零个或多个(选择型)　　　　radio -- 单选框.只可以选择一个而且必须选择一个(选择型)　　　　hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器　　　　button -- 按钮(点击型)　　　　image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)　　　　submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)　　　　reset -- 重置按钮,可以把表单中的信息清空(点击型)　　input标签的checked属性　　checked是使选择型输入域或者框被选中.如:<input type="checkbox" id="11" name="22" checked="checked" />　　input标签的disabled属性　　disabled属性是禁止对输入域进行操作.<input type="checkbox" id="11" name="22" disabled="disabled" />　　input标签的disabled属性　　readonly属性表示只读(只能看到,不能修改)的输入域(框).<input type="checkbox" id="11" name="22" readonly="readonly" />　　textarea标签　　textarea标签代表html表单的多行输入域.有以下属性:　　　　cols--多行输入域的列数　　　　rows--多行输入域的行数　　　　accesskey--表单的快捷键访问方式　　　　disabled--输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用　　　　readonly--输入域可以选择,但是无法修改　　　　tabindex--输入域,使用"tab"键的遍历顺序　　　　如:<textarea cols="50" rows="10" id="jianyi" name="jianyi">默认值,可有可无</textarea>　　select标签　　select标签可创建单选或多选菜单.主要属性有以下几种　　size -- 选择域的高度　　multiple -- 可以有多个选择　　disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用　　tabindex -- 使用"tab"键的遍历顺序　　name --规定下拉列表的名称。　　示例:　　　　<select size="1" id="select" name="select">　　　　 <option>北京市</option>　　　　 <option>上海市</option>　　　　 <option>天津市</option>　　　　 <option>重庆市</option>　　　　</select>　　select标签下的option标签　　代表选择列表的一个选择项,属性如下:　　label -- 说明选择项　　value -- 说明选择项的值　　selected -- 此选择项已经被选择　　disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用　　tabindex -- 使用"tab"键的遍历顺序　　select标签下的optgroup标签　　optgroup标签代表分组选择项的类别名(此类别名不能选择),有个label属性,是选择项的标题,对选择项进行说明.　　

示例:

　　<select id="WebDesign" name="WebDesign">　　 <optgroup label="client">　　 <option value="HTML">HTML</option>　　 <option value="CSS">CSS</option>　　 <option value="javascript">javascript</option>　　 </optgroup>　　 <optgroup label="server">　　 <option value="PHP">PHP</option>　　 <option value="ASP">ASP</option>　　 <option value="JSP">JSP</option>　　 </optgroup>　　<optgroup label="database">　　 <option value="Access">Access</option>　　<option value="MySQL">MySQL</option>　　 <option value="SQLServer">SQLServer</option>　　 </optgroup>　　</select>　　label标签　　label标签是为 input 元素定义标注.　　label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。　　<label> 标签的 for 属性应当与相关元素的 id 属性相同。　　示例:　　<form>　　<label for="name">姓名</label>　　<input type="text" id="name" />　　　</form>　　fieldset和legend标签　　fieldset 标签--对表单进行分组　　legend 标签 -- 对表单的每组内容进行说明　　表单综合示例:　　 <form id="xinxi" action="chuli.php" method="post"><p><fieldset><legend>姓名密码单行输入</legend><label for="name">姓名:<input type="text" id="name"/></label><label for="password">密码:<input type="password" id="password"/></label><label for="guoji">国籍:<input type="text" id="guoji" value="中国" readonly="readonly" /></label></fieldset></p><p><fieldset><legend>性别单选</legend><label for="nan">男:<input type="radio" name="sex" id="nan"/></label><label for="nv">女:<input type="radio" name="sex" id="nv"/></label><label for="baomi">保密:<input type="radio" name="sex" id="baomi"/></label></fieldset></p><p><fieldset><legend>爱好多选</legend><label for="xuexi">学习<input type="checkbox" name="aihao" id="xuexi" checked="checked" /></label><label for="lvyou">旅游<input type="checkbox" name="aihao" id="lvyou" /></label><label for="diaoyu">钓鱼<input type="checkbox" name="aihao" id="diaoyu" /></label><label for="zuguo">祖国<input type="checkbox" name="aihao" id="zuguo" checked="checked" disabled="disabled" /></label></fieldset></p><p><fieldset><legend>单行单选下拉列表</legend><label for="shengfen">选择省份</label><select size="1" name="xuanze" id="shengfen"><option value="1">山东省</option><option value="2">河北省</option><option value="3" selected="selected">江苏省</option><option value="4">浙江省</option><option value="5">安徽省</option><option value="6">湖南省</option></select></fieldset></p><p><fieldset><legend>多行单选或ctrl单击多选下拉列表</legend><label for="chengshi">选择城市</label><select size="5" name="xuanze" multiple="multiple" id="chengshi"><option value="1">济南市</option><option value="2">石家庄市</option><option value="3" selected="selected">南京市</option><option value="4">杭州市</option><option value="5">合肥市</option><option value="6">长沙市</option></select></fieldset></p><p><fieldset><legend>分组单选下拉列表</legend><label for="fenzu"></label><select size="1" name="xuanze" id="fenzu"><optgroup label="山东省"><option value="jinan">济南市</option><option value="qingdao">青岛市</option><option value="yantai">烟台市</option><option value="weihai">威海市</option></optgroup><optgroup label="河南省"><option value="zhengzhou">郑州市</option><option value="kaifeng">开封市</option><option value="luoyang">洛阳市</option><option value="xinyang">信阳市</option></optgroup><optgroup label="湖南省"><option value="changsha">长沙市</option><option value="xiangtan">湘潭市</option><option value="yueyang">岳阳市</option><option value="huaihua">怀化市</option></optgroup><optgroup label="四川省"><option value="chengdu">成都市</option><option value="mianyang">绵阳市</option><option value="yibin">宜宾市</option><option value="leshan">乐山市</option></optgroup></select></fieldset></p><p><fieldset><legend>文件上传以及留言文字域</legend><label for="wenjian">上传文件:<input type="file" name="shangchuan" id="wenjian" size="35" maxlength="255" /></label><br /><br /><label for="">留言<br /><textarea cols="50" rows="10">默认留言,可有可无</textarea></label></fieldset></p><p><fieldset><legend>按钮</legend><input type="submit" value="提交" name="anniu" id="tijiao" /><input type="reset" value="重写" name="anniu" id="chongxie" /><input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" title="这是图像按钮" /><input type="button" value="普通按钮" name="anniu" id="anniu" /></fieldset></p></form>