表单

作用：
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 密&nbsp;&nbsp;码：<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：重置 
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>

posted @ 2016-04-07 21:50 Ivy_Xu 阅读(164) 评论(0) 收藏举报

刷新页面返回顶部

Ivyvivid

表单

公告