网站备案信息,博罗企业网站建设,wordpress 设置常规站点地址,深圳网站建设制作优化学习目标 掌握创建表格的方法#xff0c;能够在网页中创建表格。 熟悉表格相关标签的属性#xff0c;能够运用这些属性设置不同形态的表格。 掌握CSS控制表格样式的方法#xff0c;能够使用CSS设置表格样式。 了解表单的构成#xff0c;能够说出表单的构成部分。 掌握创…学习目标 掌握创建表格的方法能够在网页中创建表格。 熟悉表格相关标签的属性能够运用这些属性设置不同形态的表格。 掌握CSS控制表格样式的方法能够使用CSS设置表格样式。 了解表单的构成能够说出表单的构成部分。 掌握创建表单的方法能够在网页中创建表单。 掌握各类表单控件能够创建不同功能的表单控件。 掌握HTML5表单新增属性包括input控件类型、form标签、input属性、form属性。 掌握CSS控制表单样式的方法能够使用CSS美化表单样式。
表格与表单是HTML网页中的重要标签利用表格可以对网页进行排版使网页信息有条理地显示出来而使用表单则使网页从单向的信息传递发展到能够与用户进行交互对话实现了网上注册、网上登录、网上交易等多种功能。本章将对表格与表单的相关知识进行详细地讲解。
7.1 表格
日常生活中为了清晰地显示数据或信息常常使用表格对数据或信息进行整理同样在制作网页时为了使网页中的元素有条理地显示也可以使用表格对网页内容进行规划。为此HTML语言提供了一系列的表格标签本节将对这些标签进行详细地讲解。
7.1.1 创建表格 使用标签创建表格的语法格式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表格/title
/head
body
table border20 cellspacing20 cellpadding20 width600 height600 aligncenter bgcolor#CCC backgroundimages/1.jpgtrtd学生名称/tdtd班级/tdtd分数/td/trtrtd小明/tdtd一班/tdtd87/td/trtrtd小李/tdtd二班/tdtd86/td/trtrtd小萌/tdtd三班/tdtd72/td/tr
/table
/body
/html 注意tr标签中只能嵌套td标签不可以在tr标签中输入文字。
7.1.2 table标签的属性
table标签包含了大量属性虽然大部分属性都可以使用CSS替代但是HTML语言中也为table标签提供了一系列的属性用于控制表格的显示样式。
table标签的属性
属性描述常用属性值border设置表格的边框默认border0为无边框像素值cellspacing设置单元格与单元格之间的空间像素值默认为2像素cellpadding设置单元格内容与单元格边缘之间的空间像素值默认为1像素width设置表格的宽度像素值
属性描述常用属性值height设置表格的高度像素值align设置表格在网页中的水平对齐方式left、center、rightbgcolor设置表格的背景颜色颜色的英文单词、十六进制颜色值#RGB、RGB颜色值rgb(r,g,b)background设置表格的背景图像背景图像的URL地址
在table标签中border属性用于设置表格的边框默认值为0。
注意直接使用table标签的边框属性或其他取值为像素值的属性时可以省略单位“px”。
cellspacing属性用于设置单元格与单元格之间的空间默认距离为2px。
cellpadding属性用于设置单元格内容与单元格边框之间的空白间距默认为1px。
表格的宽度和高度是自适应的依靠表格内的内容来支撑要想更改表格的尺寸就需要对其应用宽度属性width和高度属性height。
align属性可用于定义表格的水平对齐方式其可选属性值为left、center、right。
在table标签中bgcolor属性用于设置表格的背景颜色。
在table标签中background属性用于设置表格的背景图像。
7.1.3 tr标签的属性
制作网页时有时需要表格中的某一行特殊显示这时就可以为tr标签添加属性
属性描述常用属性值height设置行高度像素align设置一行内容的水平对齐方式left、center、rightvalign设置一行内容的垂直对齐方式top、middle、bottombgcolor设置行背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)background设置行背景图像背景图像的URL地址
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletr标签的属性/title
/head
body
table border1 width400 height240 aligncenter tr height80 aligncenter valigntop backgroundimages/1.jpgtd姓名/tdtd性别/tdtd电话/tdtd住址/td/trtrtd小王/tdtd女/tdtd11122233/tdtd海淀区/td/trtrtd小李/tdtd男/tdtd55566677/tdtd朝阳区/td/trtrtd小张/tdtd男/tdtd88899900/tdtd西城区/td/tr
/table
/body
/html tr标签无宽度属性width其宽度取决于表格标签table。在实际工作中均可用相应的CSS样式属性来替代tr标签的属性。
7.1.4 td标签的属性
在网页制作过程中想要对某一个单元格进行控制就需要为单元格标签td定义属性。
属性名含义常用属性值width设置单元格的宽度像素height设置单元格的高度像素align设置单元格内容的水平对齐方式left、center、rightvalign设置单元格内容的垂直对齐方式top、middle、bottom
属性名含义常用属性值bgcolor设置单元格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)background设置单元格的背景图像url地址colspan设置单元格横跨的列数用于合并水平方向的单元格正整数rowspan设置单元格竖跨的行数用于合并垂直方向的单元格正整数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title单元格的合并/title
/head
body
table border1 width400 height240 aligncenter tr height80 aligncenter valigntop bgcolor#00CCFFtd姓名/tdtd性别/tdtd电话/tdtd住址/td/trtrtd小王/tdtd女/tdtd11122233/tdtd rowspan3北京/td !--rowspan设置单元格竖跨的行数--/trtrtd小李/tdtd男/tdtd55566677/td!--删除了td朝阳区/td--/trtrtd小张/tdtd男/tdtd88899900/td!--删除了 td西城区/td--/tr
/table
/body
/html 合并单元格的规则:
注释或删除需要合并的单元格 在预留的单元格中添加colspan或rolspan属性属性值为水平合并的列数或竖直合并的行数。
注意
1.在td标签的属性中重点掌握colspan属性和rolspan属性。其他的属性了解即可不建议使用这些属性均可用CSS样式属性替代。 2.当对某一个td标签应用width属性设置宽度时该列中的所有单元格均会以设置的宽度显示。 3.当对某一个td标签应用height属性设置高度时该行中的所有单元格均会以设置的高度显示。
7.1.5 th标签
应用表格时经常需要为表格设置表头以使表格的结构更加清晰方便查阅。表头一般位于表格的第一行或第一列其文本加粗居中显示。
th标签与td标签的属性、用法完全相同但是它们具有不同的语义。th标签用于定义表头单元格其文本默认加粗居中显示而td标签定义的为普通单元格其文本为普通文本且水平左对齐显示。
7.1.6 表格的结构 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title简单的网页结构/title
/head
bodytable width600 border1 cellspacing0 aligncenterthead !--thead定义表格的头部--trtd colspan3网站的logo/td/trtrtha href#首页/a/ththa href#关于我们/a/ththa href#联系我们/a/th/tr/theadtfoot !--tfoot定义表格的页脚--trtd colspan3 aligncenter底部基本企业信息copy;【版权信息】/td/tr /tfoottbody !--tbody定义表格的主体--tr height150td主体的左栏/tdtd主体的中间/tdtd主体的右侧/td /trtr height150td主体的左栏/tdtd主体的中间/tdtd主体的右侧/td /tr/tbody /table
/body
/html 一个表格只能定义一个thead、一个tfoot但可以定义多个tbody它们必须按thead、tfoot和tbody的顺序使用。之所以将tfoot置于tbody之前是为了使浏览器在接收到全部内容之前即可显示页脚。
7.2 使用CSS控制表格样式
除了表格标签自带的属性外还可用CSS的边框、宽度、高度、颜色等来控制表格样式。此外CSS中还提供了表格专用属性以便控制表格样式。本节将从表格边框、单元格边距和单元格宽高三个方面详细讲解CSS控制表格样式的具体方法。
7.2.1 使用CSS控制表格边框
使用CSS边框样式属性border可以更改边框的颜色或改变单元格的边框宽度。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS控制表格边框/titlestyle typetext/csstable{width:800px;height:300px;border:1px solid #30F; /*设置table的边框*/}th,td{border:1px solid #30F;} /*为单元格单独设置边框*//style
/head
bodytablecaption/caption !--caption定义表格的标题--trth诗歌序号/thth诗歌名称/thth作者/thth内容/th/trtrth1/thtd《峨眉山月歌》/tdtd李白/tdtd峨眉山月半轮秋影入平羌江水流。夜发清溪向三峡思君不见下渝州。/td/trtrth2/thtd《江南逢李龟年》/tdtd杜甫/tdtd岐王宅里寻常见崔九堂前几度闻。正是江南好风景落花时节又逢君。/td/trtrth3/thtd《行军九日思长安故园》/tdtd岑参/tdtd强欲登高去无人送酒来。遥怜故园菊应傍战场开。/td/trtrth4/thtd《夜上受降城闻笛》/tdtd李益/tdtd回乐烽前沙似雪受降城外月如霜。不知何处吹芦管一夜征人尽望乡。/td/trtrth5/thtd《秋夕》/tdtd杜牧/tdtd银烛秋光冷画屏轻罗小扇扑流萤。天阶夜色凉如水卧看牵牛织女星。/td/tr/table
/body
/html 注意
1.当表格的border-collapse属性设置为collapse时HTML中设置的cellspacing属性值无效。 2.tr标签无border样式属性。
7.2.2 使用CSS控制单元格边距
使用table标签的属性美化表格时可以通过cellpadding属性和cellspacing 属性控制单元格内容与边框之间的距离以及相邻单元格边框之间的距离.
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS控制单元格边距/titlestyle typetext/csstable{border:1px solid #30F; /*设置table的边框*/}th,td{border:1px solid #30F; /*为单元格单独设置边框*/padding:50px; /*为单元格内容与边框设置20px的内边距*/margin:50px; /*为单元格与单元格边框之间设置20px的外边距*/} /style
/head
bodytabletrth网络安全问题/thth解决方案/thth解决办法/th/trtrth渗透问题/thtd渗透测试/tdtd渗透测试工程师将利用精湛的技能和先进的技术对系统及应用程序的安全性进行识别和检测。/td/trtrth漏洞问题/thtd漏洞评估/tdtd查找并分析内网、外网及云端的漏洞。/td/tr/table
/body
/html th标签和td标签无外边距属性margin要想设置相邻单元格边框之间的距离只能对 table标签应用cellspacing属性。
注意tr标签无内边距属性padding和外边距属性margin。
7.2.3 使用CSS控制单元格的宽度和高度
单元格的宽度和高度有着和其他标签不同的特性主要表现在单元格之间的互相影响上。使用CSS中的width属性和height属性可以控制单元格的宽高。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title使用CSS控制单元格的宽度和高度/titlestyle typetext/csstable{border:1px solid #30F; /*设置table的边框*/border-collapse:collapse; /*边框合并*/}th,td{border:1px solid #30F; /*为单元格单独设置边框*/}.one{ width:100px; height:80px;} /*定义东单元格的宽度与高度*/.two{ height:40px;} /*定义西单元格的高度*/.three{ width:200px; } /*定义南单元格的宽度*/ /style
/head
bodytabletrtd classone A房间/tdtd classtwo B房间/td/trtrtd classthree C房间/tdtd classfour D房间/td/tr/table
/body
/html 7.3 表单
表单是可以通过网络接收其他用户数据的平台例如注册页面的账户密码输入、网上订货页等都是以表单的形式来收集用户信息并将这些信息传递给后台服务器实现网页与用户间的沟通对话本节将对表单进行详细的讲解。
7.3.1 表单的构成 7.3.2 创建表单
在HTML5中form标签用于创建表单即定义表单域以实现用户信息的收集和传递form标签中的所有内容都会被提交给服务器。
创建表单的语法格式 form标签的常用属性:
action属性用于指定接收并处理表单数据的服务器程序的url地址
form actionform_action.asp
action的属性值可以是相对路径或绝对路径还可以为接收数据的E-mail邮箱地址。
form actionmailto:htmlcss163.com
method属性用于设置表单数据的提交方式。
method属性的取值为get或postget为method属性的默认值。
form actionform_action.asp methodget
采用get方法提交的数据将显示在浏览器的地址栏中保密性差且有数据量的限制。而post方式的保密性好并且无数据量的限制所以使用methodpost可以大量的提交数据。
name属性用于指定表单的名称。
7.3.3 表单控件
1.input控件
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等要想定义这些元素就需要使用input控件。
input控件的语法格式:
input type控件类型/
属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮
属性属性值描述typesubmit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域
属性属性值描述name由用户自定义控件的名称value由用户自定义input控件中的默认文本内容size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读不能编辑修改disableddisabled第一次加载页面时禁用该控件显示为灰色
属性属性值描述checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleinput控件/title
/head
bodyform action# methodpost用户名 !--text单行文本输入框--input typetext value张三 maxlength6 /br /br / 密码 !--password密码输入框--input typepassword size40 /br /br / 性别 !--radio单选按钮--input typeradio namesex checkedchecked /男input typeradio namesex /女br /br / 兴趣 !--checkbox复选框--input typecheckbox /唱歌input typecheckbox /跳舞input typecheckbox /游泳br /br /上传头像input typefile /br /br / !--file文件域--input typesubmit / !--submit提交按钮-- input typereset / !--reset重置按钮-- input typebutton value普通按钮 / !--button普通按钮-- input typeimage srcimages/login.gif / !--image图像域-- input typehidden / !--hidden隐藏域-- /form
/body
/html 单行文本输入框常用来输入简短的信息如用户名、账号、证件号码等常用的属性有name、value、maxlength。
input typetext value张三 maxlength6 / 密码输入框用来输入密码其内容将以圆点的形式显示。
input typepassword size40 / 单选按钮用于单项选择如选择性别、是否操作等。在定义单选按钮时必须为同一组中的选项指定相同的name值这样“单选”才会生效。
input typeradio namesex checkedchecked /男
input typeradio namesex /女 复选框常用于多项选择如选择兴趣、爱好等可对其应用checked属性指定默认选中项。
input typecheckbox /唱歌
input typecheckbox /跳舞
input typecheckbox /游泳 普通按钮常常配合javascript脚本语言使用。
input typebutton value普通按钮 / 提交按钮是表单中的核心控件用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用value属性改变提交按钮上的默认文本。
input typesubmit / 当用户输入的信息有误时可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性改变重置按钮上的默认文本。 input typereset / 图像形式的提交按钮与提交按钮在功能上基本相同显示效果上会使用图像替代了默认的按钮外观上更加美观。必须为图像按钮定义src属性指定图像的url地址。
input typeimage srcimages/login.gif / 隐藏域对于用户是不可见的通常用于后台的程序 input typehidden /
当定义文件域时页面中将出现一个文本框和一个“选择文件”按钮用户可以通过填写文件路径或直接选择文件的方式将文件提交给后台服务器。 input typefile /br /br / 在实际运用中常常需要将input 控件联合label标签使用以扩大控件的选择范围从而提供更好的用户体验例如在选择性别时希望单击提示文字“男”或者“女”也可以选中相应的单选按钮。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlelabel标签的使用/title
/head
body
form action# methodpostlabel forname姓名/labelinput typetext maxlength6 idname /br /br / 性别 input typeradio namesex checkedchecked idman /label forman男/labelinput typeradio namesex idwoman /label forwoman女/label
/form
/body
/html 2.textarea控件
textarea控件可以轻松地创建多行文本输入框。
textarea控件的语法格式: 可选属性属性值描述name由用户自定义控件的名称readonlyreadonly该控件内容为只读不能编辑修改disableddisabled第一次加载页面时禁用该控件显示为灰色
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletextarea控件/title
/head
body
form action# methodpost textarea cols60 rows8昔人已乘黄鹤去此地空余黄鹤楼。 黄鹤一去不复返白云千载空悠悠。晴川历历汉阳树芳草萋萋鹦鹉洲。日暮乡关何处是烟波江上使人愁。/textareabr /input typesubmit value提交/
/form
/body
各浏览器对clos属性和rows属性的理解不同当对textarea控件应用clos属性和rows属性时多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中更常用的方法是使用CSS的width属性和height属性来定义多行文本输入框的宽高。
3.select控件
浏览网页时经常会看到包含多个选项的下拉菜单例如选择所在的城市、出生年月、兴趣爱好等。 使用select控件可以制作下拉菜单效果。 select标签和option标签的常用属性
标签名常用属性描述selectsize指定下拉菜单的可见选项数取值为正整数multiple定义multiplemultiple时下拉菜单将具有多项选择的功能方法为按住“Ctrl”键的同时选择多项optionselected定义selected selected 时当前项即为默认选中项
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleselect控件/title
/head
body
form action# methodpost
所在校区br /select !--最基本的下拉菜单--option-请选择-/optionoption北京/optionoption上海/optionoption广州/optionoption武汉/optionoption成都/option/selectbr /br /
特长单选:br /select option唱歌/optionoption selectedselected画画/option !--设置默认选中项--option跳舞/option/selectbr /br /
爱好多选:br /select multiplemultiple size4 !--设置多选和可见选项数--option读书/optionoption selectedselected编程/option !--设置默认选中项--option旅行/optionoption selectedselected听音乐/option !--设置默认选中项--option踢球/option/selectbr /br /input typesubmit value提交/
/form
/body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title为下拉列表中的选项分组/title
/head
body
form action# methodpost
城区br /selectoptgroup label北京option东城区/optionoption西城区/optionoption朝阳区/optionoption海淀区/option/optgroupoptgroup label上海option浦东新区/optionoption徐汇区/optionoption虹口区/option/optgroup/select
/form
/body
/html 7.4 HTML5表单的新增控件类型、标签和属性
HTML5中增加了许多新的表单功能例如新的input控件类型、新的form标签、新的input属性、新的form属性。这些新增内容可以帮助设计人员更加高效和省力地制作出标准的Web表单。本节将对HTML5新增的表单属性做详细讲解。
7.4.1新的input控件类型 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title新的input控件类型/title
/head
body
form action# methodget请输入您的邮箱input typeemail nameformmail/br/请输入个人网址input typeurl nameuser_url/br/请输入电话号码input typetel nametelphone pattern^\d{11}$/br/输入搜索关键字input typesearch namesearchinfo/br/请选取一种颜色input typecolor namecolor1/input typecolor namecolor2 value#FF3E96/input typesubmit value提交/
/form
/body
/html number类型具体属性说明:
value指定输入框的默认值。 max指定输入框可以接受的最大的输入值。 min指定输入框可以接受的最小的输入值。 step输入域合法的间隔如果不设置默认值是1。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlenumber类型的input控件的使用/title
/head
body
form action# methodget请输入数值input typenumber namenumber1 value1 min1 max20 step4/br/input typesubmit value提交/
/form
/body
/html range类型具体属性说明:
min属性设置最小值。 max属性设置最大值 step属性指定每次滑动的步幅。 时间和日期类型说明date选取日、月、年month选取月、年week选取周和年time选取时间小时和分钟datetime选取时间、日、月、年UTC时间datetime-local选取时间、日、月、年本地时间
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title时间和日期类型的使用/title
/head
body
form action# methodgetinput typedate/nbsp;input typemonth/nbsp;input typeweek/nbsp;input typetime/nbsp;input typedatetime/nbsp;input typedatetime-local/input typesubmit value提交/
/form
/body
/html 注意对于浏览器不支持的input控件输入类型将会在网页中显示为一个普通输入框。
7.4.2 新的表单标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titledatalist标签/title
/head
body
form action# methodpost请输入用户名input typetext listnamelist/datalist idnamelistoptionadmin/optionoptionlucy/optionoptionlily/option/datalistinput typesubmit value提交 /
/form
/body
/html 2.output标签
output标签用于定义不同类型控件的输出输出结果会显示在output标签中。output标签通常配合input控件使用。
属性说明for定义输出域相关的一个或多个元素form定义输入字段所属的一个或多个表单name定义对象的唯一名称
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleoutput标签/title
/head
bodyform oninputx.valueparseInt(a.value)parseInt(b.value)0input typerange ida value50100input typenumber idb value50output namex fora b/output/form
/body
/html 7.4.3 新的input控件属性
autofocus属性用于指定页面加载后是否自动获取焦点将标签的属性值指定为true时表示页面加载完毕后会自动获取该焦点。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleautofocus属性/title
/head
body
form action# methodget请输入搜索关键字input typetext nameuser_name autocompleteoff autofocustrue/br/input typesubmit value提交 /
/form
/body
/html form属性可以把表单内的子元素写在页面中的任意位置。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleform属性/title
/head
body
form action# methodget iduser_form请输入您的姓名input typetext namefirst_name/input typesubmit value提交 /
/formp下面的输入框在form标签外但因为指定了form属性值为表单的id属性值所以该输入框仍然属于表单的一部分。/p请输入您的昵称input typetext namelast_name formuser_form/br/
/body
/html list属性用于指定输入框所绑定的datalist标签制作提示输入效果其值是某个datalist标签的id。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlelist属性/title
/head
body
form action# methodget
请输入网址input typeurl listurl_list nameweburl/
datalist idurl_listoption label公司A value网址1/optionoption label公司B value网址2/optionoption label公司C value网址3/option
/datalist
input typesubmit value提交/
/form
/body
/html multiple属性指定输入框可以选择多个值该属性适用于email和file类型的input控件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlemultiple属性/title
/head
body
form action# methodget电子邮箱input typeemail namemyemail multipletrue/nbsp;nbsp;如果电子邮箱有多个请使用英文逗号分隔br/br/上传照片input typefile nameselfile multipletrue/br/br/input typesubmit value提交/
/form
/body
/html min、max和step属性用于为包含数字或日期的input控件规定限值适用于Date pickers、number和range等类型的input控件。 pattern属性用于验证input类型输入框中用户输入的内容是否与所定义的正则表达式相匹配
正则表达式说明^[0-9]*$数字^\d{n}$n位的数字^\d{n,}$至少n位的数字^\d{m,n}$m-n位的数字^(0|1-9*)$零或非零开头的数字
正则表达式说明^(1-9*)(.[0-9]{1,2})?$非零开头的最多带两位小数的数字^(-|)?\d(.\d)?$正数、负数^\d$ 或 ^[1-9]\d*|0$非负整数^-[1-9]\d*|0$ 或 ^((-\d)|(0))$非正整数^[\u4e00-\u9fa5]{0,}$汉字^[A-Za-z0-9]$ 或 ^[A-Za-z0-9]{4,40}$英文和数字^[A-Za-z]$由26个英文字母组成的字符串^[A-Za-z0-9]$由数字和26个英文字母组成的字符串
正则表达式说明^\w$ 或 ^\w{3,20}$由数字、26个英文字母或者下划线组成的字符串^[\u4E00-\u9FA5A-Za-z0-9_]$中文、英文、数字包括下划线^\w([-.]\w)\w([-.]\w).\w([-.]\w)*$Email地址^(https?:\/\/)?([\da-z.-]).([a-z.]{2,6})([\/\w .-])\/?$/URL地址
正则表达式说明^\d{15}|\d{18}$身份证号(15位、18位数字)^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$以数字、字母x结尾的短身份证号码^a-zA-Z{4,15}$帐号是否合法(字母开头允许5-16字节允许字母数字下划线)^[a-zA-Z]\w{5,17}$密码(以字母开头长度在6~18之间只能包含字母、数字和下划线。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlepattern属性/title
/head
body
form action# methodget账nbsp;nbsp;nbsp;nbsp;号input typetext nameusername pattern^[a-zA-Z][a-zA-Z0-9_]{4,15}$ /以字母开头长度为5~16只能包含字母、数字和下划线br/密nbsp;nbsp;nbsp;nbsp;码input typepassword namepwd pattern^[a-zA-Z]\w{5,17}$ /以字母开头长度为6~18只能包含字母、数字和下划线br/身份证号input typetext namemycard pattern^\d{15}|\d{18}$ /15位、18位数字br/电子邮箱input typeemail namemyemail pattern^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/input typesubmit value提交/
/form
/body
/html placeholder属性用于为input类型的输入框提供相关提示信息。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleplaceholder属性/title
/head
body
form action# methodget请输入邮政编码input typetext namecode pattern[0-9]{6} placeholder请输入6位数的邮政编码 /input typesubmit value提交/
/form
/body
/html 注意placeholder属性适用于type属性值为text、search、url、tel、email以及password的input标签。
required属性用于判断用户是否在输入框中输入内容当表输入框容为空时则不允许用户提交表单。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlerequired属性/title
/head
body
form action# methodget请输入姓名input typetext nameuser_name requiredrequired/input typesubmit value提交/
/form
/body
/html 7.4.4 新的表单属性
autocomplete属性用于指定表单是否有自动完成功能。
on表单有自动完成功能。 off表单无自动完成功能。
autocomplete属性示例代码
form idformBox autocompleteon
novalidate属性指定在提交表单时取消对表单进行检查。
novalidate属性示例代码
form actionform_action.asp methodget novalidatenovalidate
7.5 使用CSS 控制表单样式
在网页设计中表单既要具有相应的功能也要具有美观的样式使用CSS可以轻松控制表单控件的样式。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS控制表单样式/titlelink hrefstyle25.css typetext/css relstylesheet /
/head
bodyform action# methodpost pspan账号/spaninput typetext nameusername classnum pattern^[a-zA-Z][a-zA-Z0-9_]{4,15}$ //ppspan密码/spaninput typepassword namepwd classpass pattern^[a-zA-Z]\w{5,17}$//ppinput typebutton classbtn01 value登录//p/form
/body
/html
charset utf-8;
/* CSS Document */
body{font-size:18px; font-family:微软雅黑; background:url(images/timg.jpg) no-repeat top center; color:#FFF;}
form,p{ padding:0; margin:0; border:0;} /*重置浏览器的默认样式*/
form{width:420px;height:200px;padding-top:60px;margin:250px auto; /*使表单在浏览器中居中*/background:rgba(255,255,255,0.1); /*为表单添加背景颜色*/border-radius:20px;border:1px solid rgba(255,255,255,0.3);}
p{margin-top:15px; text-align:center;}
p span{width:60px;display:inline-block; text-align:right;}
.num,.pass{ /*对文本框设置共同的宽、高、边框、内边距*/ width:165px; height:18px; border:1px solid rgba(255,255,255,0.3);padding:2px 2px 2px 22px; border-radius:5px;color:#FFF;}
.num{ /*定义第一个文本框的背景、文本颜色*/background:url(images/3.png) no-repeat 5px center rgba(255,255,255,0.1);}
.pass{ /*定义第二个文本框的背景*/background: url(images/4.png) no-repeat 5px center rgba(255,255,255,0.1);}
.btn01{width:190px; height:25px; border-radius:3px; /*设置圆角边框*/ border:2px solid #000; margin-left:65px;background:#57b2c9;color:#FFF;border:none;} 7.6 阶段案例——信息登记表
为了使读者能够更好地运用表单控件本节将通过案例的形式分步骤制作一个信息登记表。
charset utf-8;
/* CSS Document */
body{font-size:12px; font-family:微软雅黑;} /*全局控制*/
body,form,input,h1,p{padding:0; margin:0; border:0; color:#fff;} /*重置浏览器的默认样式*/
.bg{width:1431px;height:717px;background:url(images/form_bg.jpg) no-repeat; /*添加背景图片*/position:relative; /*设置相对定位*/
}
form{width:600px; height:400px; margin:50px auto; /*使表单在浏览器中居中*/padding-left:30px; /*使边框和内容之间拉开距离*/position:absolute; /*设置绝对定位*/left:48%;top:10%;
}
h2{ /*控制标题*/text-align:center;margin:16px 0;
}
p{margin-top:20px;}
p span{width:75px; display:inline-block; /*将行内元素转换为行内块元素*/text-align:right; /*居右对齐*/padding-right:10px; }
p input{ /*设置所有的输入框样式*/width:200px; height:18px; border:1px solid #38a1bf;padding:2px; /*设置输入框与输入内容之间拉开一些距离*/
}
.lucky input{ /*单独设置幸运颜色输入框样式*/width:100px;height:24px;
}
.btn input{ /*设置两个按钮的宽高、边距及边框样式*/width:100px; height:30px;background:#fc7885;margin-top:20px; margin-left:75px; border-radius:3px; /*设置圆角边框*/font-size:18px;font-family:微软雅黑;color:#fff;
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title信息登记表/titlelink hrefstyle26.css relstylesheet typetext/css
/head
bodydiv classbgform action# methodget autocompleteoffh2信息登记表/h2pspan用户登录名/spaninput typetext nameuser_name valuemyemail163.com disabled readonly /不能修改只能查看/ppspan真实姓名/spaninput typetext namereal_name pattern^[\u4e00-\u9fa5]{0,}$ placeholder例如王明 required autofocus/必须填写只能输入汉字/ppspan真实年龄/spaninput typenumber namereal_lage value24 min15 max120 required/必须填写/ppspan出生日期/spaninput typedate namebirthday value1990-10-01 required/必须填写/ppspan电子邮箱/spaninput typeemail namemyemail placeholder123456126.com required multiple/必须填写/ppspan身份证号/spaninput typetext namecard required pattern^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$/必须填写以数字、字母x结尾的身份证号/ppspan手机号码/spaninput typetel nametelphone pattern^\d{11}$ required/必须填写/ppspan个人主页/spaninput typeurl namemyurl listurllist placeholderhttp://www.00000.cn pattern^http://([\w-]\.)[\w-](/[\w-./?%]*)?$/请选择网址datalist idurllistoptionhttp://www.aaaaa.cc/optionoptionhttp://www.bbbbb.cc/optionoptionhttp://www.ccccc.cc/option/datalist/pp classluckyspan幸运颜色/spaninput typecolor namelovecolor value#fed000/请选择你喜欢的颜色/pp classbtninput typesubmit value提交/input typereset value重置//p/form/div
/body
/html 本章小结
本章介绍了HTML5中两个重要的元素——表格与表单主要包括表格相关标签、表单相关控件以及如何使用CSS控制表格与表单的样式。在本章的最后通过表单控件并使用CSS对表单进行修饰制作一个常见的信息登记表。 通过本章的学习读者应该能够掌握表格和表单的用法熟练运用表格和表单组织页面元素。
