HTML5+CSS3 Web前端开发项目化教程 课件 项目6 表单页面制作

《HTML5+CSS3web前端开发项目化教程》

项目6表单页面制作目录Contents任务6.2制作后台管理页面02任务6.1制作登录、注册页面01教学目标 掌握表单元素及相关属性

熟悉表格相关标签

理解属性选择器的用法1.知识目标能够使用表单元素制作表单并使用CSS美化表单

能够使用表格标签制作表格并使用CSS美化表格

能够使用属性选择器选择元素2.技能目标 树立网络安全意识培养团队合作精神

遵守代码规范性要求，养成良好的代码编写习惯3.素养目标1任务6.1制作登录、注册页面效果展示登录、注册页面在网上随处可见。本任务使用表单元素完成登录、注册表单的制作，并通过CSS控制表单元素的边框、背景、内边距等样式，制作美观的表单页面。知识储备input元素2其他表单元素3表单概述1属性选择器4目录Contents知识储备1.表单概述表单是网页中的一个重要元素，主要用来收集访问者的信息，并将信息发送给服务器端程序进行处理，从而实现访问者与网站之间的信息交互。常见的表单有：登录表单、注册表单、网上调查表等。知识储备1.表单概述以注册页面为例，分析表单的构成。提示信息表单域表单控件一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作。相当于一个容器，用来容纳所有的表单控件和提示信息。包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。知识储备1.表单概述<formaction="表单处理程序url地址"method="get|post"name="表单名称">表单元素<!--此处为各种表单元素--></form><form></form>标签用来创建表单。语法格式如下：其中，action、method和name为表单标签<form>的常用属性。2.创建表单action属性

action：用于指定接收并处理表单数据的服务器程序的url地址。method属性method：用于设置表单数据的提交方式，取值为get或post。

name属性

name：用于指定表单的名称，以区分一个页面中的多个表单知识储备学习表单的核心就是学习表单元素，HTML语言提供了一系列的表单元素，用于定义不同的表单功能，如密码输入框、文本域、下拉列表、复选框等。知识储备表单元素有input元素、textarea元素、select元素、datalist元素等。Select元素input元素textarea元素datalist元素知识储备2.input元素<input/>元素是表单中最常见的元素，网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。<inputtype="元素类型"/><input/>标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的元素类型。知识储备2.input元素属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域name由用户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数input元素及其属性知识储备2.input元素type=“text”表示文本框，常用来输入简短的信息，如用户名、账号、证件号码等；type=“password”表示密码框，用来输入密码，其内容将以圆点的形式显示。例如：文本框和密码框知识储备2.input元素radio类型表示单选按钮，用于单项选择，如选择性别、是否操作等。页面中以圆框表示。单选按钮checkbox类型表示复选框，常用于多项选择，如选择兴趣、爱好等，复选框在页面中以一个方框来表示。复选框知识储备2.input元素name属性用来区分单选按钮或复选框是否处于一组，所以处于一组的单选按钮或复选框name值必须相同。value属性用来设置用户选中该项目后，传送到处理程序中的值，处于一组的单选按钮或复选框value值必须不同。checked属性表示该项默认被选中，一组单选按钮中只能有一项被选中。一组复选框中可以有一项或多项被选中。单选按钮和复选框知识储备2.input元素type="button"表示普通按钮；type="submit"表示提交按钮，单击完成表单数据的提交；type="reset"表示重置按钮，用来清除已输入的所有表单信息；type="image"表示图像按钮，用图像替代了默认的按钮，外观上更加美观。按钮普通按钮一般情况下要配合JavaScript

脚本来进行表单处理。例如，在button中添加onclick

属性用来实现当鼠标按下按钮时所进行的处理。图像按钮

src表示图像的路径。知识储备2.input元素当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。在设置电子邮件的附件、上传头像、发送文件时常常会用到这一元素。文件域知识储备2.input元素隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示，通常用于后台的程序。当用户提交表单时，隐藏域的内容会一起提交给处理程序。<inputtype="hidden"/>隐藏域知识储备2.input元素email类型是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。不输入不验证。email类型url类型的input元素是一种用于输入url地址的文本框。如果所输入的内容是url地址格式的文本，则会提交数据到服务器，否则不允许提交，并有提示信息。不输入不验证。url类型知识储备2.input元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。其属性有：

min：规定最小值

max：规定最大值

step：规定变化步长，默认值1

value:默认值 number类型用于提供一定范围内数值的输入范围，在网页中显示为滑动条。常用属性同number类型。range类型知识储备2.input元素是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期。Datepickers类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。search类型知识储备2.input元素用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。email类型用于提供输入电话号码的文本框，通常和pattern属性配合使用。tel类型知识储备2.input元素input元素还有其他的一些属性，具体如下表所示：属性属性值描述readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）placeholder字符串文本框中显示的输入提示信息requiredrequired规定输入框填写的内容不能为空autofocusautofocus指定页面加载后是否自动获取焦点form

