HTML5 CSS3 JavaScript网页设计与制作项目教程课件PPT 项目5 布局交互功能——表单的应用(1).pptx

HTML5+CSS3+JavaScript网页设计与制作项目教程项目5 布局交互功能——表单的应用 目录ENTERPRISE OPERATION REPORT04.总结提升03.知识链接02.学习目标01.项目导入 项目导入PART 01 项目导入使用表单制作“旅行家——登录注册”页面 在网页中，我们经常看到各种注册登录页面，其中用户名、密码等输入内容被称为表单。HTML5中提供了表单标签，来完成页面信息输入的功能，实现网页与用户数据的交互。本章我们将使用这些元素制作“旅行家登录”页面 学习目标PART 02 知识目标能力目标1、掌握利用表单标签在页面创建表单的方法2、掌握各种表单控件的定义与应用3、掌握表单标签的属性1、能够根据需要创建表单控件2、能够自由组合表单中的各个元素 知识链接PART 03 一、表单标签form 表单是网页上的特定区域，是表单控件的集合，主要负责从客户端收集用户的输入信息，然后将信息发送给服务器，由处理程序对数据进行分析，并给出反馈，完成服务器与用户之间的互动，其工作机制如图 一、表单标签form 表单所在的区域由文本框、单选框、多选框、下拉选择框、提交按钮、重置按钮等表单元素构成，需要用一对表单标签form定义。其基本语法格式为：form name=表单名称 method=提交方式 action=url地址 表单元素/form 一、表单标签form 1、表单属性根据实际应用不同，表单的组成元素多种多样，其中action、method、name是form标签的常用属性。（1）表单名称属性namename属性给表单命名，来区分一个页面中的多个表单，避免表单信息提交给后台时出现混乱。其命名规则为：name的属性值为表单名称，不能包含特殊符号和空格。（2）传送方法属性methodmethod属性用来定义表单数据的提交方式，可取值为get或post，决定了处理程序用什么方式从表单中获取信息。 一、表单标签form （3）处理程序属性actionaction属性定义处理表单的脚本或程序，其属性值可以是脚本或程序的完整url，即表单要提交的地址。这个地址可以是绝对地址，也可以是相对地址。 一、表单标签form 2、表单元素表单中通常包含一个或多个表单元素，除input标签外，HTML还有其他常用表单标签，如textarea、lable等。常用的表单元素如表表单元素功能input该标签根据type属性值的不同有多种形式，可定义文本框、密 码框、复选框、按钮等textarea该标签定义一个多行文本输入区域label该标签为其他表单元素定义说明文字select该标签用来定义下拉菜单datalist该标签用来定义下拉选项列表 表单中最为核心的是input标签，使用input标签可以定义用户的输入项，如文本输入框、单选按钮、复选框、提交按钮等，用于文本、数字、密码等数据信息的输入。input标签是一个单标签，必须嵌套在表单标签中使用，其基本语法格式为： input type=控件类型 /二、输入标签input 1、type属性 在input标签的基本语法中，type属性是其最基本的属性，根据其不同的取值，指定不同的控件类型。（1）单行文本框text与密码框password 单行文本框可以用来输入字符串；密码框可以用来输入密码，为了保护密码安全，密码框中输入字符会显示为“*”。语法格式如下：input type=text/number/password name=名称 size=文本框长度 maxlength=最长字符数 value=默认取值 placeholder=”提示语句”/常用的属性如下：?name属性：定义文本框的名称。?size属性：定义文本框的长度，以字符为单位。?maxlength属性：定义文本框中最多可以输入的字符数。?value属性：定义文本框显示的默认值。?placeholder属性：定义文本框提示语句二、输入标签input 【例5-1】创建文本密码输入框。!DOCTYPE?htmlhtmlhead????title输入文本及密码/title/headbody????form????????用户名：????????input?type=text?name=userID?size=20?placeholder=请输入用户名或手机号?/????????br????????密码：????????input?type=password?name=userPW?size=20?placeholder=请输入8-20位密码?/????/form/body/html二、输入标签inp