Microsoft Word - 第7章表单17ok.doc

Size: px

Start display at page:

Download "Microsoft Word - 第7章表单17ok.doc"

人董
5 years ago
Views:

1 80 第 7 章表单网页中的表单可以用来收集用户填写的信息, 如某网站的问卷调查网站的注册会员等都会用到表单表单可以说是个容器, 里面的类型不同, 所表示的功能也不同表单容器里面的表单元素, 其中有文本框密码框单选框复选框等, 通过 <input> 标记体现它们的功能在本章中, 将会学到以下知识 : 表单和表单元素文本框和密码框表单单选框和复选框按钮下拉框和文本域 7.1 表单基本语法表单是一个能够包含表单元素的容器, 表单元素是能够让用户在表单中输入信息的元素, 可以这样说, 表单里面包含表单元素表单在动态网页中常用, 用来收集用户的信息, 保存到数据库中表单语法是由一对标签对组成 <! 设置表单标记对 --> 在上面的表单中就可以包含表单元素, 用表单元素添加信息, 不同的表单元素所表现的功能不一样, 如 input 输入类型有 text password 等等, 分别输入的是文本和密码, 下一节会讲到表单元素, 代码 7.1 是表单的基本用法代码 7.1 表单基本语法源代码 \ 第 7 章 \ 表单基本语法.htm <title> 表单基本语法 </title> <! 设置空的表单 --> 表单有两个属性会常用到, 就是 action 和 method,form 中的 action 是表示表单提交后发送的 URL 地址, 发送的方式用 method 表示, 可选择的参数有 GET 和 POST GET 传输

$81 量比较小, 而 POST 传输值比较大, 这是二者最基本区别现在可以知道, 一个表单除了要用表单元素外, 还会用到这两个属性来传值, 值是传给 URL 地址的后台, 处理后保存到数据库, 本书中只讲解前台页面知识代码 7.2 是表单的完整实例代码 7.2 表单两属性源代码 \ 第 7 章 \ 表单两属性.htm <title> 表单两属性 </title> <!$

2 81 量比较小, 而 POST 传输值比较大, 这是二者最基本区别现在可以知道, 一个表单除了要用表单元素外, 还会用到这两个属性来传值, 值是传给 URL 地址的后台, 处理后保存到数据库, 本书中只讲解前台页面知识代码 7.2 是表单的完整实例代码 7.2 表单两属性源代码 \ 第 7 章 \ 表单两属性.htm <title> 表单两属性 </title> <! 设置表单, 并在表单中输入参数 --> <form action="show.aspx" method="get"> <! 设置文本框 --> <input type="text"> <! 设置密码框 --> <input type="password"> <! 设置按钮提交 --> <input type="button" value=" 提交 "> 代码 7.2 表示在网页中的表单上, 有两个输入框和一个按钮, 当单击提交按钮后, 表单中的信息通过表单元素收集值, 然后通过 GET 方法传到 show.aspx( 本页面是.net 的动态页 ) 页面本书只讲解前台部分知识, 图 7.1 就是上述代码的页面效果图 7.1 表单 action 和 method 注意 :action 后面的值因动态语言不同而后缀不一样 Method 的值只能是 GET 和 POST 的一种在上面的实例中可以看到, 在表单里面用到 <input> 语法, 表示在表单中输入选项, 完整的语法代码如下 : <input type="#"> 其中 # 代码可选项,text password checkbox radio hidden submit 和 reset 分别代

