4-HTML表单和HTML框架.pptx

4-HTML表单和HTML框架.pptx

《4-HTML表单和HTML框架.pptx》由会员分享，可在线阅读，更多相关《4-HTML表单和HTML框架.pptx（32页珍藏版）》请在冰豆网上搜索。

4-HTML表单和HTML框架2015Spring,本章内容HTML表单表单域和域集文本框按钮复选框和单选按钮选择框隐藏域滑块和Spinbox验证框本章内容HTML框架框架和noframe标签iframe标签HTML表单从网页中输入用户数据什么是HTML表单？

从站点访问者处收集数据的首要方法HTML表单能够包含为用户输入的文本框为交互的按钮，如注册，登录，搜索菜单，滑块，等查看Google，Yahoo，FacebookGoogle搜索框是简单的文本框如何创建HTML表单？

创建表单块用：

示例：

.methodmethod属性告诉表单属性告诉表单属性告诉表单属性告诉表单数据应该如何发送数据应该如何发送数据应该如何发送数据应该如何发送通过通过通过通过GETGET或或或或POSTPOST请求请求请求请求actionaction属性告诉表单数据属性告诉表单数据属性告诉表单数据属性告诉表单数据应被发送到哪里应被发送到哪里应被发送到哪里应被发送到哪里文本框单行文本输入框：

多行文本输入框（文本区）密码输入文本框用*星号替代输入的文字Thisisamulti-linetext按钮重设按钮将表单到其初始状态提交按钮：

图像按钮像提交的动作，但显示图像并传送点击坐标传统按钮没有默认动作，用于JS多选框和单选按钮多选框：

单选按钮：

单选按钮能够组合起来，允许一组中只有一个被选中：

选择框下拉式菜单：

多选菜单：

MaleFemaleOtherkeyboard隐藏域隐藏域包含了不可见数据并不给用户显示用于JavaScript和服务器端代码如ASP.NET中的视图状态，session会话状态标签Label标签用于关联一个解释性文本到表单域上，使用域的ID单击一个标签，集中到关联域上多选框切换单选按钮选中标签是同时有可用性和可访问性特征需要通过可访问性验证FirstNFieldset域集域集用于包含一组相关的表单域：

是域集的标题ClientDetailsOrderDetailsHTML表单输入域演示滑块和选值框让值可选范围和选值框约束用户只输入数字附加属性min,max和step和value能够成为选值框或滑块，依赖输入类型有一些区别，在不同的浏览器上选值框不能在Firefox上运行显示为正规文本框滑块和选值框演示来自HTML5的域属性Autocomplete浏览器存储之前输入的值在之后的访问中，返回到之前输入值Autofocus在页面加载时集中到域Required域需要被填写或选择带验证的输入框Email提供邮件的简单验证能够传一个验证模式在手机设备上呼出邮件键盘URLurl的验证在手机设备上呼出url键盘Telephone呼出数字键盘HTML表单验证演示TabIndex跳格索引tabindex这一HTML属性，控制着表单域和超链接的焦点顺序当重复按下TAB键tabindex=0（zero）自然序列如果XY，那么有tabindex=X的元素在有tabindex=Y的元素之前访问带有负tabindex的元素将跳过，但这不是标准定义跳格索引演示HTML框架,和HTML框架Frame框架提供了在单一网页中显示多个HTML文档的方法页面能按水平方向和竖直方向分为独立的视图（框架）框架在早期HTML开发中很流行，但现在这种用法被否决框架不是对所有的用户代理（浏览器，搜索引擎，等）支持元素用于为不兼容的代理提供内容HTML框架-示例frames.htmlFramesExample内联框架：

inline内联框架提供了一种在一个网站中显示另一个网站的方法提问环节提问环节练习1.创建一个Web表单看上去像：

练习2.创建下列表格和表单练习3.创建下列HTML页面提示：

使用域集和嵌套表格练习4.*构建下列网格组件：

试着生成HTML页面，看起来如上图需要CSS谢谢观赏！

谢谢观赏！