Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务15-表单与input元素课件

任务15表单与input元素第六单元HTML5表单的应用任务15表单与input元素第六单元HTML5表1学习目标掌握表单样式创建表单input元素及属性学习目标掌握表单样式创建表单input元素及属性2网页中常用的表单功能了解:学习目标网页中常用的表单功能了解:学习目标3任务目标实战演练——制作登录界面实战演练——制作简历表单任务目标实战演练——制作登录界面实战演练——制作简历表单4知识准备1.认识表单表单：用于收集用户在客户端提交的信息，并将这些信息发送给服务器进行处理。如常见的搜索功能、用户登录功能、注册功能等。组成：表单元素（也叫表单控件）、提示信息和表单域。知识准备1.认识表单表单：用于收集用户在客户端提交的信息，5autocomplete属性：控制表单自动完成功能的开启和关闭novalidate属性：规定当提交表单时不对其进行验证知识准备2.创建表单表单定义：<formaction="url地址"method="提交方式"name="表单名称">各种表单元素</form>接收表单数据的服务器程序的url地址。表单数据的提交方式。（1）get：默认值，提交的表单数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。（2）post：表单数据传递的保密性较好，并无数据量的限制。定义表单的名称autocomplete属性：控制表单自动完成功能的开启和关6知识准备3.input元素及属性input元素：表单中最常用的元素，它可以定义单行文本输入框、密码输入框、单选按钮、复选框、提交按钮、重置按钮等。语法格式：<inputtype="控件类型"/>知识准备3.input元素及属性input元素：表单中最常7知识准备属性属性值含义说明typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emailEmail地址的输入域urlURL地址的输入域number数值的输入域range一定范围内数字值的输入域Datepickers（date,month,week,time,datetime,datetime-local）日期和时间的输入类型search搜索域color颜色输入类型tel电话号码输入类型知识准备属性属性值含义说明typetext单行文本输入框pa8知识准备属性属性值含义说明name用户自定义控件的名称value用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设定是否自动完成表单字段内容autofocusautofocus指定页面加载后是否自动获取焦点formform元素的id设定字段隶属于哪一个或多个表单listdatalist元素的id指定字段的候选数据值列表multiplemultiple指定输入框是否可以选择多个值min、max和step数值规定输入框所允许的最小值、最大值和间隔pattern字符串验证输入的内容是否与定义的正则表达式匹配placeholder字符串为input类型的输入框提供用户提示requiredrequired规定输入框填写的内容不能为空知识准备属性属性值含义说明name用户自定义控件的名称val9实战演练案例描述：设计并制作网站登录界面，网页效果如下图1所示。当光标移到按钮上时，光标图案和按钮背景颜色会发生变化，如图2所示。制作登录界面图1图2实战演练案例描述：设计并制作网站登录界面，网10强化训练案例描述：设计并制作简历表单，网页效果如下。制作简历表单强化训练案例描述：设计并制作简历表单，网页效果如下。制作简历11任务小结01创建表单02input元素及属性03表单样式任务小结01创建表单02input元素及属性03表单样式12课后实训设计会员登录系统表单，如图1所示。当用户输入登录信息时，效果如图2所示。图1图2课后实训设计会员登录系统表单，如图1所示。当用户输入登录信息13谢谢观看谢谢观看14任务15表单与input元素第六单元HTML5表单的应用任务15表单与input元素第六单元HTML5表15学习目标掌握表单样式创建表单input元素及属性学习目标掌握表单样式创建表单input元素及属性16网页中常用的表单功能了解:学习目标网页中常用的表单功能了解:学习目标17任务目标实战演练——制作登录界面实战演练——制作简历表单任务目标实战演练——制作登录界面实战演练——制作简历表单18知识准备1.认识表单表单：用于收集用户在客户端提交的信息，并将这些信息发送给服务器进行处理。如常见的搜索功能、用户登录功能、注册功能等。组成：表单元素（也叫表单控件）、提示信息和表单域。知识准备1.认识表单表单：用于收集用户在客户端提交的信息，19autocomplete属性：控制表单自动完成功能的开启和关闭novalidate属性：规定当提交表单时不对其进行验证知识准备2.创建表单表单定义：<formaction="url地址"method="提交方式"name="表单名称">各种表单元素</form>接收表单数据的服务器程序的url地址。表单数据的提交方式。（1）get：默认值，提交的表单数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。（2）post：表单数据传递的保密性较好，并无数据量的限制。定义表单的名称autocomplete属性：控制表单自动完成功能的开启和关20知识准备3.input元素及属性input元素：表单中最常用的元素，它可以定义单行文本输入框、密码输入框、单选按钮、复选框、提交按钮、重置按钮等。语法格式：<inputtype="控件类型"/>知识准备3.input元素及属性input元素：表单中最常21知识准备属性属性值含义说明typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emailEmail地址的输入域urlURL地址的输入域number数值的输入域range一定范围内数字值的输入域Datepickers（date,month,week,time,datetime,datetime-local）日期和时间的输入类型search搜索域color颜色输入类型tel电话号码输入类型知识准备属性属性值含义说明typetext单行文本输入框pa22知识准备属性属性值含义说明name用户自定义控件的名称value用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设定是否自动完成表单字段内容autofocusautofocus指定页面加载后是否自动获取焦点formform元素的id设定字段隶属于哪一个或多个表单listdatalist元素的id指定字段的候选数据值列表multiplemultiple指定输入框是否可以选择多个值min、max和step数值规定输入框所允许的最小值、最大值和间隔pattern字符串验证输入的内容是否与定义的正则表达式匹配placeholder字符串为input类型的输入框提供用户提示requiredrequired规定输入框填写的内容不能为空知识准备属性属性值含义说明name用户自定义控件的名称val23实战演练案例描述：设计并制作网站登录界面，网页效果如下图1所示。当光标移到按钮上时，光标图案和按钮背景颜色会发生变化，如图2所示。制作登录界面图1图2实战演练案例描述：设计并制作网站登录界面，网24强化训练案例描述：设计并制作简历表单，网页效果如下