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

,Click to edit Master title style,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,HTML5+CSS3 Web,前端开发技术,LOGO,Thank You!,Click to edit Master title style,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,HTML5+CSS3 Web,前端开发技术,Click to edit Master title style,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,第,4,章,HTML5,的表单元素,表单定义元素,form,1,HTML,表单输入元素及属性,2,HTML5,新增的表单元素和属性,3,一个会员注册表单,4,4.1,表单定义元素,form,在HTML中，插入成对的表单标记form可以完成表单的定义,。,属性,说明,name,表单名称,method,表单发送的方式，可以是“,post,”,或者“,get,”,action,表单处理程序,enctype,表单编码方式,表,4-1,表单标记的属性及说明,4.2,HTML,表单输入元素及属性,1.,表单输入元素,input,标记用于表单中输入数据，通常包含在和标记中,。,属性值,说明,属性值,说明,text,文本框,button,标准按钮,password,密码框,submit,提交按钮,file,文件域,reset,重置按钮,checkbox,复选框,image,图像域,radio,单选按钮,表,4-2,标记的,type,属性值及说明,4.2,HTML,表单输入元素及属性,表单输入元素,示例,demo0401.html,4.2,HTML,表单输入元素及属性,2.,列表框元素,select,使用列表框标记select，同时嵌套列表项标记option，可以实现列表框效果,。,选项显示内容,选项显示内容,标记用于定义列表框，,标记用于向列表框中添加列表项目,标记中的,size,属性用于定义列表框的行数,.,4.2,HTML,表单输入元素及属性,列表框元素示例,demo0403.html,4.2,HTML,表单输入元素及属性,3.,文本域输入元素,textarea,文本域用来输入文字信息，行间可以换行,，,例如,：,文本域输入元素示例,demo0404.html,4.3 HTML5新增的表单元素和属性,插入数值输入域,demo0405.html,4.3 HTML5新增的表单元素和属性,（,2,）,滑动条,range,将,input,标记中的,type,属性设置为,range,，可以在表单中插入表示数值范围的滑动条，还可以限定可接受数值的范围,.,语法中的属性及用法与数值输入域相同,示例,demo0406.html,4.3 HTML5新增的表单元素和属性,插入日期选择器示例,demo0407.html,4.3 HTML5新增的表单元素和属性,2.HTML5,表单新增属性,（,1,）,form,属性,在,HTML4,中，表单的元素必须书写在表单内部，但是在,HTML5,中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个,form,属性，属性值为该表单的,id,（,id,是表单的惟一属性标识），通过这种方式声明该元素属于哪个具体的表单。,姓名：,确认：,简历：,4.3 HTML5新增的表单元素和属性,（,2,）,formmethod,和,formaction,属性,在,HTML4,中，表单通过惟一的,action,属性将表单内的所有元素统一提交到另一个页面（应用程序），也通过惟一的,method,属性来指定统一的提交方法是,get,或,post,。在,HTML5,中增加的,formaction,属性，使得点击不同的按钮，可以将表单提交到不同的页面,.,同时，也可以使用,formmethod,属性对每个表单元素分别指定不同的提交方法。,4.3 HTML5新增的表单元素和属性,（,5,）,autocomplete,属性,autocomplete属性是辅助输入的自动完成功能。,autocomplete属性，可以指定其值为,on,off,与,三类值。不指定时，使用浏览器的默认值。该属性设置为on时，可以显式指定待输入的数据列表。如果使用datalist元素与list属性提供待输入的数据列表，自动完成时，可以将该 datalist元素中的数据作为待输入的数据在文本框中自动显示。下面代码为文本框设置了一个autocomplete属性。,例如：,4.3 HTML5新增的表单元素和属性,（,6,）,required,属性,HTML 5,中新增的,required,属性可以应用在大多数输入元素上,(,除了隐藏元素、图片元素 按钮外,),。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中提示用户这个元素中必须输入内容。,（,7,）,pattern,属性,HTML5,新增的,email,、,number,、,url,等,input,类型的元素，要求输入内容符合一定的格式。如果对,input,元素使用,pattern,属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字。例如,:,4.3 HTML5新增的表单元素和属性,（,8,）,min,属性与,max,属性,min,与,max,这两个属性是数值类型或日期类型的,input,元素的专用属,性，它们限制了在,input,元素中输入的数值与日期的范围。,4.,4,一个会员注册表单,会员注册表单,示例,demo0409.html,作业,谢谢,