3 82 表 : 文本密码多选框单选框隐藏提交按钮和重置按钮, 这就是上面常讲到的表单元素有关 <input> 的部分选项值, 稍后做出详细讲解注意 : 与 php aspx jsp 等为后缀的动态网页结合, 所用动态语言不同, 但用表单和表单元素都相同的 7.2 文本框和密码框通过上一节的学习, 知道了表单元素, 现在开始学习表单元素 <input> 的部分类型在网页中常常看到用户输入帐号和密码之类的信息, 现在学习的正是如何来定义文本框和密码框文本框在 <input> 中, 用 type 来表示要选择的类型, 文本框是用来输入文本信息的, 可以输入汉字数字和字母等, 完整语法代码如下 : <input type="text"> 上面就代表一行输入文本的输入框, 供用户输入信息, 关键地方是在 type 后面选择 text, 正好代表文本, 从页面表现的效果正是用户在登录时的那些输入格式, 代码 7.3 所表示的是文本框完整代码 <title> 文本框 </title> 代码 7.3 文本框表示源代码 \ 第 7 章 \ 文本框.htm <! 在一个表单中, 只有文本框 --> <! 设置文本框 --> 文本框 :<input type="text"> 上面代码的文本框, 标记为 <input>, 参数 type 表示框中的类型, 在此输入的是 text, 表示文本框代码的浏览效果如图 7.2 所示

4 83 图 7.2 文本框注意 : 文本框的上限是 255 个字元在 <input> 里面还有很多属性, 本节不打算介绍, 现在先让读者对 <input> 有初步的认识密码框密码框是为了隐藏用户密码信息的输入框, 语法形式与文本框差不多, 不同的是类型为 password 可能有的读者会问, 在密码框里面输入的密码信息会不会显示出来, 如果这样的话密码就不安全了其实这个不用担心, 当在密码框输入密码时, 所输入的字符等全用 * 替代, 这样从页面显示上隐藏了密码信息, 密码框在表单上的语法形式 : <input type="password"> 表示一个用来输入密码的框并且会用 * 替代输入的信息, 与文本框一样,<input> 里面还有属性可以选择, 这在以后慢慢讲解, 代码 7.4 演示密码框的使用 <title> 密码框 </title> 代码 7.4 密码框表示源代码 \ 第 7 章 \ 密码框.htm <! 在表单中只有密码框 --> <! 设置密码框 --> 密码框 :<input type="password"> 代码 7.4 中, 表示密码框的关键代码是 : <input type="password"> 密码框的设置与文本框一样, 在 <input> 标记下设置 type 参数为 password 表示密码, 其中密码框中输入的文本被小圆点代替, 为了隐藏密码, 起到安全作用, 当刷新页面时, 密码及时清除, 效果如图 7.3 所示

5 84 图 7.3 密码框注意 : 密码框是为了保证密码安全性, 当在制作相应的表单和密码框的网页时, 也要考虑表单或密码的安全性 7.3 单选框和复选框表单的功能就是收集用户填写的信息当出现多个选项而且只能选择一个选项时, 当可以选择两个或两个以上时, 就会分别用到单选框和复选框通过本节的学习, 使读者掌握如何在网页中要求用户填表单时是单选还是复选, 单选在选项中只能选择一项, 而复选可以选择多项, 即本节介绍的单选框和复选框单选框单选框是在表单中有多个选项, 且只能选一个的情况下使用和文本框与密码框一样, 都是设置在 <input> 里面的 type 属性上, 表示单选的是 radio, 请看下面单选框的语法代码 : <! 设置单选框 --> <input type="radio"> 在表单中, 单选框是存在多个选项的, 当从多选项中选择一个选项中, 为了区别这几个选项是属于哪个单选框的时, 用属性 name 表示如果想指定某个选项处于选中状态下时, 用 checked 在 <input> 为 radio 类型里表示选中状态, 从第一个 <input> 结束到下一个 <input> 开始前表示第一个 <input> 的选项值, 代码 7.5 演示了单选框用法 <title> 单选框 </title> 代码 7.5 单选框表示源代码 \ 第 7 章 \ 单选框.htm <! 在表单中出现表单, 并有多个单选框 --> 下面是单选框 :<p> <! 设置 3 个单选框, 且都设置 name 为 book--> <input type="radio" name="book"> DIV

