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

1、任务15 表单与INPUT元素第六单元 HTML5表单的应用学习目标掌握表单样式创建表单input元素及属性网页中常用的表单功能了解:学习目标任务目标实战演练制作登录界面实战演练制作简历表单知识准备1.认识表单n 表单：用于收集用户在客户端提交的信息，并将这些信息发送给服务器进行处理。如常见的搜索功能、用户登录功能、注册功能等。n 组成：表单元素（也叫表单控件）、提示信息和表单域。n autocomplete属性：控制表单自动完成功能的开启和关闭n novalidate属性：规定当提交表单时不对其进行验证知识准备2.创建表单n 表单定义：各种表单元素接收表单数据的服务器程序的url地址。表单数

2、据的提交方式。（1）get：默认值，提交的表单数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。（2）post：表单数据传递的保密性较好，并无数据量的限制。定义表单的名称知识准备3.input元素及属性n input元素：表单中最常用的元素，它可以定义单行文本输入框、密码输入框、单选按钮、复选框、提交按钮、重置按钮等。n 语法格式：知识准备属性属性值含义说明typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emailEmai

3、l地址的输入域urlURL地址的输入域number数值的输入域range一定范围内数字值的输入域Date pickers（date,month,week,time,datetime,datetime-local）日期和时间的输入类型search搜索域color颜色输入类型tel电话号码输入类型知识准备属性属性值含义说明name用户自定义控件的名称value用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedcheck

4、ed定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设定是否自动完成表单字段内容autofocusautofocus指定页面加载后是否自动获取焦点formform元素的id设定字段隶属于哪一个或多个表单listdatalist元素的id指定字段的候选数据值列表multiplemultiple指定输入框是否可以选择多个值min、max和step数值规定输入框所允许的最小值、最大值和间隔pattern字符串验证输入的内容是否与定义的正则表达式匹配placeholder字符串为input类型的输入框提供用户提示requiredrequired规定输入框填写的内容不能为空实战演练 案例描述：设计并制作网站登录界面，网页效果如下图1所示。当光标移到按钮上时，光标图案和按钮背景颜色会发生变化，如图2所示。制作登录界面图1图2强化训练案例描述：设计并制作简历表单，网页效果如下。制作简历表单任务小结01创建表单02input元素及属性03表单样式课后实训设计会员登录系统表单，如图1所示。当用户输入登录信息时，效果如图2所示。图1图2谢谢观看