《第3讲HTML5的表单元素.pptVIP

HTML5移动Web开发 第*页 HTML5移动Web开发 广州大学华软软件学院 这个属性的功能，相信你看到此时的效果的时候你会感到非常想兴奋，而在之前实现此提示信息，需要监听一下文本框的blur事件，然后判断是否为空，为空再去给文本框赋值一个灰色的字体提示信息，而现在只需要一个简单属性指定就可以了，浏览器都帮我们实现了。 第3讲 HTML5的表单元素 请到 240FTP ../ HTML5编程 下载第3讲文件夹 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 主要内容 新增表单元素 浏览器的支持情况 浏览器的全屏问题 视频标签video 习题 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 1、新增表单元素 在之前的HTML表单标签中，对于一些功能支持的不够好，比如：文本框提示信息（之前只能通过js和input的事件结合处理）、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能。 早期是通过js和dom元素配合实现这些通用的功能。 在HTML5中，新标准直接把这些常用的基本的功能直接加入的新的表单标签中。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 1、新增表单元素 新的标准中添加了很多输入型控件，比如：Number、URL、Email、Range、Color等。而他们都是以 input标签的type属性出场， Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 1）只能输入数字的Number类型input标签 Html代码为:input type=number name=demoNumber min=1 max=100 step=2/ 注:此标签其实就是普通的input标签,只不过是type类型指向了number,标识当前标签接受数字类型输入.另外添加了四个属性. name:属性大家很熟悉了用来标识表单提交时的key值 min:是表单标签新增加的属性标识当前输入框输入的最小值 max:那就是最大值了 step：是步长的意思，也就是在点击增大或者减小的时候的增加减少的步长。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 1）只能输入数字的Number类型input标签 Html代码为:input type=number name=demoNumber min=1 max=100 step=2/ 小结：min，max，step是表单标签中添加的新的属性。另外就是type又增加了一个新的number类型，接受数字输入。而之前我们要做到这样的效果只能通过js在失去焦点时候判断，控制起来不那么方便，现在一切都那么简单简洁。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 2）新型Email类型input标签 Html代码：input type=email name=email placeholder=请输入注册邮箱 / 运行效果： 注：在上面HTML代码中，相对于之前的标签，不同点：type=email表示当前input标签接受一个邮箱的输入。另外：placeholder=请输入注册邮箱 ：提示信息 小结：当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式，另外placeholder属性带来的提示信息功能太强大了。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 3）新型Ur