6 85 <! 设置 name 为 book, 表示选项在 book 中选一个 --> <input type="radio" name=book checked > HTML <input type="radio" name=book >CSS 效果如图 7.4 所示图 7.4 单选表示注意 :radio 在 <input> 中是单独表示的, 后面不用结束符, 选项的结束是下一个 <input> 或表单其他项框开始复选框顾名思义, 复选框是可以选多个选项的选项框, 与单选不同的是复选框可以选取多个选项, 而且也可以默认几个选项都处于选中状态, 语法与单选相同 : <! 设置复选框 --> <input type="checkbox" > 复选框的 type 里的值是 checkbox, 与单选框一样, 可以用 checked 表示选中状态在需要选项是多选时用到复选框, 代码 7.6 表示复选框用法 <title> 复选框 </title> 代码 7.6 复选框表示源代码 \ 第 7 章 \ 复选框.htm <! 在表单中设置复选框 --> 下面是复选框 :<p> <! 设置复选框且 name 为 book--> <input type="checkbox" name=book>div 知识 <! 设置 name 为 book 的都在一个选项集内 --> <input type="checkbox" name=book>html 知识 <input type="checkbox" name=book checked> CSS 知识

86 <input type="checkbox" name=book checked>html+css 知识在复选框中, 多个选项组成选项集, 它们的 name 都为同一名称, 这时可以选择多个选项, 选中的选项, 在复选框中用表示, 可以选一个或一个以上的选项, 复选框的浏览效果如图 7.5 所示图 7.5 复选框表示说明 : 单选框与复选框的区别就是被选项是选择一个还是至少一个 7.

7 86 <input type="checkbox" name=book checked>html+css 知识在复选框中, 多个选项组成选项集, 它们的 name 都为同一名称, 这时可以选择多个选项, 选中的选项, 在复选框中用表示, 可以选一个或一个以上的选项, 复选框的浏览效果如图 7.5 所示图 7.5 复选框表示说明 : 单选框与复选框的区别就是被选项是选择一个还是至少一个 7.4 下拉列表与文本域本节来学习下拉列表与文本域, 下拉列表是可以选择的列表也称为下拉表 ; 文本域是可以输入多行文本的区域在表单中常用到, 当要选择出生年月时, 就会用到下拉表, 同理, 选择省份时也会用到文本框在填写多行文本时, 会用到下拉表与文本框在网页应用非常广, 本节来学习它们下拉表下拉列表是可以选择的列表, 当在列表中选择要选的选项时使用, 只能选其中一个选项 ( 通过设置也可以选几项 ) 语法形式如下: <! 设置下拉表 --> <select> <! 设置下拉表选项 --> <option> 选项一 </option> <option> 选项二 </option> <option selected> 选项三 </option> </select> 下拉表是用 <select> 标记对表示,<option> 标记对里面的文字是下拉表的选择项, 其中它的属性 selected 表示已选中状态代码 7.7 演示了下拉表用法

$87 <title> 下拉表 </title> 代码 7.7 下拉表源代码 \ 第 7 章 \ 下拉表.htm <! 设置表单, 并包含下拉表 --> <! 设置下拉表 --> <select> <! 设置选项 --> <option>html</option> <option>css</option> <!$

8 87 <title> 下拉表 </title> 代码 7.7 下拉表源代码 \ 第 7 章 \ 下拉表.htm <! 设置表单, 并包含下拉表 --> <! 设置下拉表 --> <select> <! 设置选项 --> <option>html</option> <option>css</option> <! 设置选项并用 selected 表示被选中 --> <option selected>div</option> </select> 在下拉表中, 用 select 标记对表示下拉表, 且设置被选中的选项时, 在 <option> 内加上 selected 表示选中, 效果如图 7.6 所示图 7.6 下拉表技巧 :<select> 里的属性可以由 name 代表这个下拉表的名称,size 表示下拉表可视选项的数目,multiple 表示可以多选文本域文本域是用在要输入多行文本, 填写大量的文字时用到语法与前面不同的是没有用到 <input>, 而是用 <textarea> 标签对包括着, 代码 7.8 为默认的空文本框, 表现出文本框的用法代码 7.8 文本域源代码 \ 第 7 章 \ 文本域.htm

