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

1、HTML5+CSS3 Web 前端开发技术前端开发技术第4章 HTML5的表单元素(HTML5与CSS3 Web前端开发技术)HTML5+CSS3 Web 前端开发技术前端开发技术HTML5+CSS3 Web 前端开发技术前端开发技术HTML5+CSS3 Web 前端开发技术前端开发技术HTML5+CSS3 Web 前端开发技术前端开发技术4.2 HTMLHTML表单输入元素及属性表单输入元素及属性表单输入元素例如表单输入元素例如HTML5+CSS3 Web 前端开发技术前端开发技术4.2 HTMLHTML表单输入元素及属性表单输入元素及属性2.列表框元素列表框元素select使用列表框标记使

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

3、及属性3.文本域输入元素文本域输入元素textarea文本域用来输入文字信息，行间可以换行，例如：文本域用来输入文字信息，行间可以换行，例如： 文本域输入元素例如文本域输入元素例如HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性v HTML5新增新增input类型类型v 1数值输入域数值输入域numberv 将将input标记中的标记中的type属性设置为属性设置为number，可以在表单中插入数值输入域，还可以限定输入数可以在表单中插入数值输入域，还可以限定输入数字的范围。字的范围。 v 属性属性值值说明说明maxnumber定

4、义允许输入的最大值定义允许输入的最大值minnumber定义允许输入的最小值定义允许输入的最小值stepnumber定义步长（如果定义步长（如果step=“2”，则允许输入的数值为，则允许输入的数值为- -2，0，2，4，6等或等或- -1，1，3，5等）等）valuenumber定义默认值定义默认值表表4-3 数值输入域的属性、取值及说明数值输入域的属性、取值及说明HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性插入数值输入域插入数值输入域HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属

5、性新增的表单元素和属性2滑动条滑动条range 将将input标记中的标记中的type属性设置为属性设置为range，可以，可以在表单中插入表示数值范围的滑动条，还可以限定在表单中插入表示数值范围的滑动条，还可以限定可接受数值的范围可接受数值的范围. 语法中的属性及用法与数值输入域相同语法中的属性及用法与数值输入域相同, 例如例如demo0406.html HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性3日期选择器日期选择器date pickers将将input标记中的标记中的type属性设置为以下几种类型属性设置为以下几种类型

6、中的一种就可以完成网页中日期选择器的定义。中的一种就可以完成网页中日期选择器的定义。 date选取日、月、年选取日、月、年 month选取月、年选取月、年 week选取周和年选取周和年 time选取时间小时和分钟选取时间小时和分钟 datetime选取时间、日、月、年选取时间、日、月、年UTC世界标准时间世界标准时间 datetime-local选取时间、日、月、年本选取时间、日、月、年本地时间地时间HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性插入日期选择器例如插入日期选择器例如HTML5+CSS3 Web 前端开发技术前端开

7、发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性4url类型类型 url类型的类型的input元素是一种专门用来输入元素是一种专门用来输入url地址的地址的文本框。提交时如果该文本框中内容不是文本框。提交时如果该文本框中内容不是url地址地址格式的文字，那么不允许提交。格式的文字，那么不允许提交。 5email类型类型 email类型的文本框具有一个类型的文本框具有一个multiple属性一它允属性一它允许在该文本框中输入一串以逗号分隔许在该文本框中输入一串以逗号分隔 的的email地地址。址。 HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单

8、元素和属性新增的表单元素和属性表单新增属性表单新增属性1form属性属性 在在HTML4中，表单的元素必须书写在表单内部，中，表单的元素必须书写在表单内部，但是在但是在HTML5中，可以将表单元素写在页面上的中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个任何位置，然后给该元素指定一个form属性，属属性，属性值为该表单的性值为该表单的idid是表单的惟一属性标识，是表单的惟一属性标识，通过这种方式声明该元素属于哪个具体的表单。通过这种方式声明该元素属于哪个具体的表单。姓名：姓名： 确认：确认： 简历：简历：HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新

9、增的表单元素和属性新增的表单元素和属性2formmethod和和formaction属性属性 在在HTML4中，表单通过惟一的中，表单通过惟一的action属性将表单属性将表单内的所有元素统一提交到另一个页面应用程序内的所有元素统一提交到另一个页面应用程序，也通过惟一的，也通过惟一的method属性来指定统一的提交方属性来指定统一的提交方法是法是get或或post。在。在HTML5中增加的中增加的formaction属性，使得点击不同的按钮，可以将属性，使得点击不同的按钮，可以将表单提交到不同的页面表单提交到不同的页面. 同时，也可以使用同时，也可以使用formmethod属性对每个表单属性对

10、每个表单元素分别指定不同的提交方法。元素分别指定不同的提交方法。HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性3 placeholder属性属性 placeholder是指当文本框是指当文本框处于未输入状态时文本框中显示处于未输入状态时文本框中显示的输入提示。例如：的输入提示。例如：4 autofocus属性属性 给文本框、选择框或按钮等控制加上该属性，当页给文本框、选择框或按钮等控制加上该属性，当页面翻开时，该控件将自动获得焦点，从而替代使用面翻开时，该控件将自动获得焦点，从而替代使用JavaScript代码。例如：代码。例如

11、：HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性5 autocomplete属性属性autocomplete属性是辅助输入的自动完成功能。属性是辅助输入的自动完成功能。autocomplete属性，可以指定其值为属性，可以指定其值为on off与与 三类值。不指定时，使用浏览器的默认值。该属三类值。不指定时，使用浏览器的默认值。该属性设置为性设置为on时，可以显式指定待输入的数据列表。时，可以显式指定待输入的数据列表。如果使用如果使用datalist元素与元素与list属性提供待输入的数据属性提供待输入的数据列表，自动完成时，可

12、以将该列表，自动完成时，可以将该 datalist元素中的数元素中的数据作为待输入的数据在文本框中自动显示。下面代据作为待输入的数据在文本框中自动显示。下面代码为文本框设置了一个码为文本框设置了一个autocomplete属性。属性。例如：例如：HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性6 required属性属性 HTML 5中新增的中新增的required属性可以应用在大多属性可以应用在大多数输入元素上数输入元素上(除了隐藏元素、图片元素除了隐藏元素、图片元素 按钮外按钮外)。在提交时，如果元素中内容为空白，那么不允许。

13、在提交时，如果元素中内容为空白，那么不允许提交，同时在浏览器中提示用户这个元素中必须输提交，同时在浏览器中提示用户这个元素中必须输入内容。入内容。7 pattern属性属性 HTML5新增的新增的email、number、url等等input类型的元素，要求输入内容符合一定的格式。如果类型的元素，要求输入内容符合一定的格式。如果对对input元素使用元素使用pattern属性，并且将属性值设属性，并且将属性值设为某个格式的正那么表达式，在提交时会检查其内为某个格式的正那么表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格容是否符合给定格式。当输入的内容不符合给定格式时，那么不允许提交，同时在浏览器中显示信息式时，那么不允许提交，同时在浏览器中显示信息提示文字。例如提示文字。例如:HTML5+CSS3 Web 前端开发技术前端开发技术4.3 HTML5新增的表单元素和属性新增的表单元素和属性8min属性与属