【文档说明】Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务15--表单与input元素课件.pptx，共(14)页，3.583 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-3299.html

以下为本文档部分文字说明：

任务15表单与INPUT元素第六单元HTML5表单的应用学习目标掌握表单样式创建表单input元素及属性网页中常用的表单功能了解:学习目标任务目标实战演练——制作登录界面实战演练——制作简历表单知识准备1.认识表单◼表单：

用于收集用户在客户端提交的信息，并将这些信息发送给服务器进行处理。如常见的搜索功能、用户登录功能、注册功能等。◼组成：表单元素（也叫表单控件）、提示信息和表单域。◼autocomplete属性：控制表单

自动完成功能的开启和关闭◼novalidate属性：规定当提交表单时不对其进行验证知识准备2.创建表单◼表单定义：<formaction="url地址"method="提交方式"name="表单名称">各种表单元素</form>接收表单数据的服务器程序的url地址。表单数据的提交方式。（

1）get：默认值，提交的表单数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。（2）post：表单数据传递的保密性较好，并无数据量的限制。定义表单的名称知识准备3.input元素及属性◼input元素：表单中最常用的

元素，它可以定义单行文本输入框、密码输入框、单选按钮、复选框、提交按钮、重置按钮等。◼语法格式：<inputtype="控件类型"/>知识准备属性属性值含义说明typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮su

bmit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emailEmail地址的输入域urlURL地址的输入域number数值的输入域range一定范围内数字值的输入域Datepickers（date,m

onth,week,time,datetime,datetime-local）日期和时间的输入类型search搜索域color颜色输入类型tel电话号码输入类型知识准备属性属性值含义说明name用户自定义控件的名称value用户自定义input控件中的默认文本值size正

整数input控件在页面中的显示宽度readonlyreadonly控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompl

eteon/off设定是否自动完成表单字段内容autofocusautofocus指定页面加载后是否自动获取焦点formform元素的id设定字段隶属于哪一个或多个表单listdatalist元素的id指定字段的候选数

据值列表multiplemultiple指定输入框是否可以选择多个值min、max和step数值规定输入框所允许的最小值、最大值和间隔pattern字符串验证输入的内容是否与定义的正则表达式匹配placeholder字符串为input类

型的输入框提供用户提示requiredrequired规定输入框填写的内容不能为空实战演练案例描述：设计并制作网站登录界面，网页效果如下图1所示。当光标移到按钮上时，光标图案和按钮背景颜色会发生变化，如图2所示。制作

登录界面图1图2强化训练案例描述：设计并制作简历表单，网页效果如下。制作简历表单任务小结创建表单input元素及属性表单样式课后实训设计会员登录系统表单，如图1所示。当用户输入登录信息时，效果如图2所示。图1图2谢谢观看