form元素的id设定字段隶属于哪一个或多个表单listdatalist元素的id指定字段的候选数据值列表min、max和step数值规定输入框所允许的最大值、最小值及间隔pattern字符串验证输入的内容是否与定义的正则表达式匹配知识储备2.input元素该表单元素内容为只读（不能编辑修改）。readonly属性第一次加载页面时禁用该元素（显示为灰色）。disabled属性当文本框处于未输入状态时，其中默认显示的提示信息placeholder属性input元素其他属性知识储备2.input元素input元素其他属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。required属性用于指定页面加载后自动获取焦点，一个页面只能有一个控件使用该属性，一般应用于文本框。autofocus属性知识储备2.input元素input元素其他属性HTML5中的form属性，可以把表单内的子元素写在页面中的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。form属性用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。list属性知识储备2.input元素新增属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。pattern属性input元素其他属性知识储备3.其他表单元素新增属性浏览网页时，经常会看到包含多个选项的下拉菜单，如选择所在的城市、出生年月等。使用select元素可以定义下拉菜单。其基本语法如下：

1.select元素基本语法格式<selectsize=""multiple><optionvalue=""selected>选项1</option><optionvalue="">选项2</option>...</select>【属性】size指定下拉菜单的可见选项数（取值为正整数），multiple表示可以多选，若不需要多选，可不设置该属性。option元素表示菜单项，selected属性表示当前项为默认选中项。知识储备3.其他表单元素新增属性基本语法格式<textareacols=“每行中的字符数”rows=“显示的行数“value=“默认值”>

文本内容</textarea>多行文本输入框，可以输入多行文字。cols和rows为textarea元素的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，取值均为正整数。value为默认值。2.textarea元素知识储备3.其他表单元素新增属性datalist

元素用于定义输入框的选项列表，列表通过datalist的option元素进行创建，如果用户不希望从列表中选择某项，也可以自行输入其他内容。datalist元素通常与input元素配合使用。在使用datalist元素时，需要通过

id属性为其指定唯一标识，然后为input元素指定list属性，该属性设置为datalist元素的id属性值。3.datalist元素知识储备4.属性选择器新增属性属性选择器可以根据元素的属性及属性值来选择元素。选择具有att属性，且属性值以value结尾的E元素E[att$=value]选择具有att属性，且属性值包含value的E元素E[att*=value]选择具有att属性，且属性值等于value的E元素E[att=value]选择具有att属性，且属性值以value开头的E元素E[att^=value]选择具有att属性的E元素。E[att]注意：

E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。知识储备4.属性选择器新增属性p[id]：选择具有id属性的<p>元素，p1、p2、p3、p4被选取，文字颜色为绿色。p[id="demo1"]：选择具有id属性且属性值为"demo1"的<p>元素，p1被选取，p1文字倾斜。p[id^="demo"]：选择具有id属性且属性值以"demo"开头的<p>元素，p1、p2被选取。p[id$="demo"]：选择具有id属性且属性值以"demo"结尾的<p>元素，p3、p4被选取。[id*="demo"]：选择具有id属性且属性值包含"demo"的元素，p1、p2、p3、p4、box被选取。知识储备4.属性选择器新增属性使用CSS可以轻松地控制表单元素的样式，主要体现在控制表单元素的字体、边框、背景和内边距等。知识导图任务分析<lable><p><button>（2）密码框里的“眼睛”图标如何实现？<a>（1）登录、注册页面样式一致，可以用外部样式表统一设置。可以设置密码框的背景图像，再通过背景位置进行精确控制。或者对眼睛图标进行绝对定位<form>提示信息表单元素<form><h1>任务实施任务实施2任务6.2制作后台管理页面效果展示知识储备对于表格大家并不陌生，如课程表、列车时刻表等。表格一般用来存放数据，每个表格均有若干行，每行被分割为若干单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等1.表格标签知识储备1.表格标签<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。知识储备1.表格标签<tr>定义表格的行。<td>定义表格中的单元格。<th><th>：定义表格的表头，一般位于首行或首列，文字以粗体居中显示。<table>定义表格。<caption>定义表格标题，放在<table>标签内，在<tr>标签前。HTML中，与表格有关的标签如下：知识储备1.表格标签<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。为了使搜索引擎更好地理解网页，可以将表格结构划分为页眉、主体和页脚。一个表格只能定义一对<thead>、一对<tfoot>，但是可以定义多对<tbody>。使用表格的结构划分标记后，搜索引擎可以更好地理解网页内容，但表格的实际显示效果并不会改变。知识储备1.表格标签一般是通过CSS更方便地控制表格样式，让表格看起来更加精致。常用设置如下：（1）使用width

和height

属性设置表格及单元格的宽度和高度；（2）使用border属性设置表格及单元格的边框；（3）使用border-collapse

属性设置表格边框合并，即细线表格效果；（4）使用

padding属性设置单元格内容与边框之间的距离；（5）使用background

属性设置表格及单元格的背景样式。知识导图任务分析任务6.2制作后台管理页面<header>、<container>、<foote