04 表单和样式表应用.pptVIP

* HTML/CSS基础 表单与样式表应用 回顾 类选择器，标签选择器与ID选择器分别适用什么场合？ 超链接的伪类有哪四种? * 本章目标 会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别 会创建个性化的表单 * 表单 表单的典型应用 注册用户 收集信息 反馈信息 搜索引擎 * 表单包含的控件 * 单行文本输入框(TEXT) 单选按钮(RADIO) 复选框(CHECKBOX) 下拉列表(SELECT) 重置按钮(RESET) 提交按钮(SUBMIT) 多行文本框(TEXTAREA) 密码框(PASSWORD) 表单页面的基本结构 * method =“post或get” ACTION METHOD 指定提交后，由服务器上那个处理程序处理 指定向服务器提交的方法: 一般为post或get方法, post方法比较安全 action = “URL” form action=“” method=“post” …… /form 表单的属性 action：设置服务器上处理程序的位置，参数值是一个URL路径。 method：设置表单的运行方式，可以取值get、post。 get的特点是信息暴露、长度不能超过255字节。 post的特点信息隐藏、长度不限。 * 表单元素的统一格式 * form name=form3 method=post action= input type=checkbox name=gen value=男 size=“21“ maxlength=“4” checked=checked …… /form 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中 表单元素的逐一介绍 * 文本框基本语法 input type=“text” value=张三 size=20 form name=form1 method=post action= p名nbsp;nbsp;字： input type=text value=张三 size=20 /p …… /form 单行文本输入框，字符宽度为20 文本区的宽度 输入元素的默认值 文本输入框 表单元素的逐一介绍 * 密码框基本语法 input type=“password” value=“123456” size=“22” 初始密码 密码框 form name=form2 method=post action= …… p密nbsp;nbsp;码： input value=“ 123456 ” type=password size=22 /p /form 密码框，22个字符宽度 密码区宽度 表单元素的逐一介绍 * 单选按钮基本语法 input type=radio value=男 checked=checked 初始值 单选按钮 默认选中 form name=form3 method=post action= br性别： input name=gen type=radio value=男 checked img src=images/male.gif width=23 height=21男 …… /form 设置此单选按钮被选中 表单元素的逐一介绍 * 复选框基本语法 input type=“checkbox” name=cb2 value=talk 复选框值 form name=form4 method=post action= …… input type=checkbox name=cb2 value=talk checked=checked聊天nbsp;nbsp; …… /form 设置此复选框被选中 表单元素的逐一介绍 * 列表框基本语法 select name=“bmon” size=“1” option value= selected[选择月份] /option option value=0一月/option option value=1二月/option …… /select 设置“[选择月份]”选项默认被选中 列表中可同时看见的行数 表单元素的逐一介绍 * 多行文本框基本语法 textarea name=“textarea” cols=“40” rows=“6”内容/textarea 文本框的名字 文本框的列数 form name=form7 method=post action= …… textarea name=textarea cols=40 rows=6欢迎阅读服务条款协议，本协议阐述