网页基础开发教程 13

项目8制作企业网站登录注册表单表单理解表单在网页中的作用和重要性。掌握表单的基本标记和控件的使用。学习如何使用CSS来定义和美化表单样式。实现一个功能完整、用户友好的注册表单。任务描述知识准备任务实现任务小结任务测试与考核实训制作企业介绍页面1.HTML结构（1）创建一个注册表单的结构，包括用户名、密码、确认密码等输入字段，注册提交按钮，一个用户需要同意隐私政策和服务条款的复选框，一个跳转到登录页面的链接；（2）创建一个登录表单的结构，包括用户名、密码的输入字段，一个自动登录的复选框，一个链接到忘记密码页面的选项和一个跳转到到注册界面的链接。2.CSS样式（1）设置所有元素的外边距和内边距为0；（2）设置表单的宽度380px、高度390px、内边距为30px、居中显示；（3）设置整体字体类型和默认字体大小；（4）设置表单元素的边框、边距、阴影等样式；（5）设置背景颜色和背景图片；（6）设置按钮和链接的样式，包括悬停效果。任务描述任务描述知识准备任务实现任务小结任务测试与考核实训认识表单表单标记<input>控件其他表单控件使用CSS定义表单知识准备：认识表单1.认识表单：

表单是HTML中用于收集用户输入的区域，通过<form>标签定义。表单的主要功能是将用户输入的数据传递给服务器进行处理。一个完整的HTML表单由以下几部分组成：（1）表单域（<form>标记）：定义表单的容器，包括表单的提交方式和提交到的URL。（2）表单控件：如<input>、<textarea>、<select>等，用于收集用户输入的数据。（3）提交按钮：如<button>、<inputtype=“submit”>等，用于将表单数据发送到服务器。（4）提示信息：表单控件周围用于提示用户输入内容的文字。如下就是一个完整的表单页面：表单认识表单表单标记<input>控件其他表单控件使用CSS定义表单知识准备2：表单标记1.表单概述

在HTML中，表单的主体由<form>标签定义，它是一个块级元素，用于包裹表单控件和相关元素。<form>标签是创建表单的基础容器，通过它可以将输入框、按钮、选择框等表单控件组织在一起，实现数据的收集和提交功能。<form>标签的语法格式如下：<formaction="提交地址"method="提交方式"><!--表单控件和其他内容--></form><form>标签具有多个重要的属性，这些属性决定了表单的行为和功能，常用的属性说明如下：属性名称说明action指定表单数据提交到的服务器地址。当用户点击提交按钮时，表单中的数据会发送到该地址。如果未指定，则默认提交到当前页面的URL。method指定表单数据提交的方式，常见的值为

GET

和

POST。GET

方法会将表单数据附加到URL中，适合简单查询；POST

方法则将数据放在请求体中，适合处理敏感信息或大量数据。name为表单指定一个名称，便于在JavaScript中通过

document.forms

访问该表单。enctype指定表单数据的编码类型，默认值为

application/x-www-form-urlencoded。如果表单包含文件上传功能，则需要设置为

multipart/form-data。autocomplete控制表单是否启用自动填充功能。常见的值为

on（允许自动填充）和

off（禁止自动填充）。novalidate如果设置该属性，则浏览器不会对表单进行验证，通常用于测试或自定义验证逻辑。2.表单案例例8-1启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-1.html，效果图如下：知识准备2：表单标记

浏览网页效果如图8-4表单提交示例效果图所示，页面展示了一个登录表单，表单的提交地址未指定，则默认提交到当前页面的URL，提交方式为GET。表单中有两个输入框，分别用于输入用户名和密码，均设置为必填项。表单提交后，用户名和密码会附加到URL中发送到指定地址。部分代码如下：<formaction=""method="get">

<inputtype="text"name="username"placeholder="用户名"required><br>

<inputtype="password"name="password"placeholder="密码"required><br>

<buttontype="submit">登录</button>

</form>表单标记认识表单表单标记<input>控件其他表单控件使用CSS定义表单知识准备3：<input>控件

1.<input>控件

表单控件是用户与表单交互的界面元素。常见的表单控件包括文本框、密码框、单选按钮、复选框、下拉列表、按钮等。表单控件通过<input>、<textarea>、<select>等HTML标记实现。<input>控件即<input>标记，是表单中最为核心的控件，使用<input>标记可以定义很多控件，如文本框、密码框、复选按钮、单选按钮、提交按钮、重置按钮等。其语法格式如下：<input/>标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除type属性外，<input>标记还可以定义其他的属性，如表8-3所示。其中id、name和value是最常用且重要的属性。<inputtype="控件类型"id="id名"name="name名"value="默认值"/>id：用于标识表单控件的唯一性，方便CSS和JavaScript操作name：用于指定表单控件的名称，服务器通过该名称获取表单数据value：设置表单控件的默认值知识准备3：<input>控件

