表单对象包括：
文本域 ---单行 ---多行 ---密码文本框 复选框 单选按钮 文件域 图像域 按钮 ---提交 ---重置 ---普通 列表/菜单 ---下拉列表 ---列表框 隐藏域 跳转菜单
二、表单作用
表单的典型应用
注册用户 收集信息 反馈信息 为网站提供搜索工具
注册用户
反馈信息
单行文本输入 框(TEXT)
<FORM name="form3" method="post" action=""> <INPUT type="checkbox" name="gen" value="男" 男 size="21“ maxlength=4 checked="checked"> …… </FORM>
控件的初始 控件的初始 宽度
查看源代码
表单元素的逐一介绍复选框值 复选框名
复选框基本语法
复选框 复选框名
<INPUT type=“checkbox” name="cb2" value="talk">
设置此复选 <FORM name="form4" method="post" action=""> 框被选中 …… <LABEL> <INPUT type="checkbox" name="cb2" value="talk"checked="checked"> </LABEL>聊天 聊天 聊天 …… </FORM>
指定提交后， 指定提交后，由服务器 上那个处理程序处理
ACTION = “URL”
METHOD =“post或get” 或
演示示例1 post提交方式 get提交方式 演示示例1：使用 post提交方式 和 get提交方式
表单元素的统一格式
指定元素的类型， 指定元素的类型，可 为TEXT、RADIO、 、 、 SUBMIT等 等 控件的名称 控件的名称 控件的初始值 控件的初始值
文本框中的内容
cols="40" rows="6"> 查看源代码 </TEXTAREA>
演示——文本框示例
表单输入元素
• 单选按钮和复选框
性别：<INPUT TYPE=radio NAME=”sex” VALUE=”male”>男性 <INPUT TYPE=radio NAME=”sex” VALUE=”female”>女性
查看源代码
表单元素的逐一介绍 初始密码
密码框基本语法
密码框
密码区宽度
<INPUT type=“password ” value=“ 123456 ” size=“22”>
<FORM name="form2" method="post" action=""> …… <P>密 码： 密 码 <INPUT value=“ 123456 ” type="password" size="22"> </P> 密码框， 密码框，22 </FORM> 个字符宽度
演示——不同的按钮效果
制作“注册”页面
本章任务
表单的工作原理
列表选项
年世界杯冠军？ 谁是 2010 年世界杯冠军？
表单元素的逐一介绍 查看源代码 设置此输入框最多
出生日期： 出生日期： <INPUT name="byear" value="yyyy" size=4 maxlength=4 > <select 指定列表名称” 行数” 指定列表名称 行数 设置“ 选择月份 选择月份]” 设置“[选择月份 年 name=“指定列表名称” size=“行数”> 年 <option value=“可选项的值” selected>…</option> 选项默认被选中 可选项的值” 可选项的值 <SELECT name="bmon"> <option value=“可选项的值”> …</option> 可选项的值” 可选项的值 <OPTION value=" " selected>[选择月份 </OPTION> 选择月份] 选择月份 …… <OPTION value=0>一月 一月</OPTION> 一月 </select> <OPTION value=1>二月 二月</OPTION> 二月 说明： 说明： …… size确定列表中可同时看到的行数。 确定列表中可同时看到的行数。 确定列表中可同时看到的行数 </SELECT> selected默认被选中的可选项。 默认被选中的可选项。 默认被选中的可选项 月 <INPUT name="bday" value="dd" size=2 maxlength=2 > 日
列表框基本语法
只能输入四个符号
演示——选项菜单
表单输入元素-2
• BUTTON（按钮） （按钮）
<INPUT name="button1" type="submit" value="提交"> <INPUT name="button2" type="reset" value="重置"> <INPUT name="button3" type="button" value="普通按钮">
控件中输入的 最多字符个数
控件是否 被选中
表单输入元素
• TEXT（文本） （文本）
身份证号<input type="Text" name="PID" value="" size34;>
密 码： <INPUT type=password value=“” name=“pass" size=15>
Type 属性： 属性： submit： 提交按钮 reset： 重置按钮 button： 普通按钮
按钮类型可为 表单元素的逐一介绍 button、submit 、 按钮上的标签 按钮名称
按钮基本语法
<INPUT type="reset" name="Reset" value=" 重填 "> 查看源代码
表单元素的逐一介绍 单选按钮 初始值
初始值
默认选中
单选按钮基本语法
<INPUT type="radio" value="男" checked="checked">
<FORM name="form3" method="post" action=""> <BR>性别： 性别： 性别 <INPUT name="gen" type="radio" class="input" value="男" checked> 男 <IMG src="images/Male.gif" width="23" height="21">男 男 …… </FORM> 设置此单选 按钮被选中
<FORM name="form6" method="post" action=""> <P> <INPUT type="reset" name="Reset" value=" 重填 "> …… <INPUT type="button" name="cancel" value="取消 取消"> 取消 </P> </FORM> 单击按钮， 单击按钮，控件的值 被重置为value属性 被重置为 属性 中指定的初始值
查看源代码
表单元素的逐一介绍 文本框 文本框
多行文本框基本语法 的名字
<TEXTAREA name="textarea"
的列数
文本框 的行数
6行40个字符宽 行 个字符宽 度的多行文字域 <FORM name="form7" method="post" action=""> …… <TEXTAREA name="textarea" cols="40" rows="6">欢迎阅读服务条款协议， 欢迎阅读服务条款协议， 欢迎阅读服务条款协议 本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 网站的各种工具和服务。 本协议阐述之条款和条件适用于您使用 网站的各种工具和服务 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务 </TEXTAREA> …… </FORM>