$7 文本域多行文本域是在文本域上加上两个属性来表示 :rows 表示显示的行数,cols 表示显示的列数通过设置行数和列数来改变文本框的小大, 以便与页面统一布局代码 7.9 为多行文本域代码 7.9 多行文本域源代码 \ 第 7 章 \ 多行文本域.htm <title> 多行文本域 </title> <!$

9 88 <title> 文本域 </title> <! 设置文本域 --> <textarea> <! 文本域内容 --> </textarea> 图 7.7 表示默认文本区域的大小, 文本域中可以输入多行文本, 右边的滚动条因文本多少而显示图 7.7 文本域多行文本域是在文本域上加上两个属性来表示 :rows 表示显示的行数,cols 表示显示的列数通过设置行数和列数来改变文本框的小大, 以便与页面统一布局代码 7.9 为多行文本域代码 7.9 多行文本域源代码 \ 第 7 章 \ 多行文本域.htm <title> 多行文本域 </title> <! 设置文本域和宽高 --> <textarea name=book rows=6 cols=60></textarea> 代码 7.9 中, 表示文本框在网页中的用法其中, 文本框标记为 textarea, 且为标记对, 设置了参数 name 为 book, 同时, 设置行数为 6 行, 而列为 60 个字符, 图 7.8 演示了多行文本域

10 89 图 7.8 多行文本域说明 : 在设置文本域大小时, 根据将文本域内容的多少而设定, 文本域大小与表单大小所占比例要适中 ( 两者要有一定美观性 ) 7.5 按钮按钮在表单中是最重要的, 当输完表单信息时, 需要按钮提交, 当输入错误信息时, 这时需要清除按钮更方便之前所讲的内容都是单项讲解的, 一张完整的网页表单是需要提交按钮提交数据的按钮是 <input> 中类型为 submit 的标单元素, 表示提交用来提交表单数据给 action 的网页上其完整语法代码如下 : <input type="submit" value=" 按钮提交 "> 在 <input> 里面的 type 设置成 submit 后, 还要给 value 设置按钮名称, 名称是用来显示在按钮上的文字和字母按钮在表单中起提交或重置作用, 在标记 input 中设置为 submit 表示提交本表单, 可以把前台填写的数据添加到网页后台然后再保存到数据库中, 当然, 进一步操作超过了网页布局的范围, 不属于本书讲解之中, 但需要了解和掌握表单布局和设置, 代码 7.10 表示按钮在表单的用法 <title> 按钮 </title> <! 设置表单 --> 代码 7.10 源代码 \ 第 7 章 \ 按钮.htm <! 设置文本框 --> 帐户 :<input type="text"><p> <! 设置密码框 -->

11 90 密码 : <input type="password"><p> <! 设置复选框 --> <input type="checkbox" checked> 复选框 <input type="checkbox"> 复选框二 <input type="checkbox"> 复选框三 <p> <! 设置按钮 --> <input type="submit" value=" 按钮提交 "> 在一个简单的表单中, 出现了用文本框表示帐户, 用密码框表示密码的输入框, 还有复选框的设置, 最后的按钮表示提交整个表单给后台, 表单内容如何提交到后台不是本书范围, 如读者想知道其原理, 请查阅相关书籍在本表单实例中, 前台页面即是表单实现页面, 效果如图 7.9 所示图 7.9 按钮提交注意 : 按钮有 submit 和 reset 之分, 前者是提交功能, 后者是重置表单, 即还原成表单的默认状态 7.6 表单实例手把手通过本章学习, 知道了表单的用法, 以及表单元素的表示本节用实例介绍注册页面表单制作其中包括表单输入文本框, 密码, 单选框等, 通过学习, 希望读者能举一反三, 从而对表单有更深层次的理解本实例从 HTML 标记入手, 只讲解网页前台部分 ( 因为表单提交后, 通过后台保存到数据库中 ), 以学习这些标记为主, 以下是表单实例手把手的步骤

