《Web技术基础》第4课表单

第4课表单知识回顾•超连接–a标签–XHTML字符集与颜色•多媒体–img标签–XHTML音频–XHTML动画–XHTML视频•XHTML表格前馈及作业总结•上次课提交实验复制（0分、-20分）–王硕、张世成、林欣卓。–杨佳文、王迪。–裴影、王一鹏。•较好：5、7组，4组稍晚。•问题–没交。–没有提出问题。作业问题•没有建立建点，应该在站点里进行操作。•素材不往站点里放。•ahref=#叮叮书店叮叮书店/a•照猫画虎前馈检查•表单发送数据有那些方法？各自有什么优缺点？•表单有什么作用？•表单域元素有哪些？•普通按钮与重置按钮和提交钮有什么区别？讲授内容•XHTML表单•XHTML表单操作9.1XHTML表单——表单•表单是一个包含表单域的容器。表单元素允许用户在表单中使用表单域输入信息。•一个表单可以看成有三个组成部分：表单标签、表单域和表单按钮。表单标签包含了处理表单数据所用的程序和数据提交到服务器的方法。表单域包含了文本框、密码框、多行文本框、复选框、单选框和列表框等输入元素。表单按钮主要包括提交按钮和复位按钮，用于将数据传送到服务器或者取消输入。9.1XHTML表单——form标签•form标签用于创建XHTML表单，表单用于向服务器传输数据。form标签常用属性。属性值描述actionURL当提交表单时，向何处发送表单数据methodgetpost定义如何发送表单数据9.1XHTML表单——form标签action属性•action属性定义当提交表单时，向服务器何处发送表单数据，进行处理。也就是将表单的内容提交到action指定的服务器端脚本程序进行处理。•在实例xhtml(form).html中的表单拥有两个输入字段以及一个提交按钮。当提交表单时，表单数据会提交到xhtml(form_action).html页面。9.1XHTML表单——form标签method属性•method属性规定如何发送表单数据，表单数据可以作为URL变量（method=get）或者HTTPPOST（method=post）方式发送，即POST方法和GET方法。•采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。9.1XHTML表单——form标签•采用GET方法时，浏览器会与服务器建立连接，然后将表单数据直接附在actionURL之后，通过URL在一个传输步骤中发送所有的表单数据，URL和表单数据之间用问号进行分隔。–如在百度输入关键字“XHTML”百度一下时，URL变成如下所示：=XHTML&rsv_spt=1&issp=1&rsv_bp=0&ie=utf-8&tn=baiduhome_pg&inputT=3149–关键字“XHTML”作为表单的数据是通过URL传送给百度服务器的。9.1XHTML表单——form标签•使用GET方法不能发送比较多的表单数据。URL的长度限制在8192个字符以内，如果发送的数据量太大，数据将被截断。•如果要收集用户名和密码、信用卡号或其他保密信息，POST方法会比GET方法相对安全，但POST方法发送的信息是未经加密的，容易被黑客获取。9.1XHTML表单——form标签•是选用POST方法还是GET方法发送表单数据呢？可以参考下面一些规律：–如果希望获得最佳表单传输性能，可以采用GET方法发送比较少的数据。–对有许多表单或，特别是有很长文本域的表单，应该采用POST方法来发送。–如果考虑安全性，建议选用POST方法。GET方法将表单数据直接放在URL中，可以很轻松地捕获它们，而且还可以从服务器的日志文件中进行摘录。9.2表单域•表单中常用的表单域标签。标签描述input输入域textarea多行文本域label标签fieldset分组或字段域legend分组或字段域的标题select列表option列表项optgroup列表选项组button按钮9.2表单域——input标签•input标签用于输入信息，根据不同的type值，input有很多种形式，input标签常用的属性。属性值描述acceptmime_type文件上传提交的文件类型alttext图像的替换文本checkedcheckedinput元素首次加载时被选中disableddisabledinput元素加载时禁用此元素maxlengthnumber输入字符的最大长度namefield_nameinput元素名称readonlyreadonly输入字段为只读sizenumber_of_char输入字段的宽度srcURL以提交按钮形式显示的图像URLtype见表9.4input元素类型valuevalueinput元素的值。9.2表单域——input标签type属性•type属性规定input元素的类型。input标签type属性值。值描述button按钮checkbox复选框file文件域，包括输入字段和“浏览”按钮，供文件上传hidden隐藏域image图像形式的提交按钮password密码域，字符被掩码radio单选按钮reset重置按钮。重置按钮会清除表单中的所有数据submit提交按钮。提交按钮会把表单数据发送到服务器text单行文本框。默认宽度为20个字符9.2表单域——input标签•text–inputtype=text/定义单行文本框，文本框的默认宽度是20个字符。•password–inputtype=password/定义密码域，密码域中的字符会被掩码（显示为星号或原点）•radio–inputtype=radio/定义单选按钮，单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。9.2表单域——input标签•checkbox–inputtype=checkbox/定义复选框，复选框允许用户在一定数目的选择项中不选、选取一个或多个。•hidden–inputtype=hidden/定义隐藏域，隐藏域对于用户是不可见的，隐藏域通常会存储一个默认值。•file–inputtype=file/定义文件域，用于文件上传时选择文件。9.2表单域——input标签•image–inputtype=image/定义图像形式的提交按钮，必须把src属性和alt属性与inputtype=image结合使用。•button–inputtype=button/定义按钮，单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序，响应用户。如：inputtype=buttonvalue=单击我onclick=alert('为什么?')name=button/9.2表单域——input标签•reset–inputtype=reset/定义重置按钮，重置按钮会清除表单中的所有数据。•submit–inputtype=submit/定义提交按钮，提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。•实例xhtml(form_input).html。9.2表单域——input标签value属性•value属性为input元素设定值。对于不同的输入类型，value属性值含义不同：–如果type类型是button、reset和submit，value定义按钮上显示的文本。–如果type类型是text、password和hidden，value定义域的初始值。–如果type类型是checkbox、radio、image，value定义与输入相关联的值。•单选按钮和复选框必须设置value属性，文件域不能使用value属性。9.2表单域——input标签accept属性•accept属性只能与inputtype=file配合使用，规定通过文件上传提交的文件类型，属性值是MIME列表中定义的。避免使用该属性，最好在在服务器端验证文件上传的类型。如下面代码中文件上传的类型可以接受GIF和JPEG两种图像：inputtype=filename=picid=picaccept=image/gif,image/jpeg/9.2表单域——textarea标签•textarea标签定义多行文本区域，文本区域中可容纳无限数量文本。textarea标签常用属性。属性值描述colsnumber多行文本区域可见列数rowsnumber多行文本区域可见行数wrapwrapvirtualphysical换行模式disableddisabled禁用该文本区域namename_of_textarea文本区域的名称readonlyreadonly规定文本区域为只读9.2表单域——textarea标签cols和rows属性•可以通过cols和rows属性来规定textarea的大小，如下面的代码将textarea区域设为5行40列。textarearows=5cols=40在Web技术基础课程里，你可以学习你所需要的知识。/textarea9.2表单域——textarea标签wrap属性•wrap属性设置多行文本域的换行模式。通常情况下，当用户在文本区域中输入文本后，只有在按Enter键的地方才生成换行。•如果希望启动自动换行功能，将wrap属性设置为virtual或physical，当用户输入的一行文本长于文本区域的宽度时，浏览器会自动将多余的文字挪到下一行。9.2表单域——textarea标签•wrap=virtual实现文本区内的自动换行，但在传输给服务器时，文本只在用户按Enter键的地方进行换行，其他地方没有换行的效果。•wrap=physical实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。9.2表单域——textarea标签•以下面60个字符的文本输入到一个40个字符宽的文本区域内为例：wordwrappingisafeaturethatmakeslifeeasierforusers.–如果设置为wrap=virtual，文本区会包含两行文本，并在单词makes后面换行，但是只有一行文本被传送到服务器。–如果设置为wrap=physical，文本区会包含两行文本，并在单词makes后面换行，这时发送给服务器两行文本，单词makes后有新的换行字符将分隔这两行文本。9.2表单域——label标签•label标签为input元素定义标注。label标签的for属性可把label绑定到元素id值和for属性值相同的元素上，这样在label元素内单击文本，浏览器自动将焦点转移到和label绑定的元素上。•在实例xhtml(form_input).html中的性别单选按钮实现了这样绑定。inputtype=radioname=sexvalue=男id=nan/labelfor=nan男/label9.2表单域——fieldset标签•fieldset可将表单内的相关元素分组，当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界和3D效果。•legend标签为fieldset定义分组标题•实例xhtml(form_fieldset).html演示了fieldset用法。fieldsetlegend健康信息/legendlabel身高：inputtype=text//labellabel体重：inputtype=text//label/fieldset9.2表单域——fieldset标签•select可创建单选或多选列表，当提交表单时，浏览器会提交选定的