前端设计与开发 课件 模块6 HTML5的表单及应用_第1页
前端设计与开发 课件 模块6 HTML5的表单及应用_第2页
前端设计与开发 课件 模块6 HTML5的表单及应用_第3页
前端设计与开发 课件 模块6 HTML5的表单及应用_第4页
前端设计与开发 课件 模块6 HTML5的表单及应用_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块6HTML5的表单及应用制作“读者会员注册”网页任务6.1任务描述随着数字化时代的来临，越来越多的读者倾向于在线获取图书资源、参与线上活动，以及享受个性化的阅读服务。为了更好地管理和服务这批用户群体，建立一个读者会员系统变得尤为重要。通过搭建基于HTML5技术的“读者会员注册”网页，可以方便、快捷地收集用户的个人信息，实现用户身份的认证与管理，从而为用户提供定制化的内容推送、积分管理、阅读记录保存等一系列功能。任务分析通过对本任务的学习，了解HTML5表单的结构与功能，能够利用所学知识制作“读者会员注册”网页。相关知识6.1.1表单及创建方法表单是一种特殊的网页容器标签。用户既可以插入各种普通的网页标签，也可以插入各种表单交互组件，从而获取用户输入的文本，或者选择某些特殊项目等信息。一个表单有三个基本组成部分：表单标签、表单域（表单控件）、表单按钮。（1）表单标签：包含了处理表单数据所用的URL及数据提交到服务器的方式。（2）表单域（表单控件）：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。（3）表单按钮：包括提交按钮、复位（重置）按钮和一般按钮；用于将数据传送到服务器上或取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。表单标签为<form></form>，表单的基本语法如下。表单标签与基本语法<formaction="url"method="get|post"></form>6.1.2input元素及用法input元素用来定义输入控件。它可以实现各种各样的表单控件效果。根据不同的type属性值，输入字段拥有很多种形式，可以是文本字段、密码框、复选框、单选按钮、普通按钮、提交按钮等。1.文本框HTML5中的文本框表单域HTML5中添加"文本框"表单域，用于用户输入单行文本，如姓名、年龄、地址文本框表单域的属性type属性定义文本框类型，name定义名称，size定义宽度，maxlength定义最大字符数，value定义初始值2.密码框密码文本域用于安全输入，显示为星号或圆点，保护用户密码可见性密码文本域的作用与特性<inputtype="password"name="..."size="..."type定义属性的类型，size设置宽度，maxlength设置最大字符数表单密码元素的语法与属性"提交"按钮用于提交表单，语法格式是：<inputtype="submit"name="..."value="...">4.提交按钮<button>定义可点击按钮，需通过onclick属性与JavaScript脚本结合以实现功能3.普通按钮5.重置按钮重置按钮主要用于恢复表单中的信息。<inputtype="reset"name="..."value="...">6.复选框复选框是一种允许用户同时选择多项内容的选择性表单对象，它在浏览器中以矩形框进行表示。在插入复选框时，用户可以先插入一个域集，再将复选框或复选框组插入域集，以表示为这些复选框添加标题信息。7.单选按钮单选按钮也是一种选择性表单对象，它以组的方式出现，只允许用户同时选中其中一个单选按钮。当用户选中某个单选按钮时，其他单选按钮将自动转换为未选中状态。6.1.3其他表单元素1.textarea元素通过textarea元素可以定义文本区域，用于需要大量文字的地方，如留言、自我介绍等。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。2.select元素和option元素通过<select>元素可以定义下拉列表，通过<option>元素可以定义下拉列表中的选项。6.1.4HTML5新的表单属性HTML5引入了许多新的表单属性，这些属性为开发者提供了更多的控制和功能，使得创建和处理表单变得更加简单和灵活1.新增input元素属性

1）required属性required属性用于指定一个输入字段是否必须填写。当用户提交表单时，如果该字段未填写，则浏览器会显示一个提示消息，要求用户填写该字段。这个属性可以应用于各种类型的输入元素，如文本框、选择框等。autocomplete属性规定表单是否应该启用自动完成功能。当用户在某些文本框中输入过一些内容时，如果再次在这些文本框中输入内容，则这些文本框会出现一个下拉框显示出以前输入过的内容。它适用于text、search、url、tel、email、password、datepickers、range以及color等表单输入类型。2）autocomplete属性3）autofocus属性autofocus属性可以在页面加载时使某个表单控件自动获得焦点，它适用于text、checkbox、radio和button等表单输入类型。4）placeholder属性placeholder属性用于在输入字段中显示一个占位符文本，以指导用户如何填写该字段。当用户开始输入内容时，占位符文本会自动消失。这个属性对于提供清晰的输入指示非常有用，尤其是在复杂的表单中。它适用于text、search、url、tel、email以及password等表单输入类型。5）list属性list属性规定输入域的datalist，datalist是输入域的选项列表。它适用于text、search、url、tel、email、datepickers、number、rang以及color等表单输入类型。6）pattern属性pattern属性允许用户定义一个正则表达式模式，用于验证输入字段的值是否符合预期的格式。例如，可以使用pattern属性来限制用户输入的电话号码格式或电子邮件地址格式。如果输入的值不符合指定的模式，则浏览器会显示一个错误消息。pattern属性描述了一个正则表达式，用于验证input元素的值。它适用于text、search、url、tel、email、和password等表单输入类型。HTML5中新增了form元素的novalidate属性，该属性规定在提交表单时不应该验证form或input域。2．form元素新增的属性任务规划通过HTML5技术制作“读者会员注册”网页的主要目标是建立一个高效、安全且符合现代互联网标准的用户入口，便于图书馆、电子书店或其他阅读类服务平台吸引、保留和发展高质量的读者群。任务实施（1）打开开发工具VSCode，在本地磁盘中新建项目文件夹，并命名为reading。（2）在VSCode中打开项目文件夹reading，在该项目文件夹上右击，在弹出的快捷菜单中选择“新建文件”命令，在文本框中输入文件的名称“register.html”，然后按Tab键或Enter键完成HTML文件的创建。（3）单击register.html文件，进入代码编辑窗口。在<title></title>标签对中设置网页的标题为“读者会员注册”，并引入外部样式表。（4）在<body></body>标签对中添加<div></div>标签对，并在<div></div>标签对内添加表单<form></form>标签对，以及一级标题“读者会员注册”。（5）在<form></form>标签对中添加一组<div></div>标签对，在<div></div>标签对中添加<label></label>标签对和<input>标签，分别用来放置用户名及输入用户名的文本框，并设置各标签相关属性。（6）仿照步骤（5），在<form></form>标签对中继续添加3组<div></div>标签对，分别用来放置邮箱地址及输入邮箱地址的文本框、密码及输入密码的文本框、确认密码及输入确认密码的文本框，并设置好相关属性。任务实施（7）在<form></form>标签对中再次添加一组<div></div>标签对，在<div></div>标签对中放置复选框，以及“我已阅读并同意《用户协议》和《隐私政策》”。（8）在<form></form>标签对中添加一组<button></button>标签对定义提交按钮，按钮上显示文字“立即注册”。（9）在VSCode中打开项目文件夹story，并在该项目文件夹上右击，在弹出的快捷菜单中选择“新建文件夹”命令，在出现的文本框中输入文件夹的名称“c

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论