工信版（中职）Web前端设计基础 项目五-2电子课件.pptx

《工信版（中职）Web前端设计基础 项目五-2电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目五-2电子课件.pptx（15页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目五-2电子课件网页中的表单项目五授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备表单概述；表单高级元素。表单基本元素；表单其他元素；表单其他元素表单其他元素如表所示。标签标签含义含义说明说明textarea多行文本输入框主要用于输入较长的文本信息。select下拉列表框下拉列表是一种简单的带有预选值的下拉列表，能够在有限空间设置多个选项表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。入库单bodyline-height:30px;入库单入库

2、产品编号：表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。请选择所入仓库：仓库一仓库二仓库三请选择经手库管员：张金红李颖王占坤 入库原因：填写货物来源创建了一个下拉列表，下拉列表是一种简单的带有预选值的下拉列表，能够在有限空间设置多个选项，由和这两个标签配合使用，表示整个列表，表示一个列表项，Value属性表示选项值，Selected表示是否被选中。创建了一个可以同时显示三条记录的列表，它的写法与仓库列表类似，不同之处是在select标签后面加上size属性：，表示下拉列表展开，可见列表项数目为3。创建了一个文本区域，标签是，rows属性定义文本框的高度，co

3、ls属性定义文本框的宽度，单位是单个字符数。表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。在chrome浏览器中预览表单高级元素input标签还有一些高级应用，如表所示。type值值含义含义说明说明urlURL地址输入框要求输入网站网址，在提交表单时，会自动验证是否是URL地址。emailemail地址输入框要求输入email地址，在提交表单时，会自动验证是否是email地址。date 日期选择框选择一个日期。time时间选择框选择一个时间。number数字输入框用户可以直接输入数字，也可以通过上下箭头选择数字。range滑条控件可以通过滑块选择合适的数值。

4、表单高级元素【例5-5】将上例的入库单继续完善一下，修改成如图所示效果，增加了入库日期、入库时间、入库数量、入库产品合格率等内容（示例文件5-5.html）。表单高级元素【例5-5】将上例的入库单继续完善一下，修改成如图所示效果，增加了入库日期、入库时间、入库数量、入库产品合格率等内容（示例文件5-5.html）。在【例5-4】的26行之后插入如下代码：入库日期：入库时间：入库数量：入库产品合格率：创建了日期选择框，type属性值为date，用户单击输入框中的向下按钮，即可在弹出的窗口中选择需要的日期，也可以通过微调按钮选择日期。创建了时间选择框，type属性值为time，用户可以直接输入时间

5、，也可以点击右侧的微调按钮，选择时间。创建了数字选择框，type属性值为number，用户可以直接输入数字，也可以单击微调按钮上下选择合适的数值。创建了一个滑块控件，type属性值为range，min属性表示滑块的最小数值，max属性值表示滑块的最大数值，step属性表示滑块梯度的大小。表单高级元素【例5-6】验证URL地址和email地址的功能实例，代码如下所示（示例文件5-6.html）。验证地址bodyline-height:30px;验证一个网址：验证邮箱地址：创建了URL地址输入框，type属性值为url，如果在此输入的不是网站地址，当单击提交按钮时，会弹出错误提示。required

6、属性值为“required”，表示该项不能为空，用户如果没填写这一项，就单击“提交”按钮，将弹出提示信息。创建了email地址输入框，type属性值为email，如果在此输入的不是邮箱地址，在提交表单时，会弹出错误提示。表单高级元素【例5-6】验证URL地址和email地址的功能实例，代码如下所示（示例文件5-6.html）。在chrome浏览器中预览作业一、选择题1.下列_标签可以实现表单中的下拉列表框功能。A textarea B checkbox C select D text2._表单域适合输入一段文字内容。A textarea B checkbox C radio D text3.在input标签的高级应用中，type=“date”表示_。A 要求输入网站网址 B 要求输入email地址C 选择一个日期 D 通过滑块选择合适的数值二、上机实训上机完成例5-4和例5-6的实例操作。End