表单
作用：
1.采集功能
2.与访问者进行交流
基本元素
1.填写的控件按钮
2.处理脚本
【脚本】：使用一种特定的描述性语言，依据一定的格式编写的可执行文件。是一种纯文本保存的程序，一般来说，计算机脚本程序是确定的一系列控制计算机
进行运算操作的组合，在其中可以实现一定的逻辑分支。
通俗地讲：一条条的文字命令，这些命令是可以看到的（记事本打开查看、编辑）。
脚本程序在执行时，是有系统的一个解释器，将其翻译成可识别的指令，并按程序顺序执行
基本语法
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 </head> 5 <body> 6 <!--post，密文：银行账户 作用：提交敏感信息--> 7 <!--get，明文，提交参数在地址栏可见 作用：收藏--> 8 <form action="表单提交地址" method="提交方法"> 9 文本框，按钮等表单元素 10 </form> 11 </body> 12 </html>
范例：登录页
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <form action="doLogin.jsp" method="post"> 8 <!--文本框--> 9 用户名：<input type="text" name="txtName"/><br/> 10 <!--密码框--> 11 密 码：<input type="password" name="txtPwd"/><br/> 12 <input type="submit" value="登录"/> 13 <input type="reset" value="重置"/> 14 </form> 15 </body> 16 </html>
表单元素
1.文本框 type="text"
type：表单元素的类型，如text、button、radio等
name：表单元素的名称，与服务器交互或js脚本调用时使用
size：文本框的宽，英文字符长度 maxlength：访问者可输入的最长的英文字符长度
value：文本框的默认值
2.密码框 type="password"
3.按钮
submit：登录
reset：重置 <!--reset，回到初始状态-->
button：普通按钮
image：图片
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <form action="doLogin.jsp" method="post"> 8 <input type="submit" name="btnLogin" value="登 录"/> 9 <input type="reset" name="btnReset" value="重 置"/> 10 <input type="button" name="btnOK" value="普通按钮"/> 11 <input type="image" name="btnImage" src="../homework/top2/作业3：素材/images/5.gif"/> 12 </form> 13 </body> 14 </html>
4.单选按钮
name：同一组的属性，名字一样
checked：默认选中
checked 过渡型
checked="checked" 严格型
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <form action="doLogin.jsp" method="post"> 8 <!--男是文本，给访问者看--> 9 <!--value，给后台程序员看--> 10 <input type="radio" name="rdSex" value="1" checked="checked"/>男 11 <input type="radio" name="rdSex" value="2"/>女 12 </form> 13 </body> 14 </html>
5.复选框
name是同一组的属性，尽量一样
◆可以取消选项◆
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <form action="doLogin.jsp" method="get"> 8 <input type="checkbox" name="chkFav" value="登山"/>登山 9 <input type="checkbox" name="chkFav" value="运动"/>运动 10 <input type="checkbox" name="chkFav" value="聊天" />聊天 11 </form> 12 </body> 13 </html>
6.文件域
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <form action="doLogin.jsp" method="post"> 8 <input type="file" name="fileUpload"/><br/><br/> 9 <input type="button" name="btnUpload" value="上传"/> 10 </form> 11 </body> 12 </html>
7.下拉列表框
◆如果有两个以上selected="selected"，最后默认的是最后一个selected="selected"
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <select name="selCity"> 8 <option value="" selected="selected">-请选择-</option> 9 <option value="1">北京</option> 10 <option value="2">上海</option> 11 <option value="3">广州</option> 12 <option value="4">深圳</option> 13 </select> 14 </body> 15 </html>
8.文本域
rows 行
cols 列 字符数量
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <input type="checkbox" name="chkAgree" value="abc"/>我已经阅读并同意《天涯社 8 区用户注册协议》 <br/> 9 <textarea rows="8" cols="40"> 10 1.1 天涯社区www.tianya.cn的所有权和运营权归天涯社区网络科技股份有限公司所有。 11 1.2 用户在使用本社区的服务之前， 应当仔细阅读本协议， 并同意遵守本协 12 议及所有社区规则后方可成为天涯用户...... 13 </textarea> 14 <input type="submit" name="登 录"/> 15 <input type="reset" name="重 置"/> 16 </body> 17 </html>
9.隐藏域 hidden
作用：方便服务器端记住客户端的数据，避免显示用户不关心的数据导致的反感
对网页的访问者是不可见的
缺点：1.较高的安全隐患
2.存储结构简单
3.存储较大，则会导致性能问题
4.hidden多，某些客户端被禁止★★
5.hidden在服务器上
属性：
readonly：框内的内容只允许看，不允许修改
disabled：因没达到使用的条件，限制用户使用
技巧：a+右键 查看源代码
语义化表格
th可代替td，加粗，居中
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <!--打印出表格，border值是（线宽）宽度--> 8 <table border="3"> 9 <thead> 10 <tr> 11 <td>手机充值、IP卡</td> 12 <td colspan="3">办公设备、文具、耗材</td> 13 </tr> 14 </thead> 15 <tbody> 16 <tr> 17 <!--在td中进行跨行、跨列--> 18 <td rowspan="3">各种卡的汇总</td> 19 <td>铅笔</td> 20 <td>彩笔</td> 21 <td>粉笔</td> 22 </tr> 23 <tr> 24 <td>打印</td> 25 <td>刻录</td> 26 <td>墨盒</td> 27 </tr> 28 </tbody> 29 <tfoot> 30 <tr> 31 <td>笔记</td> 32 <td>钢笔</td> 33 <td>墨水</td> 34 </tr> 35 </tfoot> 36 </table> 37 </body> 38 </html>
