网站设计与网页制作立体化项目教程（第4版） 课件 2-4-4 课件：英博特网站二三级页面-留言页面制作

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

（2）表单元素主要分成哪些类型？常用的表单元素和表单属性有哪些？

（3）表单经常设置的样式有哪些？

4.4留言页面制作表单（1）表单作用表单（form）用于收集用户输入的信息，然后将用户输入的信息提交到action属性所表示的程序文件中进行处理。表单有很多应用，如登录、注册、调查问卷、用户订单等。表单是一个包含表单元素的区域，允许用户在表单中输入内容,比如：文本域、下拉列表、单选框、复选框等等。4.4留言页面制作（2）表单工作过程①访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。②这些信息通过Internet传送到服务器上。③服务器上专门的程序对这些数据进行处理，如果有错误返回错误信息，并要求纠正错误。④当数据完整无误后，服务器反馈一个输入完成信息。表单（3）表单代码<form>与</form>之间的表单控件是由用户自定义的，action、method为表单标记<form>的常用属性。<formaction="url地址"method="提交方式"name="表单名称">

各种表单控件</form>表单常用属性如下表所示。4.4留言页面制作表单元素（1）Input元素①文本字段（inputtype="text/password"）。文本字段可接受任何类型的字母数字项。输入的文本可以显示为单行文本框或密码框，其语法格式如下：

<inputtype="text"name="textfield"id="textfield"/><inputtype="password"name="textfield"id="textfield"/>

②复选框（inputtype="checkbox"）。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。其语法格式如下：

<inputtype="checkbox"name="checkbox"id="checkbox"/>

③单选按钮（inputtype="radio"）。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”按钮。其语法格式如下：

<inputtype="radio"name="radio"id="radio"value="radio"/>4.4留言页面制作表单元素（1）Input元素④图像域（inputtype="image"）。“图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。其语法格式如下：

<inputtype="image"name="imageField"id="imageField"src="images/1-1.png">

⑤文件域（inputtype="file"）。“文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。其语法格式如下：

<inputtype="file"name="fileField"id="fileField">

⑥按钮（inputtype="submit/reset"）。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。其语法格式如下：

<inputtype="submit"name="button"id="button"value="提交"><inputtype="reset"name="button"id="button"value="重置">4.4留言页面制作表单元素（1）Input元素⑦电子邮件（inputtype="email"）。“电子邮件”是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式。如果不符合，将提示相应错误信息。<inputtype="email"/>⑧url地址（inputtype="tel"）。url类型的input元素是一种用于输入URL地址的文本框。<inputname="url"type="url"/>⑨电话号码（inputtype="tel"）。tel类型用于提供输入电话号码的文本框，通常会和pattern属性配合使用。<inputtype="tel"name="telphone"pattern="^\d{11}$"/>⑩搜索框（inputtype="search"）。search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。<inputtype="search"name="searchtxt"/>4.4留言页面制作表单元素（1）Input元素⑪颜色框（inputtype="color"）。color类型用于提供设置颜色的文本框，实现RGB颜色的输入，可以通过value属性值更改默认颜色。<inputtype="color"name="colorbox"value="#00ff00"/>⑫数值框（inputtype="number"）。number类型用于提供输入数值的文本框。在提交表单时，会自动检查输入框中的内容是否为数字，如果不是数字或者数字不在限定范围内，则会出现错误提示。<inputtype="number"name="number1"value="1"min="1"max="20"step="4"/>⑬滑动条（inputtype="range"）。range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条,value属性用于设置或返回滑块控件的value属性值。<inputtype="range"name="number1"value="1"min="1"max="20"step="4"/>4.4留言页面制作表单元素（1）Input元素⑭时间日期（Datepickers）。HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期。<inputtype=date,month,week…"/>时间和日期类型如下表所示：4.4留言页面制作表单元素（2）Input属性除了type属性之外，input标记还定义了许多其他的属性，以实现不同的功能。常用的input属性如下表所示：4.4留言页面制作表单元素（3）其他表单元素①列表/菜单（select和option）。“列表/菜单”可以在列表中创建下拉菜单选项。size可以指定下拉菜单的可见选项数，定义multiple="multiple"时，下拉菜单将具有多项选择的功能，定义selected="selected"时，当前项即为默认选中项。其语法格式如下：<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>4.4留言页面制作表单元素（3）其他表单元素②多行文本框（textarea）。可以创建多行文本输入框，可以通过cols和rows属性来规定textarea的尺寸大小。<textareacols="每行中字符数"rows="行数">

文本内容</textarea>③选项列表（datalist）元素。定义输入框的选项列表，列表通过datalist内的option元素进行创建。在使用datalist标记时，需要通过id属性为其指定一个唯一的标识，然后绑定到input元素指定的list属性中，将该属性值设置为option元素对应的id属性值即可。请输入学生姓名：<inputtype="text"list="stuname"/><datalistid="stuname"><option>Jack</option><option>lucy</option><option>lily</option></datalist>4.4留言页面制作CSS表单样式利用CSS控制表单样式，通过设置控制表单控件的字体、边框、背景和内外边距等使表单的样式看上去更加美观大方。在使用input标记定义各种按钮时，通常需要清除其边框，要对文本框、密码框设置2到3像素的内边距，从而使用户输入的内容不会紧贴着输入框。4.4留言页面制作【示例代码】2-4-15.html：表单html代码。添加样式前CSS表单样式4.4留言页面制作添加样式后任务实施插入表单元素02.编写表单样式03.01.搭建页面结构具体要求见任务书4.4留言页面制作讨论区运用本课学习的技术，根据效果图完成搜索框制作。要求有文字、图片，截图上传讨论区。4.4留言页面制作讨论区运用本课学习的技术，根据效果图完成登录框制作。要求有文字、图片，截图上传讨论区。4.4留言页面制作讨论区运用本课学习的技术，根据效果图完成注册框制作。要