HTML5+CSS3 Web前端设计基础教程（第6章）.pptxVIP

Web前端设计 基础教程 HTML5+CSS3 06 HTML 5增强型表单与简易表格 【本章导读】 本章将从两方面向读者介绍表单和表格的基本知识，并从实际应用出发，介绍CSS样式中与其相关的属性和常见美化效果。 6.1 表单的创建与编辑 6.1.1 表单的基本知识 1．什么是表单 表单的应用范围非常广泛，不仅用于收集信息和反馈意见，还用于资料检索、网上购物等多种交互式场景，图6-1所示的就是典型的表单应用。 图6-1 表单的典型应用 6.1 表单的创建与编辑 2．什么是表单域 表6-1 表单的参数名称及功能 属 性 名 称 功能解释 id 表单标识名称 表单的名称，该名称可以使用脚本语言引用或控制该表单。 name 表单名称 表单的名称，与ID具有相同的意思。 action 动作 该属性用于定义将表单数据发送到哪个地方，其值采用URL的方式，即处理表单数据的页面或脚本。 method 方法 默认值：浏览器一般默认方法为GET。 GET：把表单值添加给URL，并向服务器发送GET请求。因为URL被限定在8192个字符内，所以内容过多的表单不要使用GET方法。 POST：在消息正文中发送表单值，并向服务器发送POST请求。 6.1 表单的创建与编辑 ectype 编码类型 设置发送表单到服务器的媒体类型，它旨在发送方法为POST时才有效，其默认值为application/x-www-form-urlencode；如果创建的是文件上传域，则应该选择multipart/form‑data。 target 目标 _blank：指的是在新窗口中打开目标文档。 _parent：指的是在显示当前文档窗口的父窗口中打开目标文档。 _self：指的是在当前窗口打开目标文档。 _top：指的是在当前窗口的窗体内打开目标文档。 6.1 表单的创建与编辑 6.1.2 常见的表单对象 1．文本字段（type=text） 图6-4 添加文本字段对象 6.1 表单的创建与编辑 2．复选框（type=checkbox）与复选框组 3．单选按钮（type=radio）与单选按钮组 图6-6 “单选按钮组”对话框 图6-7 没有美化的“单选按钮组” 6.1 表单的创建与编辑 4．提交按钮（type=submit） 图6-8 添加按钮对象 6.1 表单的创建与编辑 5．日期控件（type=date） 6．滑块控件（type=range） 7．颜色选择器控件（type=color） 图6-9 日期控件 图6-10 滑块控件 图6-11 颜色选择器控件 6.1 表单的创建与编辑 8．下拉列表或下拉菜单（select标签） 图6-13 菜单对象预览效果 图6-15 列表对象预览效果 6.1 表单的创建与编辑 9．跳转菜单 图6-16 “插入跳转菜单”对话框 10．表单的自动验证 图6-17 无输入内容时提交 图6-18 输入格式错误时提交 6.2 CSS控制表单 6.2.1 搜索栏 图6-19 搜索栏预览效果 图6-20 搜索栏布局示意图 6.2 CSS控制表单 6.2.2 用户登录页面 图6-21 用户登录界面最终效果 6.2 CSS控制表单 图6-22 用户登录界面布局示意图 6.2 CSS控制表单 6.2.3 传统按钮、CSS3按钮与开源样式库按钮 1．传统按钮的实现 图6-24 传统按钮预览效果 6.2 CSS控制表单 2．CSS3按钮的实现 图6-25 CSS3按钮预览效果 6.2.3 传统按钮、CSS3按钮与开源样式库按钮 6.2 CSS控制表单 3．开源样式库按钮的实现 a href=# class=button button-primary button-rounded button-large第三方样式库按钮/a input type=submit value=表单按钮 class=button button-pill button-primary   图6-26 开源样式库按钮预览效果 6.3 表格 1．表格中常见的标签 （1）table标签 （2）thead标签 （3）tbody标签 （4）tr标签 （5）th标签与td标签 2．在Dreamweaver中创建表格 3．表格的简易操作 （1）选择单元格 （2）拆分、合并单元格 （3）删除、添加行或列 6.3.1 表格的基本概念及其简易操作 6.3