Web前端技术项目式教程课件 任务七 添加用户交互界面-表单

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）任务七

添加用户交互界面——表单知识目标1熟悉表单的构成。能力目标1掌握使用表单相关标签创建具有相应功能的表单控件。2掌握使用表单样式美化表单界面。素质目标1

掌握中华传统美学标准。2培养学生诚实守信的品德。思维导图任务描述李明在前面的任务中完成了页面头部导航条的制作。一个完整的网站通常有登录、注册等功能页面；在网站导航条的右侧有一个搜索框，其内部默认显示搜索关键词。添加这些元素需要运用有关表单的知识。本任务要求制作中华传统文化网站的搜索框和意见反馈页面。本任务的具体要求如下。

制作首页和二级页面的搜索框。

制作意见反馈页面。知识引入功能表单在网页中主要负责数据采集功能，利用表单可以实现与用户的交互，比如收集浏览者的信息或实现搜索等功能。运行流程单击表单的提交按钮表单信息提交服务器的有关应用程序处理表单信息服务器将处理的结果返回到用户的客户端浏览器上返回结果一个表单由三个基本部分组成。表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。用于描述表单对象的标签可以分为表单<form>标签和表单域标签两大类。<form>用于定义一个表单区域，表单域标签用于定义表单中的各个元素。知识引入1．<form>标签2．<input>标签3．HTML5新增的<input>类型1．<form>标签表单是网页上的一个特定区域，这个区域由一对<form>标签定义。<form>有两方面的作用：限定表单的范围，表单中各个元素都要设置在这个区域内，单击提交按钮时，提交的也是这个区域内的数据；携带表单的相关信息，如处理表单的程序、提交表单的方法等。表单标签的基本语法代码如下所示。<formaction="xxx.php"name="form1"method="post"target="_blank">

</form>语法说明：name：表单提交时的名称。

action：提交到的地址。

method：规定用于发送form-data的HTTP方法，提交方式有两种：get和post。2.<input>元素<input>元素是最重要的表单元素。其中包括文本框、密码框、单选框、复选框、按钮等元素,输入标签的基本语法如下。<inputtype=“元素类型”name=“表单元素名称”>根据不同的

type

属性，<input>元素有很多形态，如表7-2所示。例7-1基本注册页面示例效果，如图7-1所示。图7-1注册页面效果图在此页面中，出现了input元素的各种类型，例如单行文本框、密码框、电邮件、日期、单选按钮、复选框、下拉列表、多行文本框、普通、提交、重置按钮，具体代码如下:对应的css代码如下。<input>标签type属性各种属性值说明如下。(1)type=“text”文本输入框，用于单行文本输入。格式：提示：在标签中添加value属性可以用来为输入框设置默认文本。(2)type=“password”密码输入框，输入时显示星号。格式：提示：在标签中添加value属性可以用来为输入框设置默认密码。(3)type=“radio”单选按钮，各个选项的name属性值要相同才能实现单选，value属性要有具体的值。格式：提示：若想默认单选其中一个，可以在标签中添加checked属性。(4)type=“checkbox”多选框，添加checked属性会默认选中。格式：提示：多选框中一般必须填写每一个选项的name属性，可以把name属性设置为同一个名字，然后分别设置不同的id。(5)type=“submit”提交按钮，用于提交表单中的信息。格式：提示：form表单有另一种设置提交按钮的方式，即在form中使用button标签，这个按钮放在form中也会点击自动提交，提交的内容不光可以有文字，还可以有图片等多媒体内容，缺点是不同的浏览器得到的value值不一样，可能还会有其他的兼容问题。(6)type=“reset”重置按钮，用于清空表单中的数据。格式：提示：重置按钮上的文字默认为“重置”，若想改变文字可以通过value修改。(7)type=“button”普通按钮。格式：提示：可以通过value属性给按钮制定标题，通常配合JS使用。(8)type=“hidden”隐藏域，用户看不到，用于暂存数据，或者进行安全性校验。格式：提示：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。(10)<select>标签用于定义下拉列表。格式：提示：下拉列表不能输入，但是可以选择，也可以用selected设置默认选项。(9)<textarea>标签文本域，用于输入多行文本。格式：提示：默认情况下输入框可以无限换行，输入框有自己的宽度和高度。可以给<textarea>标签添加cols和rows属性来定义宽度和高度，例如<textareacols=“2”rows=“3”>。(11)<label>标签用于聚焦，<label>标签为input元素定义标注（标记）。在

label元素内点击文本，就会触发此控件。就是说，当用户选择label元素内包裹的文本时，浏览器就会自动将焦点转到和该文本相关的表单控件（输入框等）上。格式：提示：将文本用<label>标签包裹起来，给文本相关的表单控件（如输入框等）设置一个id名，最后在<label>标签中设置for属性的值为id。综上所述<input>常用属性，如表7-3所示。表7-3表单元素input常用属性

3.HTML5新增的<input>类型HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。HTML5中新增了一些类型，使用起来更加方便，包括：colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek(1)color类型主要用于选取颜色。格式：点击时弹出颜色选择器，可以选择任意颜色，如图7-2所示。图7-2选取颜色(2)date类型从一个日期选择器中选择一个日期。格式：选择一个出生日期，如图7-3所示。图7-3选取出生日期(3)datetime类型选择一个日期（UTC时间）。格式：从一个日期和时间控制器（本地时间）选择一个日期。(4)datetime-local类型选择一个日期和时间（无时区）。格式：从一个日期和时间控制器（本地时间）选择一个日期和时间（无时区）。(5)email类型用于输入一个E-mail地址。格式：在提交表单时，会自动验证email域的值是否合法有效，如图7-4所示。(6)month类型选择月份与年份（无时区），如图7-5所示。格式：（7）number类型用于包含数值的输入域，设定一个数值输入区域。格式：使用下面的属性来规定对数字类型的限定，如表7-4所示。属性描述disabled规定输入字段是禁用的max规定允许的最大值maxlength规定输入字段的最大字符长度min规定允许的最小值pattern规定用于验证输入字段的模式readonly规定输入字段的值无法修改required规定输入字段的值是必需的size规定输入字段中的可见字符数step规定输入字段的合法数字间隔value规定输入字段的默认值<inputtype="number"name="quantity"min="1"max="5">（8）range类型

用于包含一定范围内数字值的输入域，显示为滑动条。格式：使用下面的属性来规定对数字类型的限定：max：规定允许的最大值。min：规定允许的最小值。step：规定合法的数字间隔。value：规定默认值。<inputtype="range"name="points"min="1"max="10">（9）search类型用于搜索域，比如站点搜索或Google搜索。格式：（10）tel类型定义输入电话号码字段。格式：

（11）time类型输入时间控制器（无时区）。格式：<inputtype="search"name="googlesearch"><inputtype="tel"name="usrtel"><inputtype="time"name="usr_time">（12）url类型用于应该包含URL地址的输入域。格式：在提交表单时，会自动验证URL域的值，如图7-6所示，网址应该包含“http://”。图7-6url网址错误提示<inputtype="url"name="homepage">（13）week类型选择周和年（无时区），如图7-7所示。格式：图7-7选取年份和周<inputtype="week"name="week_year">任务实现：中国传统文化网站搜索框、意见反馈表1．制作搜索框2．制作意见反馈表