$11 源代码 \ 第 7 章 \ 表单实例手把手.html <! 设置表单中的段落 --> <p> 用户注册页面表单实例代码中新建了表单容器, 并在表单里面输入一行文字, 存在段落标记对 <p>, 效果如图 7.10 所示图 7.10 表单容器 7.6.$

12 插入表单在新建网页中插入表单, 表单的标记为, 放在标记对中, 表示在网页中存在表单, 当然, 在一个网页中可以存在多个表单, 即多少表单有多少个其中表单中包括单选框多选框等, 最后用提交按钮把信息提交出去, 即表单相当于一个容器, 代码 7.11 表示表单容器 <title> 表单实例手把手 </title> <! 设置表单 --> 代码 7.11 源代码 \ 第 7 章 \ 表单实例手把手.html <! 设置表单中的段落 --> <p> 用户注册页面表单实例代码中新建了表单容器, 并在表单里面输入一行文字, 存在段落标记对 <p>, 效果如图 7.10 所示图 7.10 表单容器添加文本框和密码框在表单中显示用户名输入, 并有两次密码输入注册页面都有用户名和密码, 而且密码在创立之初, 要输入二次, 显然, 第二次是用来确定密码是否一致, 代码 7.12 表示文本框用来输入用户名, 密码框用来输入密码代码 7.12 用户名和密码源代码 \ 第 7 章 \ 表单实例手把手.htm <title> 表单实例手把手 </title>

13 92 <! 设置表单 --> <p> 用户注册页面表单实例 <p> <! 设置表单中的文本框 --> 用户名 :<input type="text"> <! 设置表单密码框 --> 密码 :<input type="password"> <! 设置表单中的确认密码框 --> 确认密码 :<input type="password"> 以上代码中,<input> 中的 type 为 text 是表示文本输入用户名的框是文本, 而密码的类型为 password, 效果如图 7.11 所示图 7.11 用户名和密码表示添加单选框和复选框添加部分选项实现单选框和复选框注册页面时, 会提供部分选项要用户选择, 有的只能选一个, 如年龄层次的选项 ; 有的可以选多个, 如个人爱好有很多可以选择, 代码 7.13 是单选项和复选项代码 7.13 单选项和复选项源代码 \ 第 7 章 \ 表单实例手把手.htm <title> 表单实例手把手 </title> <! 设置表单 -->

14 93 <p> 用户注册页面表单实例 <p> 用户名 :<input type="text"> 密码 :<input type="password"> 确认密码 :<input type="password"> <! 设置表单中的单选框 --> <p> 您的年龄层是? <input type="radio" name=reg>16 周岁以下 <input type="radio" name=reg>17-22 周岁 <input type="radio" name=reg>23-28 周岁 <input type="radio" name=reg>29 周岁以上 <! 设置表单中的复选框 --> <p> 您个人的爱好有 : <input type="checkbox" name=reg> 交友 <input type="checkbox" name=reg> 上网 <input type="checkbox" name=reg> 看书 <input type="checkbox" name=reg> 篮球 <input type="checkbox" name=reg> 游戏 <input type="checkbox" name=reg> 其他代码 7.13 是在文本框和密码框的基础上, 在表单中再加上单选框和复选框的代码, 效果如图 7.12 所示图 7.12 单选项和复选项表示

