HTML-表单课件

表单将我们的信息提交给服务器-表单“表单”是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。是客户端与服务器端进行信息交流的途径一个完整的表单通常由表单控件（表单元素），提示信息，表单域（容纳表单控件和提示信息）三部分构成表单域（相当于一个容器）提示信息表单控件（包含了具体的表单功能项）要想让表单的数据传送给后台服务器，就必须定义表单域。form/form用于定义表单域，即创建一个表单。实现用户信息的收集和传递，form/form中的所有内容都会被提交给服务器。注意：form标记的属性不会直接影响表单的显示效果。要想让一个表单有意义，必须在form与/form之间添加相应控件。表单基本结构formaction=urlmethod=GET|POST表单内容：文本框、单选钮、选择框、输入成段文字、发送、复位按钮......inputtype=submit提交按钮inputtype=reset复位按钮/form表单标记再次强调：表单元素必须入在form标记内才有作用。表单属性：formaction=url(传送目标，处理表单信息的服务器端应用程序)method=处理表单数据的方法(POST/GET)如果不写method则默认提交方式为getname=表单名称表单元素/formPOST方法可以传递大量信息GET方法将值附加到请求该页的URL中。适合传递少量信息(默认方式)1、单行文本框(文本域)inputname=“文本框名称”type=“text”value=“初始值”size=“显示字符数”maxlength=“最多容纳字符数”readonly=”readonly”(设置为只读)disabled=“disabled”（设置为不可操作）表单元素标记2、密码框inputname=“文本框名称”type=“password”value=“初始值”size=“显示字符数”/注意：input标记必须的属性是name和type3、单选框inputname=“单选框名称”type=“radio”value=“提交值”checked=”checked”(是否被选中)/4、复选框inputname=“复选框名称”type=“checkbox”value=“提交值”checked=”checked”(是否被选中)表单元素标记label标注内容/label标签为input元素定义标注（标记）。label标签的for属性应当与相关元素的id属性相同labelfor=man男/labelinputtype=radioname=sexvalue=男id=man表单元素标记5、多行文本框textareaname=“多行文本框名称”cols=“每行中的字符数”rows=“显示的行数”初始内容/textarea表单元素标记6、列表框(A)、菜单式selectname=“列表框名称”optionselected=“selected”(哪个为初始选择，就添加selected语句[只有一个])value=“提交值”列表1/optionoptionvalue=“提交值”列表2/option.../select分组optgrouplabel=分组名称/optgroup表单元素标记例如：selectname=“citys”optgrouplabel=北京optionvalue=朝阳selected=“selected”朝阳/optionoptionvalue=海淀海淀/optionoptionvalue=东城东城/option/optgroup/select表单元素标记(B)、列表式selectname=“列表框名称”size=“显示的行数”multiple(如果允许多选，则有该命令；否则没有此命令)optionvalue=“提交值”列表1/option.../select表单元素标记例如：selectname=targetsize=3multiple=“multiple”optionvalue=普通朋友普通朋友/optionoptionvalue=爱人selected爱人/option/select7、按钮inputtype=“按钮类型(reset[重置表单]、submit[提交表单]、button[普通按钮])”name=“按钮名称”value=“按钮显示文本”/8、图片按钮inputname=图片按钮名称type=imagesrc=图片路径/表单元素标记9、隐藏域inputname=“名称”type=“hidden”value=“提交值”/fieldset/fieldset标记用于为表单内容分组，它有一个配套标记legend/legend,用于为各个表单组定义名称。总结所有的表单元素，必须放在form/form标记中formaction=“URL”method=“表单的提交方式post/get”….../formPost方法可以传递大量信息（主流）Get方法将值附加到请求该页的URL中，适合传递少量信息（默认）表单的元素input标签必须含有name属性和type属性1.文本框：inputtype=textname=“”/2.密码框：inputtype=passwordname=“”/3.单选框:inputtype=radioname=value=/4.多选框：inputtype=checkboxname=value=/5.上传文件：inputtype=filename=pic/6.下拉列表：selectname=optionvalue=/option/select分组的下拉列表：selectname=optgrouplabel=分组名称/optgroupoptionvalue=/optionoptionvalue=/option/select7.多行文本：textarearows=cols=/textarea8.按钮1.提交按钮inputtype=submitvalue=/2.重置按钮inputtype=resetvalue=/3.普通按钮inputtype=buttonvalue=/4.图片按钮inputtype=imagesrc=/注意：图片按钮的功能相当于提交按钮p留言：ptextareaname=Memorows=4cols=60/textareapinputtype=submitvalue=提交inputtype=resetvalue=清空formaction=Echo64.aspmethod=POST%name=Request(Name)IfRequest(sex)=maleThenappellation=先生Elseappellation=小姐EndIfcity=Request(City)loves=Request(love)Memo=Request(Memo)Memo=Replace(Memo,vbCrLf,BR)%HTMLBODYFONTface=华文楷体color=#990033SIZE=5CENTER%=name&appellation&：欢迎您!“%brp您是%=city%人br/CENTERp您喜欢的是：UL%=loves%/UL您的留言是：brp%=Memo%/FONT/BODY/HTML文件Echo64.aspASP文件包括文本、HTML标记、ASP脚本语句（用%%界定符标记）。name=Request(Name)IfRequest(sex)=maleThenappellation=先生Elseappellation=小姐EndIfcity=Request(City)loves=Request(love)Memo=Request(Memo)HTMLBODYFONTface=华文楷体color=#990033SIZE=5CENTER%=name&appellation&：欢迎您!%brp您是%=city%人br/CENTERp您喜欢的是：UL%=loves%/UL您的留言是：brp%=Memo%/FONT/BODY/HTMLName=林琳；appellation=小姐；city=北京；loves=体育，音乐，电影Memo=你们好！在哪儿能看到免费电影？