HTML5与CSS3 Web前端开发技术第4章 HTML5的表单元素.pptVIP

HTML5+CSS3 Web 前端开发技术 LOGO HTML5+CSS3 Web 前端开发技术 * 第4章 HTML5的表单元素 表单定义元素form 1 HTML表单输入元素及属性 2 HTML5新增的表单元素和属性 3 一个会员注册表单 4 4.1 表单定义元素form 在HTML中，插入成对的表单标记form/form可以完成表单的定义。 form name=formName method=post|get action=url enctype=encoding/form 属性 说明 name 表单名称 method 表单发送的方式，可以是“post”或者“get” action 表单处理程序 enctype 表单编码方式 表4-1 表单标记的属性及说明 4.2 HTML表单输入元素及属性 1.表单输入元素input input标记用于表单中输入数据，通常包含在form和/form标记中。 input name=controlName type=controlType 属性值 说明 属性值 说明 text 文本框 button 标准按钮 password 密码框 submit 提交按钮 file 文件域 reset 重置按钮 checkbox 复选框 image 图像域 radio 单选按钮 表4-2 input标记的type属性值及说明 4.2 HTML表单输入元素及属性 表单输入元素示例demo0401.html 4.2 HTML表单输入元素及属性 表单输入元素示例demo0402.html 4.2 HTML表单输入元素及属性 2.列表框元素select 使用列表框标记select，同时嵌套列表项标记option，可以实现列表框效果。 form select name=列表框名称 size= option value=选项值 /选项显示内容 option value=选项值 /选项显示内容 … /select /form select标记用于定义列表框，option标记用于向列表框中添加列表项目,select标记中的size属性用于定义列表框的行数. 4.2 HTML表单输入元素及属性 列表框元素示例demo0403.html 4.2 HTML表单输入元素及属性 3.文本域输入元素textarea 文本域用来输入文字信息，行间可以换行，例如：? formtextarea name=“mytext” rows=“5” cols=“100” /textarea/form 文本域输入元素示例demo0404.html 4.3 HTML5新增的表单元素和属性 HTML5新增input类型 （1）数值输入域——number 将input标记中的type属性设置为number，可以在表单中插入数值输入域，还可以限定输入数字的范围。? input name= type=number min= max= step= value= / 属性 值 说明 max number 定义允许输入的最大值 min number 定义允许输入的最小值 step number 定义步长（如果step=“2”，则允许输入的数值为-2，0，2，4，6等或-1，1，3，5等） value number 定义默认值 表4-3 数值输入域的属性、取值及说明 4.3 HTML5新增的表单元素和属性 插入数值输入域demo0405.html 4.3 HTML5新增的表单元素和属性 （2）滑动条——range 将input标记中的type属性设置为range，可以在表单中插入表示数值范围的滑动条，还可以限定可接受数值的范围.? input name= type=range min= max= step= value= ?语法中的属性及用法与数值输入域相同, 示例demo0406.html ? 4.3 HTML5新增的表单元素和属性 （3）日期选择器——date pickers 将input标记中的type属性设置为以下几种类型中的一种就可以完成网页中日期选择器的定义。 ? date——选取日、月、年 ? month——选取月、年 ? week——选取周和年 ? time——选取时间（小时和分钟） ? datetime——选取时间、日、月、年（UTC—世界标准时间） ? datetime-local——选取时间、日、月、年（本地时间） 4.3 HTML5新增的表单元素和属性 插入日期选择器示例demo0407.html 4.3 HTML5新增的表单元素和属性 （4）url类型 url类型的input元素是一种专门用来输入url地址的文本框