第4章-HTML5的表单元素(HTML5与CSS3-Web前端开发技术)课件.ppt

《第4章-HTML5的表单元素(HTML5与CSS3-Web前端开发技术)课件.ppt》由会员分享，可在线阅读，更多相关《第4章-HTML5的表单元素(HTML5与CSS3-Web前端开发技术)课件.ppt（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML5+CSS3Web前端开发技术前端开发技术第第4章章 HTML5的表单元素表单定义元素表单定义元素form1HTML表单输入元素及属性表单输入元素及属性2HTML5新增的表单元素和属性新增的表单元素和属性3一个会员注册表单一个会员注册表单4HTML5+CSS3Web前端开发技术前端开发技术4.1表单定义元素表单定义元素form在在HTML中，插入成对的表单标记中，插入成对的表单标记form可以完成表单的定义可以完成表单的定义。属性属性说明说明name表单名称表单名称method表单发送的方式，可以是表单发送的方式，可以是“post”或者或者“get”action表单处理程序表单处理程序

2、enctype表单编码方式表单编码方式表表4-1 表表单标记的属性及的属性及说明明HTML5+CSS3Web前端开发技术前端开发技术4.2HTMLHTML表单输入元素及属性表单输入元素及属性1.表单输入元素表单输入元素input标记用于表单中输入数据，通常包含在标记用于表单中输入数据，通常包含在和和标记中标记中。属性值说明属性值说明text文本框button标准按钮password密码框submit提交按钮file文件域reset重置按钮checkbox复选框image图像域radio单选按钮表表4-2 标记的的type属性属性值及及说明明HTML5+CSS3Web前端开发技术前端开发技术4.

3、2HTMLHTML表单输入元素及属性表单输入元素及属性表单输入元素表单输入元素示例示例demo0401.htmlHTML5+CSS3Web前端开发技术前端开发技术HTML5+CSS3Web前端开发技术前端开发技术4.2HTMLHTML表单输入元素及属性表单输入元素及属性2.列表框元素列表框元素select使用列表框标记使用列表框标记select，同时嵌套列表项标记，同时嵌套列表项标记option，可以实现列表框效果可以实现列表框效果。选项显示内容选项显示内容选项显示内容选项显示内容标记用于定义列表框，标记用于定义列表框，标记用于向列表标记用于向列表框中添加列表项目框中添加列表项目,标记中的标记

4、中的size属性用于定义列属性用于定义列表框的行数表框的行数.HTML5+CSS3Web前端开发技术前端开发技术4.2HTMLHTML表单输入元素及属性表单输入元素及属性列表框元素示例列表框元素示例demo0403.htmlHTML5+CSS3Web前端开发技术前端开发技术4.2HTMLHTML表单输入元素及属性表单输入元素及属性3.文本域输入元素文本域输入元素textarea文本域用来输入文字信息，行间可以换行文本域用来输入文字信息，行间可以换行，例如例如：文本域输入元素示例文本域输入元素示例demo0404.htmlHTML5+CSS3Web前端开发技术前端开发技术HTML5+CSS3We

5、b前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性插入数值输入域插入数值输入域demo0405.htmlHTML5+CSS3Web前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性（2）滑动条滑动条range将将input标记中的标记中的type属性设置为属性设置为range，可以在表单中插入表示数值，可以在表单中插入表示数值范围的滑动条，还可以限定可接受数值的范围范围的滑动条，还可以限定可接受数值的范围.语法中的属性及用法与数值输入域相同语法中的属性及用法与数值输入域相同,示例示例demo0406.htmlHTML5+CSS3We

6、b前端开发技术前端开发技术HTML5+CSS3Web前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性插入日期选择器示例插入日期选择器示例demo0407.htmlHTML5+CSS3Web前端开发技术前端开发技术HTML5+CSS3Web前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性2.HTML5表单新增属性表单新增属性（1）form属性属性在在HTML4中，表单的元素必须书写在表单内部，但是在中，表单的元素必须书写在表单内部，但是在HTML5中，可中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个以将表单元素写在页面

7、上的任何位置，然后给该元素指定一个form属属性，属性值为该表单的性，属性值为该表单的id（id是表单的惟一属性标识），通过这种方式是表单的惟一属性标识），通过这种方式声明该元素属于哪个具体的表单。声明该元素属于哪个具体的表单。姓名：姓名：确认：确认：简历：简历：HTML5+CSS3Web前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性（2）formmethod和和formaction属性属性在在HTML4中，表单通过惟一的中，表单通过惟一的action属性将表单内的所有元素统一提交属性将表单内的所有元素统一提交到另一个页面（应用程序），也通过惟一的到另一个页面

8、（应用程序），也通过惟一的method属性来指定统一的属性来指定统一的提交方法是提交方法是get或或post。在。在HTML5中增加的中增加的formaction属性，使得属性，使得点击不同的按钮，可以将表单提交到不同的页面点击不同的按钮，可以将表单提交到不同的页面.同时，也可以使用同时，也可以使用formmethod属性对每个表单元素分别指定不同的提属性对每个表单元素分别指定不同的提交方法。交方法。HTML5+CSS3Web前端开发技术前端开发技术HTML5+CSS3Web前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性（5）autocomplete属性属性a

9、utocomplete属性是辅助输入的自动完成功能。属性是辅助输入的自动完成功能。autocomplete属性，可以指定其值为属性，可以指定其值为onoff与与三类三类值。不指定时，使用浏览器的默认值。该属性设置为值。不指定时，使用浏览器的默认值。该属性设置为on时，时，可以显式指定待输入的数据列表。如果使用可以显式指定待输入的数据列表。如果使用datalist元素与元素与list属性提供待输入的数据列表，自动完成时，可以将该属性提供待输入的数据列表，自动完成时，可以将该datalist元素中的数据作为待输入的数据在文本框中自动显元素中的数据作为待输入的数据在文本框中自动显示。下面代码为文本框

10、设置了一个示。下面代码为文本框设置了一个autocomplete属性。属性。例如：例如：HTML5+CSS3Web前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性（6）required属性属性HTML5中新增的中新增的required属性可以应用在大多数输入元素上属性可以应用在大多数输入元素上(除了隐除了隐藏元素、图片元素藏元素、图片元素按钮外按钮外)。在提交时，如果元素中内容为空白，则不。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中提示用户这个元素中必须输入内容。允许提交，同时在浏览器中提示用户这个元素中必须输入内容。（7）pattern属性属

11、性HTML5新增的新增的email、number、url等等input类型的元素，要求输入类型的元素，要求输入内容符合一定的格式。如果对内容符合一定的格式。如果对input元素使用元素使用pattern属性，并且将属属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字。例如中显示信息提示文字。例如:HTML5+CSS3Web前端开发技术前端开发技术4.3HTML5新增的表单元素和属性新增的表单元素和属性（8）min属性与属性与max属性属性min与与max这两个属性是数值类型或日期类型的这两个属性是数值类型或日期类型的input元素的专元素的专用属用属性，它们限制了在性，它们限制了在input元素中输入的数值与日期的范围。元素中输入的数值与日期的范围。HTML5+CSS3Web前端开发技术前端开发技术4.4一个会员注册表单一个会员注册表单会员注册表单会员注册表单示例示例demo0409.htmlHTML5+CSS3Web前端开发技术前端开发技术作业谢谢谢谢