2-4-4 课件：英博特网站二三级页面-留言页面制作

来自：籽油荃面 > 馆藏分类

配色：

字号：大中小

2022-12-11 | 阅：转： | 分享

任务4：“英博特智能科技”企业网站二三级页面布局第二篇：项目实战篇4.4 留言页面制作4-4留言页面制作能力要求学习导览（1）了解表单功能
，能够快速创建表单。（2）掌握表单相关元素，能够准确定义不同的表单控件。（3）掌握表单样式的控制，能够美化表单界面。本次任务完成二
级子页面留言页面制作，包括搭建页面结构、插入表单元素、设置表单样式。留言页面主要用到文本字段、电子邮件、多行文本框、下拉列表框、提
交按钮等表单元素。4.4 留言页面制作（1）表单在网站中的作用是什么？工作过程是怎样的？

（2）表单元素主要分成哪些类型？常用的表单元素和表单属性有哪些？
（3）表单经
常设置的样式有哪些？
4.4 留言页面制作（1）表单作用表单（form）用于收集用户输入的信息，然后将用
户输入的信息提交到action属性所表示的程序文件中进行处理。表单有很多应用，如登录、注册、调查问卷、用户订单等。表单是一个包含表
单元素的区域，允许用户在表单中输入内容,比如：文本域、下拉列表、单选框、复选框等等。4.4 留言页面制作（2）表单工作过程①访问者
在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。②这些信息通过Internet传送到服务器上。③服务器上专门的程序对
这些数据进行处理，如果有错误返回错误信息，并要求纠正错误。④当数据完整无误后，服务器反馈一个输入完成信息。（3）表单代码 >与之间的表单控件是由用户自定义的，action、method为表单标记表单常用
属性如下表所示。4.4 留言页面制作（1）Input元素① 文本字段（input type="text/password"）。文本
字段可接受任何类型的字母数字项。输入的文本可以显示为单行文本框或密码框，其语法格式如下：? ame="textfield" id="textfield" />?② 复选框（input type="checkbox"）。复选框允许在一组选
项中选择多项，用户可以选择任意多个适用的选项。其语法格式如下：??③ 单选按钮（input type="radio"）。单选按钮代表互相排斥的选择。选
择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”按钮。其语法格式如下：? e="radio" name="radio" id="radio" value="radio" />4.4 留言页面制作（1）In
put元素④ 图像域（input type="image"）。“图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮
，以生成图形化按钮。其语法格式如下：??⑤ 文件域（input type="file"）。“文件域”在文档中插
入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。其语法格式如下：? ype="file" name="fileField" id="fileField">?⑥ 按钮（input type="subm
it/reset"）。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标
签之一。其语法格式如下：? ="提交">4.
4 留言页面制作（1）Input元素⑦ 电子邮件（input type=" email "）。“电子邮件”是一种专门用于输入E-m
ail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式。如果不符合，将提示相应错误信息。 type="email" />⑧ url地址（input type="tel"）。url类型的input元素是一种用于输入URL
地址的文本框。⑨ 电话号码（input type="tel"）。te
l类型用于提供输入电话号码的文本框，通常会和pattern属性配合使用。⑩ 搜索框（input type="search"）。search 类型是一种专
门用于输入搜索关键词的文本框，它能自动记录一些字符。右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。 e="search" name="searchtxt"/>4.4 留言页面制作（1）Input元素? 颜色框（input type
="color"）。color类型用于提供设置颜色的文本框，实现RGB颜色的输入，可以通过value属性值更改默认颜色。 t type="color" name="colorbox" value="#00ff00"/>? 数值框（input type=
" number "）。number类型用于提供输入数值的文本框。在提交表单时，会自动检查输入框中的内容是否为数字，如果不是数字或
者数字不在限定范围内，则会出现错误提示。 min="1" max="20" step="4"/>? 滑动条（input type=" range "）。range类型的i
nput元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条, value 属性用于设置或返回滑块控件的 value 属性值
。 step="4"/> 4.4 留言页面制作（1）Input元素? 时间日期（Date pickers）。HTML5中提供了多个可供
选取日期和时间的输入类型，用于验证输入的日期。时间和日期类型
如下表所示：4.4 留言页面制作（2）Input属性除了type属性之外，input 标记还定义了许多其他的属性，以实现不同的功能
。常用的input属性如下表所示：4.4 留言页面制作（3）其他表单元素① 列表/菜单（select和option）。“列表/菜
单”可以在列表中创建下拉菜单选项。size可以指定下拉菜单的可见选项数，定义multiple="multiple"时，下拉菜单将具
有多项选择的功能，定义selected =" selected "时，当前项即为默认选中项。其语法格式如下：4.4 留言页面制作（3）其他表单元素② 多行文本框
（textarea）。可以创建多行文本输入框，可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小。 tarea cols="每行中字符数" rows="行数"> 文本内容③ 选项列表（datalist）元素。
定义输入框的选项列表，列表通过datalist内的option元素进行创建。在使用datalist标记时，需要通过id属性为其指定
一个唯一的标识，然后绑定到input元素指定的list属性中，将该属性值设置为option元素对应的id属性值即可。请输入学生姓名
： ption>Jack 4.4 留言页面制作利用CSS控制表单样式，通过设置控制表单控件的字体、边框、背景和内外边距等使表单
的样式看上去更加美观大方。在使用input标记定义各种按钮时，通常需要清除其边框，要对文本框、密码框设置2到3像素的内边距，从而使
用户输入的内容不会紧贴着输入框。4.4 留言页面制作【示例代码】2-4-15.html：表单html代码。添加样式前4.4 留言页
面制作添加样式后具体要求见任务书4.4 留言页面制作运用本课学习的技术，根据效果图完成搜索框制作。要求有文字、图片，截图上传讨论区
。4.4 留言页面制作运用本课学习的技术，根据效果图完成登录框制作。要求有文字、图片，截图上传讨论区。4.4 留言页面制作运用本课学习的技术，根据效果图完成注册框制作。要求有文字、图片，截图上传讨论区。4.4 留言页面制作运用本课学习的技术，根据效果图完成评价页面制作。要求有文字、图片，截图上传讨论区。4.4 留言页面制作运用本课学习的技术，根据效果图完成购物车制作。要求有文字、图片，截图上传讨论区。4.4 留言页面制作完成在线测试题。运用本课学习的技术，完成搜索框、登录框、注册页面、评价页面和购物车页面效果（详见能力拓展）。4.4 留言页面制作旧书不厌百回读，熟读精思子自知。Web前端技术基础

献花(0)

(本文系籽油荃面原创)

类似文章 更多

发表评论：