15 添加下拉表和文本域下拉表是下拉的列表, 用户在下拉的列表中选择里面的选项 ; 文本域就是可以输入多行的文本区域, 即可以实现回车换行的区域, 代码 7.14 表示下拉表与文本域代码 7.14 下拉表与文本域表示源代码 \ 第 7 章 \ 表单实例手把手.htm <title> 表单实例手把手 </title> <p> 用户注册页面表单实例 <p> 用户名 :<input type="text"> 密码 :<input type="password"> 确认密码 :<input type="password"> <! 设置表单的单选框 --> <p> 您的年龄层是? <input type="radio" name=reg>16 周岁以下 <input type="radio" name=reg>17-22 周岁 <input type="radio" name=reg>23-28 周岁 <input type="radio" name=reg>29 周岁以上 <p> 您个人的爱好有 : <! 设置表单的复选框 --> <input type="checkbox" name=reg> 交友 <input type="checkbox" name=reg> 上网 <input type="checkbox" name=reg> 看书 <input type="checkbox" name=reg> 篮球 <input type="checkbox" name=reg> 游戏 <input type="checkbox" name=reg> 其他 <p> 您来自哪里? <! 设置表单下拉框 --> <select name=come> <option> 北京 </option> <option selected> 广东 </option> <option> 上海 </option> <option> 其他城市 </option> </select> <p> 自我介绍 : <! 设置表单文本域 --> <textarea cols=60 rows=5>

$15 添加了一个提交按钮和重置按钮代码 7.15 提交和重置按钮源代码 \ 第 7 章 \ 表单实例手把手.htm <title> 表单实例手把手 </title> <! 设置表单 --> <p> 用户注册页面表单实例 <p>$

16 95 </textarea> 把下拉表命名为 come, 且选项广东为默认选中状态 ; 在页面中, 添加了一个 5 行且每行为 60 字大小的文本可视区域, 效果如图 7.13 所示图 7.13 下拉表和文本域表示在表单中添加提交按钮一个表单必需提交后才能保存数据到数据库, 所以提交按钮是不能少的, 代码 7.15 添加了一个提交按钮和重置按钮代码 7.15 提交和重置按钮源代码 \ 第 7 章 \ 表单实例手把手.htm <title> 表单实例手把手 </title> <! 设置表单 --> <p> 用户注册页面表单实例 <p>

17 96 用户名 :<input type="text"> 密码 :<input type="password"> 确认密码 :<input type="password"> <p> 您的年龄层是? <input type="radio" name=reg>16 周岁以下 <input type="radio" name=reg>17-22 周岁 <input type="radio" name=reg>23-28 周岁 <input type="radio" name=reg>29 周岁以上 <p> 您个人的爱好有 : <input type="checkbox" name=reg> 交友 <input type="checkbox" name=reg> 上网 <input type="checkbox" name=reg> 看书 <input type="checkbox" name=reg> 篮球 <input type="checkbox" name=reg> 游戏 <input type="checkbox" name=reg> 其他 <p> 您来自哪里? <select name=come> <option> 北京 </option> <option selected> 广东 </option> <option> 上海 </option> <option> 其他城市 </option> </select> <p> 自我介绍 : <textarea cols=60 rows=5> </textarea> <! 设置表单表单提交按钮 --> <p><input type="submit" value=" 注册 "> <input type="reset" value=" 重置 "> 按钮的值用 <input> 中的 value 属性表示, 此时整个注册网页就完成了本实例只讲解表单和表单元素的用法, 所以对显示效果没做处理, 效果并不是最终网页效果, 以后学到 CSS 部分就可以对表单布局控制, 就可以做出美观的网页最后整个网页效果如图 7.14 所示

18 97 图 7.14 添加按钮后整个注册页效果注意 : 一张表单中必需加 action 和 method 才可以提交, 本实例并不涉及动态网页和后台数据处理, 所以没给出 action 中的网页和 method 的方法 7.7 小结本节主要介绍了网页中的表单, 并详细讲解了前台设计的表单元素其中常用的表单元素有文本框和密码框单选框和复选框下拉表和文本域, 还有按钮表单相当于容器, 包含着表单元素, 通过不同的表单元素体现的不同功能, 使网页能够收集不同信息最后通过实例再次认识了表单和表单元素的用法

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值

Microsoft Word - 第7章 表单17ok.doc

Microsoft Word - 第7章表单17ok.doc