《HTML5 CSS3 JavaScript第5章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第5章ppt课件.pptx（64页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML5 CSS3 JavaScript第5章教学课件第第5章章表表单与表与表单效果效果设计5.1 添加表表单5.2 表单标签5.3 美化美化表单了解表单各各标签与属性属性掌握标签的typetype属性属性值及含义掌握表表单的基本使用的基本使用引言进入一个新的网站后，用户通常需要进行注册或登录验证，这就需要使用到表单。网站中的用户登录、注册页面，以及一些收集用户反馈信息的调查表，就是通过表单制作的。表单作为用户与网页之间重要的交互工具，了解和掌握表单的应用是十分重要的。5.1添加表添加表单表单概述案例用户登录表单标签标签5.1 添加表单5.1.1 表单概述表单是网页中常用的一种展示效果，如登
2、录页面中的用户名和密码的输入、登录按钮等都是用表单的相关标签定义的。表单是HTML中获取用户输入的手段，它的主要功能是收集用户的信息，并将这些信息传递给后台服务器，实现用户与Web服务器的交互。HTML中，一个完整的表单通常由表单元素、提示信息和表单域3个部分组成，下面将详细介绍这3个部分。表单元素：包含表单的具体功能项，如文本输入框、下拉列表框、复选框、密码输入框、登录按钮等。提示信息：表单中通常还需包含一些说明性的文字，提示用户要进行的操作。表单域：用来容纳表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果未定义表单域，表单中的数据就无法传
3、送到后台服务器。5.1 添加表单5.1.1 表单概述表单元素是表单的核心，常用的表单元素如表所示。表表单元素元素含含义表单输入框,可定义多种控件类型,例如text（单行文本框）、password（密码文本框）、radio（单选框）、checkbox（复选框）、button（按钮）、submit（提交按钮）、reset（重置按钮）、hidden（隐藏域）、image（图像域）、file（文件域）等定义一个下拉列表（必须包含列表项）定义多行文本框定义表单辅助项5.1 添加表单5.1.2 标签为了实现用户与Web服务器的交互，需要让表单中的数据传送给服务器，这就必须定义表单域。定义表单域与标签定义表
4、格类似，HTML中标签用于定义表单域，即创建一个表单，用来实现用户信息的收集和传递，标签中的所有内容都会提交给服务器。表单元素和提示信息语法格式标签的语法格式如下。5.1 添加表单5.1.2 标签action属性可定义表单数据的提交地址，即一个URL地址。HTML表单要想和服务器进行连接，就需要在action属性上设置一个URL。例如，两个人要打电话就必须要知道对方的电话号码，URL就相当于电话号码。action属性用于指定接收并处理表单数据的服务器的URL地址。标签属性1.action属性5.1 添加表单5.1.2 标签method属性规定如何发送表单数据（表单数据发送到action属性所规
5、定的页面）。表单数据有常用的get（默认）和post两种提交方式，表单数据可以作为URL变量（method=get）或者HTTP post（method=post）的方式来发送。使用get提交方式传输数据的效果如图所示。标签属性2.method属性5.1 添加表单5.1.2 标签一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据，可以在标签的method属性中指明表单处理服务器要使用get方式还是post方式来处理数据。get方式与post方式的区别如表所示。标签属性2.method属性getget方式方式postpost方式方式传输方式方式通过地址栏传
6、输通过报文传输传送送长度度参数有长度限制（受限于URL长度）参数无长度限制数据包数据包产生1个TCP数据包产生2个TCP数据包信息安全度信息安全度参数会直接暴露在URL中，信息安全度不高，不能用来传递敏感信息信息安全度相对较好两种方式都是向服务器提交数据，并从服务器获取数据5.1 添加表单5.1.2 标签enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。enctype属性可取值为application/x-www-form-urlencoded、multipart/form-data和text/plain，其属性值的具体说明如表所示。标签属性3.enctype属性属性属性值说
7、明明application/x-www-form-urlencoded在发送到服务器之前，所有字符都会进行编码（空格转换为+加号，特殊符号转换为ASCII HEX值）multipart/form-data不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。text/plain空格转换为+加号，但不对特殊字符编码5.1 添加表单5.1.2 标签target属性定义提交地址的打开方式，常用的打开方式有_self（默认）和_blank。_self可在当前也打开，_blank可在新页面打开，标签中的target属性与标签中的target属性样，这里不再赘述。标签属性4.target属性5.1
8、添加表单5.1.3 标签标签用于搜集用户信息，是一个单标签。网页中经常会包含有单行文本框、密码文本框、单选框、提交按钮等，要想定义这些表单元素就需要使用标签。语法格式标签的语法格式如下。5.1 添加表单5.1.3 标签标签通过type属性的取值不同，可以展现出不同的表单控件类型，如text单行文本框、password密码文本框、submit重置按钮等。在网页中收集用户信息时，部分信息通常会有严格地限制，不能由用户自行输入而只能进行选择，这就需要使用到radio单选框或checkbox复选框。表单控件说明如表所示。type属性属性属性值说明明text单行文本框。可以输入任何类型的文本，如文字、数
9、字等，输入的内容以单行显示。例password密码文本框。定义密码字段，该字段中的字符被掩码。例button普通按钮。定义可点击的按钮。例submit提交按钮。提交按钮会把表单数据发送到服务器。例5.1 添加表单5.1.3 标签续表。type属性属性属性值说明明reset重置按钮。重置按钮会清除表单中的所有数据。例radio单选框。多个name属性值相同的单选框控件可组合在一起，让用户进行选择，单选框只能选择1个选项，不能多选。例checkbox复选框。多个name属性值相同的复选框控件可组合在一起，让用户进行选择，复选框允许选择多个选项。值得注意的是，一组单选框或复选框中，name属性值必须
10、相同。例hidden隐藏域。可用于隐藏往后台服务器发送的一些数据，如正在被请求或编辑的内容的ID名。隐藏域是一种不影响页面布局的表单控件。值得注意的是，尽量不要将重要信息上传至隐藏域，避免信息泄露。例file文本域。可用于上传文件，用户可以选择1个或多个元素以提交表单的方式上传到服务器上，如文档文件上传和图片文件上传。例值得注意的是，使用文件域时，标签的method属性值必须设置成post，enctype属性值必须设置成multipart/form-data。5.1 添加表单5.1.3 标签文件域不仅支持元素共享的公共属性，还支持自身的一些特定属性，如accept、capture、multip
11、le和files。文件域的特定属性具体说明如表所示。type属性属性属性说明明accept文件域允许接受的文件类型，多种文件类型以逗号（,）为分隔capture捕获图像或视频数据的源multiple允许用户选择多个文件filesFileList列出已选择的文件5.1 添加表单5.1.3 标签标签除了type属性之外，还有一些常用属性，如name属性、placeholder属性、disabled属性、readonly属性、checked属性等。标签其他常用属性的说明如表所示。其他常用属性属性属性说明明name规定元素的名称，提交给服务器端。name属性值通常与value属性值配合成一对使用，后台
12、服务器可通过name值找到对应的value值value规定元素的值，提交给服务器端placeholder输入框提示文本readonly定义元素内容为只读（不能修改编辑）disabled禁用。定义该元素不可用（显示为灰色），提交表单时不会被提交给服务器5.1 添加表单5.1.3 标签续表。其他常用属性属性属性说明明checked默认选择项。定义选择元素被默认选中的项，适用于单选框和多选框required必填项。提交时写有该属性的标签没有填写内容，则会提示此为必填项size宽度。设置输入框的宽度maxlength最大长度。设置输入框的最大长度5.1 添加表单5.1.3 标签标签是定义元素的标记，可
13、用来辅助表单元素，更好地提高用户体验感。当用户选择标签内的文本进行单击时，会自动将焦点转到和标签相关的表单控件上。标签中的for属性指出当前文本标签与哪个元素关联，其属性值一定要与标签中的id属性值相同才能找到相应控件。标签5.1 添加表单5.1.3 标签创建一个基本的表单，在表单域中添加一个单行文本框、密码框、单选框和提交按钮控件。演示说明!-!-添加表添加表单域，并在域，并在标签中添加相关属性中添加相关属性-!-姓名：姓名：!-密码：!-!-性别：男女!-主体代码 例5.15.1 添加表单5.1.3 标签创建一个基本的表单，在表单域中添加一个单行文本框、密码框、单选框和提交按钮控件。表单的
14、运行效果如图。演示说明由于单行文本框和密码框设置required属性，为必填项，当密码框未填写内容时，单击提交按钮控件，会出现提示文字要求必须填写内容，此时数据不会传输至服务器。5.1 添加表单5.1.4 案例-用户登录表单本实例是一个用户登录表单页面。该页面由标签中的文本框、密码框和提交按钮控件，以及块元素、无序列表、超链接、图像标签、段落标签和内联元素构成，登录页面结构简图如图所示。!-密密码登登录span|class=line|验证码登登录!-!-inputtype=textname=userplaceholder=inputtype=passwordname=pass代码实现5.1 添
15、加表单5.1.4 案例-用户登录表单主体代码 例5.2!-登录即同意用户协议、隐私政策!-!-立即注册立即注册忘忘记密密码!-5.1 添加表单5.1.4 案例-用户登录表单代码实现在上述主体代码中，为页面的3个部分分别添加内容。页面头部为登录方式提示，在块元素中嵌套无序列表，2个列表项目中各有1个超链接。页面主体部分分为4个子模块，表单部分有1个单行文本框和密码框，登录协议部分的段落标签中嵌入超链接，登录按钮部分是1个提交按钮控件，注册和忘记密码部分是1个无序列表中嵌入超链接。页面底部是其他登录方式，无序列表中有5个项目列表，每个项目列表中嵌入1张图片。/*/*为整个整个页面中的面中的项目列表
16、、目列表、超超链接和接和控件控件设置置统一一样式式*/*/lililist-style:none;/*list-style:none;/*取消取消项目列表目列表样式式*/*/aatext-decoration:none;/*text-decoration:none;/*取消超取消超链接的文本修接的文本修饰*/*/inputinputborder:none;/*border:none;/*去除控件去除控件边框框*/*/margin-top:20px;margin-top:20px;outline:none;/*outline:none;/*当当获取文本框焦点取文本框焦点时，去掉，去掉边框效果框效
17、果*/*/*设置登录页面*/#loginborder:1pxsolid#aaa;/*设置边框*/margin:30pxauto;/*上、下外边距设置30px，左右处于居中位置*/*设置2个登录标题的父元素列表块*/.passwidth:255px;margin:0auto;overflow:hidden;/*overflow:hidden;/*清除浮清除浮动影响影响*/*/.passliline-height:50px;/*line-height:50px;/*设置行高，行高与高的置行高，行高与高的值相等，可使里面的内容相等，可使里面的内容居中居中*/*/float:left;/*float:
18、left;/*设置左浮置左浮动*/*/代码实现5.1 添加表单5.1.4 案例-用户登录表单CSS部分代码 例5.2/*/*选取第一个取第一个项目列表中的超目列表中的超链接接*/*/.passli:first-childa.passli:first-childafont-weight:700;/*font-weight:700;/*字体加粗字体加粗*/*/*/*设置置输入框提示文本的入框提示文本的样式式*/*/.forminput:placeholder.forminput:placeholdercolor:#666;font-size:15px;/*设置立即注册和忘记密码部分*/.regis
19、terwidth:250px;margin:20pxauto0;overflow:hidden;/*overflow:hidden;/*清除浮清除浮动影响影响*/*/.registerlifloat:left;/*float:left;/*设置左浮置左浮动*/*/padding:5px30px;/*padding:5px30px;/*设置内置内边距距*/*/*设置页脚部分中的无序列表块*/.footeruloverflow:hidden;/*overflow:hidden;/*清除浮清除浮动*/*/*设置无序列表中的项目列表*/.footerlifloat:left;float:left;ma
20、rgin:15px15px;5.1 添加表单5.1.4 案例-用户登录表单代码实现在上述CSS代码中，主要设计登录页面的整体的样式，以及对表单控件进行美化。首先，为整个页面中的项目列表、超链接和控件设置统一样式，取消控件的边框和边框效果。然后利用:first-child结构伪类选择器选取标题里的第1个项目列表中的超链接，使用font-weight属性加粗标题，再利用input:placeholder选取输入框提示文本，改变提示文本样式。本节小结本节内容讲解了表单的构成和标签各个属性，以及表单控件说明，还有标签的相关属性。通过本节的学习，希望读者可以了解表单的特性，以及掌握单行文本框、密码框和提
21、交按钮控件的使用。5.2表表单标签标签案例登录页满意度调查表标签标签5.2 表单标签5.2.1 标签标签可定义表单中的下拉列表。网页中经常会看到多个选项的下拉菜单，如选择城市、日期、科目等。在标签中包含一个或多个标签，标签可创建选择项。标签需要与标签配合使用，这个特点与列表一样，如无序列表是由标签和标签配合使用，为了更好地理解，可将下拉列表看作一个特殊的无序列表。5.2 表单标签5.2.1 标签标签的基本语法格式如下所示。语法格式 选择项1 .选择项n 值得注意的是，标签中设置name属性，每个标签中设置value属性，这样是可方便服务器获取选择框，以及用户获取选择项的值。如果在标签里省略va
22、lue值，则包含的文本就是选择项的值。5.2 表单标签5.2.1 标签标签可通过定义属性，改变下拉列表的外观显示效果。标签的常用属性有multiple属性和size属性，这2种属性的具体说明如表所示。标签属性属性属性说明明multiple设置多选下拉列表。默认下拉列表只能选择一项，而设置multiple属性后下拉列表可选择多项（按住Ctrl键即可选择多项）。多项下拉列表在选择项的数目超过列表框的高度时，会显示滚动条，通过拖动滚动条可查看并选择多个选项size设置下拉列表可见选项的数目，取值为正整数5.2 表单标签5.2.1 标签标签的常用属性有value、selected和disabled，可
23、用于设置下拉列表中的各个选择项。标签的常用属性具体说明如表所示。标签属性属性属性说明明value定义送往服务器的选项值selected默认此选项（首次显示在列表中时）表现为选中状态disabled规定此选项应在首次加载时被禁用在标签和标签之间，可以使用标签对选择项进行分组操作，即把相关选择项组合在一起。标签的label属性可以用来设置分组项的标题。5.2 表单标签5.2.1 标签制作一个下拉列表，在表单中定义单选下拉列表和多选下拉列表，在单选下拉列表中使用selected属性设置默认选中值，在多选下拉列表中使用标签对选择项进行分组操作。演示说明您目前所在的年级是!-大一大二!-selected
24、-大三大三大四主体代码 例5.3您目前所学科目有!-!-!-利用利用标签对选择项进行分行分组操作操作-optgrouplabel=HTMLCSSoptgrouplabel=JAVAPHP5.2 表单标签5.2.1 标签制作一个下拉列表，在表单中定义单选下拉列表和多选下拉列表，在单选下拉列表中使用selected属性设置默认选中值，在多选下拉列表中使用标签对选择项进行分组操作。运行效果如图。演示说明5.2 表单标签5.2.2 标签标签定义多行文本框（文本域），用户可在多行文本框内输入多行文本。文本区域内可容纳无限数量的文本，文本的默认字体是等宽字体（通常是Courier）。可以通过cols和ro
25、ws属性来规定多行文本框的尺寸，不过更好的办法是使用CSS的height和width属性。多行文本框的语法格式如下。语法格式5.2 表单标签5.2.2 标签标签的常用属性有name、rows和cols，这些属性的具体说明如表所示。标签属性属性属性说明明name定义多行文本框的名称，这项必不可省，因为存储文本的时候必须用到rows定义多行文本框的水平列，表示可显示的行数cols定义多行文本框的垂直列，表示可显示的列数，即一行中可容纳下的字节数autofocus规定在页面加载后文本区域自动获得焦点5.2 表单标签5.2.3 标签标签可将表单内的相关元素进行分组，并绘制边框。标签包含于标签内，用于定
26、义分组表单的标题。标签可以使表单域变得层次清晰，更易于用户理解。5.2 表单标签5.2.3 标签通过一个表单分组对标签进行演示说明，制作一个账号注册和邮箱注册分组。演示说明账号注册号注册账户名密码邮箱注册箱注册邮箱账号电话主体代码 例5.45.2 表单标签5.2.3 标签通过一个表单分组对标签进行演示说明，制作一个账号注册和邮箱注册分组。运行效果如图。演示说明5.2 表单标签5.2.4 案例-登录页满意度调查表本实例是一个登录页满意度调查表的页面。该页面主要由表单中的下拉列表和多行文本框，标签中的单选框和复选框，以及块元素、图像标签、水平线标签、段落标签、内联元素、标签和标题标签构成。登录页面
27、结构简图如图所示。登录页满意度调查!-尊敬的用户，您好：!-1、到目前为止，您的使用年限是!-1-21-2年年 2、您对登录页面的满意度如何？!-非常非常满意意 代码实现5.2 表单标签5.2.4 案例-登录页满意度调查表主体代码 例5.53、您对登录页面的感觉如何？!-方便方便4、请大声说出您对登录页的想法（例如：哪里有问题，哪些功能做得不够好等）!-textareaname=ideaplaceholder=(200字以内,还可以输入200个字)!-inputtype=submitvalue=5.2 表单标签5.2.4 案例-登录页满意度调查表代码实现在上述主体代码中，头部部分定义页面标题，
28、以及附上页面说明文字，标题包括图标和文本。接下来是页面的主体部分页面问题信息，有4个模块，分别是下拉列表、单选框、复选框和多行文本框，为这4个问题模块分别定义标题和问题内容。最后为底部部分添加页面的提交按钮。/*设置页面标题前的图标*/#questionh2imgvertical-align:middle;/*vertical-align:middle;/*图文混排文混排时，文字与，文字与图片中片中间对齐*/*/*设置下拉列表*/#contain-1h4selectborder-width:2px;/*border-width:2px;/*设置置边框框宽度度*/*/font-weight:70
29、0;/*font-weight:700;/*设置文字加粗置文字加粗*/*/*设置单选框和复选框的样式*/.question_text-2p,.question_text-3pmargin:7pxauto;/*设置上下外边距为7px，左右自适应，处于居中位置*/font-size:15px;/*设置文字大小*/*设置多行文本框*/.question_text-4textareawidth:500px;/*width:500px;/*利用利用widthwidth和和heightheight属性，属性，设置多行文本框的尺寸置多行文本框的尺寸*/*/height:100px;height:100px;
30、color:#404040;/*设置文字颜色*/border:1pxsolid#ccc;/*border:1pxsolid#ccc;/*设置置边框框样式式*/*/margin:8px0020px;/*margin:8px0020px;/*设置上、右、下、左外置上、右、下、左外边距距*/*/*设置多行文本框外部提示文字*/.tipsdisplay:block;/*display:block;/*将将spanspan内内联元素元素转化化为块元素元素*/*/padding-left:20px;/*padding-left:20px;/*设置左内置左内边距距*/*/代码实现5.2 表单标签5.2.4
31、案例-登录页满意度调查表CSS部分代码 例5.5/*设置提交按钮的父级元素块*/.btnwidth:100%;height:50px;position:relative;/*position:relative;/*设置相置相对定位定位*/*/*统一设置标签和标签*/.btnlabel,.btninputdisplay:block;/*转化为块元素*/line-height:38px;/*行高与高相等，文本居中*/position:absolute;/*position:absolute;/*设置置绝对定位，将元素定位点正定位，将元素定位点正中心中心*/*/left:0;left:0;right
32、:0;right:0;top:0;top:0;bottom:0;bottom:0;margin:auto;margin:auto;/*设置提交按钮*/.btninputbackground-color:#f89815;border:none;/*border:none;/*取消取消边框框*/*/font-size:16px;color:#303040;5.2 表单标签5.2.4 案例-登录页满意度调查表代码实现在上述CSS代码中，首先设置整个调查表页面，规定宽度、高度和外边距，再设置标题位于居中位置，利用vertical-align属性使文字与图片中间对齐，然后为页面说明文字设置外边距、字号和
33、行高。接下来是4个问题信息模块的样式设置，首先为4个问题信息的父元素块设置宽度、高度、背景颜色和边框效果，再统一设置4个问题信息模块的宽度和外边距，这样是为了统一它们之间的距离，让页面更规整与美观。然后分别设置下拉列表、单选框、复选框和多行文本框的样式，以及多行文本框外部提示文字的样式。最后一步是设置底部的提交按钮，首先为提交按钮的父级元素添加相对定位，然后为标签与的提交按钮控件添加绝对定位，并将它们定位到父级元素的正中心，取消按钮的边框，再使用CSS属性设置其他样式，完成整个页面的样式设置。本节小结本节内容主要讲解了下拉列表和多行文本框以及它们的属性。通过本节的学习，希望读者可以了解表单的应
34、用场合，掌握下拉列表和多行文本框的使用。5.3美化表美化表单新增表单控件案例退款申请表单box-shadow属性border-radius属性background-size属性5.3 美化表单5.3.1 新增表单控件在HTML5中，表单新增了多个input输入类型，例如，图像、邮箱、电话、日期等，这些新增的表单控件，可以更好地实现输入控制以及验证。标签新增的type属性值，即新增的部分表单控件具体说明如表所示。属性属性值说明明image可定义图像形式的提交按钮。需要结合src属性和alt属性使用，src属性定义图片的来源，alt属性定义当图片无法显示时的提示文字。例email限制用户输入必须为
35、邮箱类型。例number限制用户输入必须为数字类型。例url限制用户输入必须为url地址。例tel限制用户输入必须为电话号码类型。例search限制用户输入必须为搜索框关键词。例5.3 美化表单5.3.1 新增表单控件续表。属性属性值说明明color定义拾色器，规定颜色。例date限制用户输入必须为日期类型，选取日、月、年。例month限制用户输入必须为月类型，选取月、年例week限制用户输入必须为周类型，选取周、年。例time限制用户输入必须为时间类型，选取小时、分钟。例5.3 美化表单5.3.2 border-radius属性border-radius属性是CSS3的一个新属性，可为元素添
36、加圆角效果，长度值可以是px、%、em等。border-radius属性中的数值代表一个圆形的半径，这个圆形与元素相切就形成了圆角的大小，属性值越大，圆角越明显。例如一个宽100px、高100px的正方形块元素，将border-radius属性值设为50px（border-radius:50px），可转变成一个圆形。5.3 美化表单5.3.2 border-radius属性border-radius属性与margin、padding属性相似，border-radius属性是其相关属性border-top-left-radius左上角、border-top-right-radius右上角、bor
37、der-bottom-right-radius右下角和border-bottom-left-radius左下角的简写。border-radius属性的值可以通过复合写法有多种设置方式。border-radius属性的语法格式如下。语法格式border-radius:左上角 右上角 右下角 左下角border-radius:左上角 右上角和左下角 右下角border-radius:左上角和右下角 右上角和左下角border-radius:四个角5.3 美化表单5.3.3 box-shadow属性box-shadow属性是CSS3的一个新特性，可为元素添加一个或多个阴影效果。box-shadow属
38、性的语法格式如下。语法格式box-shadow:h-shadow v-shadow blur spread color inset;5.3 美化表单5.3.3 box-shadow属性box-shadow属性的属性值说明如表所示。属性属性值说明明h-shadow必需。设置水平阴影的位置，允许负值v-shadow必需。设置垂直阴影的位置，允许负值blur可选。设置阴影模糊距离。在原有的阴影长度上增加模糊度，数值越大越模糊，模糊范围也越大，如同吹气球的效果spread可选。设置阴影的尺寸。可对设置好的阴影进行局部放大color可选。设置阴影的颜色inset可选。将外部阴影(outset)改为内部阴
39、影5.3 美化表单5.3.4 background-size属性background-size属性是CSS3的一个新特性，用于设置背景图像的尺寸。在CSS3中可以使用background-size属性来设置背景图像尺寸，这使得在不同环境中重复使用背景图片成为可能。background-size属性值可设置为长度值、百分比值、cover、contain等，其属性值的具体说明如表所示。属性属性值说明明长度值可设置图像的宽度和高度，常用单位为px百分比值以父元素的百分比来设置背景图像的宽度和高度，单位为%cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在
40、背景定位区域中。contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域5.3 美化表单5.3.5 案例-退款申请表单本实例是一个退款申请表单的页面。该页面主要由表单中的下拉列表和多行文本框，标签中的单选框、数字输入框、隐藏域、单行文本框、文件域、日期输入框和图像按钮，以及块元素、无序列表、图像标签、段落标签、内联元素、标签和超链接构成，退款申请表单页面结构简图如图所示。!-1买家申请退款!-formaction=#method=postenctype=multipart/form-data退货商品：代码实现5.3 美化表单5.3.5 案例-退款申请表单主体代码 例5.6!-服
41、务类型：inputtype=radioname=refundid=allow仅退款退款inputtype=radioname=refundid=full退退货退款退款!-退款原因：多拍、多拍、错拍、不想要拍、不想要!-!-1-商品件数：!-退款金额：inputtype=hiddenname=cashvalue=317.00inputtype=textname=numrequired（*填写实际支付金额）!-退款说明：textareaname=content代码实现5.3 美化表单5.3.5 案例-退款申请表单主体代码 例5.6!-上传图片：inputtype=filename=upaccept
42、=image/*multiple!-更新时间：!-inputtype=imagesrc=./image/btn.pngalt=submit5.3 美化表单5.3.5 案例-退款申请表单代码实现在上述主体代码中，页面主要分为2个部分，顶部是退款进度列，无序列表中有4个列表项目，每个列表项目中分别是超链接中嵌套1个元素。主体部分是退款详情表单域，主要分为9个模块，分别是退款商品图片、服务类型单选框、退款原因下拉列表、商品件数数字输入框、退款金额单行文本框与隐藏域、退款说明多行文本框、上传图片文件域和更新时间日期输入框，以及图像提交按钮。/*设置退款进度条*/.barbackground-color
43、:#bbb;overflow:hidden;/*overflow:hidden;/*为父元素添加父元素添加overflowoverflow属性，清除浮属性，清除浮动*/*/border-radius:10px;/*CSS3border-radius:10px;/*CSS3新特性，新特性，设置置边框框圆角角*/*/*设置退款进度条中的项目列表*/.barliwidth:175px;list-style:none;/*list-style:none;/*取消取消项目列表目列表标记*/*/float:left;/*float:left;/*为项目列表添加左浮目列表添加左浮动*/*/border-ra
44、dius:10px;/*CSS3border-radius:10px;/*CSS3新特性，新特性，设置置边框框圆角角*/*/*/*选取第一个取第一个项目列表目列表*/*/.barli:first-child.barli:first-childbackground-color:#dd2727;/*设置背景颜色*/*/*设置置项目列表中的序号目列表中的序号*/*/.orderdisplay:inline-block;height:22px;line-height:22px;/*设置行高，使其垂直居中*/color:#aaa;background-color:#fff;border-radius:5
45、0%;/*CSS3border-radius:50%;/*CSS3新特性，新特性，设置置边框框圆角角*/*/margin-right:4px;/*margin-right:4px;/*设置右外置右外边距距*/*/代码实现5.3 美化表单5.3.5 案例-退款申请表单CSS部分代码 例5.6/*设置退款详情主体部分*/.detailsbackground-image:url(./image/1.jpg);background-image:url(./image/1.jpg);background-size:cover;/*background-size:cover;/*设置背景置背景图像尺寸，把
46、背景像尺寸，把背景图像像扩展至足展至足够大，以使背景大，以使背景图像完全覆盖背景区域像完全覆盖背景区域*/*/border:1pxsolid#eee;/*border:1pxsolid#eee;/*添加添加边框框*/*/border-radius:10px;/*CSS3border-radius:10px;/*CSS3新特性，新特性，设置置边框框圆角角*/*/box-shadow:005px1px#aaa;/*CSS3box-shadow:005px1px#aaa;/*CSS3新特性，向新特性，向块元素添加元素添加阴影阴影*/*/margin-top:10px;/*margin-top:10p
47、x;/*设置上外置上外边距距*/*/*统一设置表单域中的各模块的下外边距*/.containmargin-bottom:20px;/*统一设置表单域各模块说明文本的字体大小*/.containpfont-size:18px;/*统一设置表单域中退款商品件数、退款金额和更新时间模块输入框的宽度、高度和字体大小*/.counttype=number,.moneytype=text,.data.counttype=number,.moneytype=text,.datatype=datetype=datefont-size:17px;border:1pxsolid#cb9999;/*border:1
48、pxsolid#cb9999;/*为输入框改入框改变边框框样式式*/*/outline:none;/*outline:none;/*当当获取文本框焦点取文本框焦点时，去掉，去掉边框效果框效果*/*/*设置退款商品图片*/.goodsimgvertical-align:middle;/*vertical-align:middle;/*垂直居中垂直居中*/*/*设置退款原因下拉列表*/.reasonselectborder:1pxsolid#cb9999;/*为下拉列表改变边框样式*/outline:none;/*outline:none;/*当当获取文本框焦点取文本框焦点时，去掉，去掉边框效果框
49、效果*/*/font-size:17px;/*设置字体大小*/*设置退款金额后的提示文字*/.payfont-size:15px;color:#888;/*设置退款说明多行文本框*/textareaborder:1pxsolid#cb9999;/*为多行文本框改变边框样式*/outline:none;/*当获取文本框焦点时，去掉边框效果*/font-size:17px;/*设置输入字体的大小*/vertical-align:middle;/*vertical-align:middle;/*垂直居中垂直居中*/*/*/*设置多行文本框中提示文字的字体大小置多行文本框中提示文字的字体大小*/*/t
50、extarea:placeholdertextarea:placeholderfont-size:17px;代码实现5.3 美化表单5.3.5 案例-退款申请表单CSS部分代码 例5.6/*设置文件域的父元素超链接*/.uploadvertical-align:middle;/*vertical-align:middle;/*垂直居中垂直居中*/*/display:inline-block;/*display:inline-block;/*转化化为行内行内块*/*/text-decoration:none;/*text-decoration:none;/*取消文本修取消文本修饰*/*/posi