1.<input>控件input控件的type属性属性属性值描述typetext单行文本输入框password密码输入框checkbox复选框radio单选按钮submit提交按钮reset重置按钮button普通按钮file文件域hidden隐藏域image图像按钮emailE-mail地址输入域urlURL地址输入域number数值输入域range一定范围内数字的输入域date、datetime-local、month、week、time、datetime日期和时间输入类型search搜索域tel电话号码输入类型color颜色输入类型知识准备3：<input>控件

1.<input>控件input的控件的其他属性属性属性值描述id字符串指定控件的IDname字符串指定控件的名称value字符串设置控件的默认值size正整数输入控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled加载页面时禁用该控件checkedchecked定义选择控件默认被选中的项maxlength正整数指定允许输入的最大字符数onoffon/off指定页面加载后是否自动获取焦点autofocusautofocus指定字段获取第一个或前几个菜单form字符串指定字段隶属于哪个form元素的id知识准备3：<input>控件

2.Type属性(1）文本框

文本框用于输入单行文本，通过<input>标签的type="text"属性创建。其基本语法格式如下：

示例：创建文本框<inputtype="text"id="id名"name="name名"value="默认值"><labelfor="username">用户名：</label><inputtype="text"id="username"name="username"value="请输入用户名">

(2）密码框

密码框用于输入密码，通过<input>标签的type="password"属性创建。其基本语法格式与文本框类似：

密码框的特点是输入的内容会以点或星号显示，以保护用户隐私。（3）单选按钮单选按钮用于从一组选项中选择一个选项，通过<input>标签的type=“radio”属性创建。其基本语法格式如下：<inputtype="password"id="password"name="password"><inputtype="radio"id="option1"name="group1"value="option1"><labelfor="option1">选项1</label><inputtype="radio"id="option2"name="group1"value="option2"><labelfor="option2">选项2</label>知识准备3：<input>控件

2.Type属性(4）复选框复选框用于从一组选项中选择多个选项，通过<input>标签的type="checkbox"属性创建。其基本语法格式如下：

示例：创建文本框<inputtype="checkbox"id="option1"name="option1"value="option1"><labelfor="option1">选项1</label><inputtype="checkbox"id="option2"name="option2"value="option2"><labelfor="option2">选项2</label>(5）按钮按钮用于提交表单或执行其他操作，通过<input>标签的type="submit"、type="reset"或type="button"属性创建。其基本语法格式如下：

<inputtype="submit"value="提交"><inputtype="reset"value="重置"><inputtype="button"value="普通按钮">复选框的特点是用户可以同时选择多个选项。

type="submit"：提交按钮，点击后将表单数据提交到服务器。

type="reset"：重置按钮，点击后将表单恢复到初始状态。

type="button"：普通按钮，需要结合JavaScript实现其他功能。2.

<input>控件常用的type属性例8-2启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-2.html，效果图如下：知识准备3：<input>控件从图中可以看出，界面中添加了单行文本输入框、单选按钮、数值输入域、日期输入类型、复选框、文件域、提交按钮等类型的input控件。<input>控件认识表单表单标记<input>控件其他表单控件使用CSS定义表单知识准备4：其他表单控件

除了input控件之外，HTML还提供了其他多种表单控件以满足不同的交互需求。当用户需要输入大段文本内容时，可以使用textarea控件；而需要创建下拉选择列表时，则应当使用select标签及其配套的option标签来实现。1.<textarea>控件<textarea>是HTML表单中的多行文本输入控件，适用于评论、描述等较长内容的输入。与单行输入框<inputtype="text">不同，它支持多行文本、自定义尺寸（行/列）、占位提示（placeholder）及动态调整大小，提供更灵活的文本输入方式。其语法格式如下：其中cols是指多行文本框的每行字符数，rows是指显示的行数。这两项是标签的必填属性。2.<select>控件<select>是HTML表单的下拉选择控件，用于从预设选项中选择（如地区、分类）。通过<option>定义选项，支持单选、多选（multiple）和分组（<optgroup>），能规范输入并提高交互效率。其基本语法格式如下：<textareacols="每行字符数"rows="行数">

文本内容...</textarea><select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>3.其他表单控件例8-3启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-3.html。在demo8-2.html代码的基础上，添加<textarea>控件和<select>控件

，效果图如下：知识准备4：其他表单控件从图中可以看出，在界面中添加了“学历”和“部门”两个下拉列表<select>控件和“个人特点”文本域<textarea>控件。其他表单控件认识表单表单标记<input>控件其他表单控件使用CSS定义表单1.

定义表单样式案例例8-4启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-4.html，效果图如下：知识准备5：使用CSS定义表单样式从图中可以看出，界面中只有表单标记，并没有任何的css样式设置，看起来并不美观。为了使表单界面美观，下面引入外部式CSS样式对界面进行修饰。1.定义表单样式案例将上述8-4案例选择已有目录文件夹（例如，chapter08文件夹下的css文件夹），新建css文件，命名为demo8-4.css，效果图如下：知识准备5：使用CSS定义表单样式

如图使用CSS定义表单样式示例效果图所示，从图可以看出，使用了CSS定义表单样式之后比之前看起来美观一些。其他表单控件任务描述知识准备任务实现任务小结任务测试与考核实训制作企业网站注册页面创建项目

在VSCode中打开chapter08文件夹，新建LoginHub子文件夹。在其中创建08-login.html、08-register.html、images文件夹和css文件夹。css文件夹中需包含08-login.css和08-register.css文件。2.实现注册界面模块的制作（1）首先，对CSS样式进行初始化设置，以消除不同浏览器默认样式的影响，从而提高开发效率。主要设置如下：清除所有元素内外边距；统一字体为Arial或无衬线字体；去除列表标记；设置固定居中背景图，覆盖整个视口；启用弹性布局，子元素居中对齐；高度设为100vh。（2）将08-register.css样式引入08-register.html页面。（3）实现欢迎注册头部模块制作（4）实现注册表单模块制作（5）实现同意隐私政策和服务条款复选框模块设置3.代码截图如下所示任务描述制作企业网站注册页面任务描述制作企业网站注册页面任务描述制作企业网站注册页面任务描述效果图如下制作企业网站登录页面实现登录界面模块的制作（1）首先，对CSS样式进行初始化设置，以消除不同浏览器默认样式的影响，从而提高开发效率。主要设置如下：字体：Arial或无衬线字体；列表：无标记；背景：固定居中全屏覆盖；布局：弹性盒子居中对齐；尺寸：100vh高度，0外边距（2）将08-login.css样式引入08-

login.html页面。（3）实现logo模块制作（4）实现登录选项模块（5）实现登录form表单模块制作（6）实现查看隐私和注册账号链接模块设置3.部分代码截图如下所示通用样式设置代码放置于08-register.css文件中，任务描述制作企业网站登录页面任务描述制作企业网站登录页面任务描述制作企业网站登录页面任务描述效果图如下图表单控件任务描述知识准备任务实现任务小结任务测试与考核实训表单一、单选题1.下列选项中，用来定义下拉列表的标记是（

）A．<input/>B．<textarea></textarea>C．<select></select>D．<form>2.下列选项中,可以实现邮箱验证的是()A．<inputtype="text"/>B．<inputtype="email"/>C．<inputtype="password"/>D．<inputtype="button"/>3.下列选项中,可以设置表单提交按钮的是()A．<inputtype="color"/>B．<inputtype="url"/>C．<inputtype="submit"/>D．<inputtype="file"/>4.下列选项中,可以实现表单元素重置功能的是()。A．<inputtype="password"/>B．<inputtype="email"/>C．<inputtype="reset"/>D．<inputtype="submit"/>5.在HTML中，要创建一个表单（form1），要向服务器发送数据的方式为post，提交表单服务器的地址为process.asp。下面创建表单正确的代码是（）A．<formname=”form1”method=”post”submit=”process.asp”><form>B．<formname=”form1”method=”post”submitSrc=”process.asp”><form>C．<formname=”form1”method=”post”action=”process.asp”><form>D．<formname=”form1”method=”post”src=”process.asp”><form>表单二、填空题1．在HTML表单中，______控件用于输入单行文本，例如用户名、密码等。2．当需要用户输入多行文本，如评论、描述等内容时，应使用______控件。3．______控件通常用于从一组预设的选项中选择一个值，例如选择性别、国籍等。4．如果希望input控件显示为密码输入框，应将其type属性设置为______。5．在select控件中，______标签用于定义一个选项，其value属性用于指