第04章 输入

• 普通按钮
<input type=“button” name=“btn” value=“按钮” />
WEB系统开发与设计
8、其他
• 图像域
• 文件域
第03章 输入
13
目录
WEB系统开发与设计
三、form元素
第03章 输入
14
• 需要提交到服务器的信息，都要放在form（表单）内。 • 同个页面可以有多个表单，各自独立，点击的“提交” 按钮在哪个表单中即提交该表单的信息。 • 基本格式：
WEB系统开发与设计
对于复选框和单选按钮
• 注意：
第03章 输入
9
（1）同组复选框或者单选按钮，名字（name）必 须相同。
（2）值必须指定，且值和显示的内容无关，和提 交至服务器的信息有关。
（3）选定哪些或者哪个内容，对应的值将被提交 给服务器（点击“提交”按钮后）。
WEB系统开发与设计
5、下列框
第4章 输入模块
WEB系统开发与设计
主要内容
• 一、输入方式
• 二、常用表单元素 • 三、form元素
第03章 输入
2
• 四、信息验证
WEB系统开发与设计
一、输入方式
• 输入方式
用户如何把信息提交给服务器 所有的Web应用均相同
第03章 输入
3
• 可以采用如下的输入方式
（1）通过浏览器的地址栏（可以使用“？”） （2）通过超链接或者按钮 （3）通过表单提交
第03章 输入
15
• 信息验证主要用于确保用户输入的信息合乎一些规范 和要求，例如
输入的用户名和密码字符长度是不是符合要求
输入的日期格式是否正确 按钮组有没有进行选择等。
• 通过信息验证后再将信息提交至服务器，可以确保用 户输入的信息是有效的，此举可以提高总体效率。
WEB系统开发与设计
1、信息验证的基本过程：
<script language="javascript" src="javascript.js"></script>
• 说明：在外部JS文件中，不需要将脚本代码用<script> 和</script>标记括起来。
WEB系统开发与设计
（3） JavaScript的数据类型与运算符
（A）数据类型 （B）变量
<form name=“form1” action=“目标文件” method=“get post”>
各种表单元素 </form>
action：指出提交给服务器哪个文件处理 method：提交的方式 • get：少量信息时 • post：信息量大时
目录
WEB系统开发与设计
四、信息验证
• 可以利用Javascript语言在客户端实现信息验证。
WEB系统开发与设计
（2）在JSP中引入JavaScript
B、链接外部JavaScript
• 使用情况： 脚本代码比较复杂； 同一段代码可以被多个页面所使用。
第03章 输入
20
• 放置这些脚本代码的文件的扩展名为.js。在需要使用该 代码的Web页面中链接该JavaScript文件即可。语法格 式如下：
WEB系统开发与设计
（B）变量
第03章 输入
23
• 在JavaScript中，可以使用命令var声明变量，语法格 式如下：
var variable;
• 在声明变量的同时也可以对变量进行赋值：
var variable=11;
• JavaScript采用弱类型的形式，在声明变量时，不需要 指定变量的类型，而变量的类型将根据其变量赋值来确 定。例如：
WEB系统开发与设计
（1）在JSP中引入JavaScript
• 有以下两种方法： 一种是在JSP页面中直接嵌入JavaScript 另一种是链接外部JavaScript。
第03章 输入
19
A、在页面中直接嵌入JavaScript
<script language="javascript"> … </script>
WEB系统开发与设计
4、复选框
第03章 输入
8
• 与单选按钮相似，但复选框主要用于多个选择的情况
• 基本格式：
<input type=“checkbox” name=“名字” value=“值” />显示的信息
• 例如
<input name="like" type="checkbox" id="like" value="1" />运动 <input name="like" type="checkbox" id="like" value="2" />看电影 <input name="like" type="checkbox" id="like" value="3" />读书 <input name="like" type="checkbox" id="like" value="4" />听音乐
点击提 交 触发事 件
第03章 输入
16
调用事件 处理程序
其间调用各个处 理方法
错误：返回警告 正确：什么都不 做
非空验证方法 字符串长度验证方法 日期验证方法 电子邮件验证方法 数字验证方法 ……
WEB系统开发与设计
2、涉及的相关内容
• Javascript语言
在网页中嵌入Javascript语言的方法：P52 函数：P52
WEB系统开发与设计
运算符
运算符 + － * / % ++ 加运算符 减运算符 乘运算符 除运算符 求模运算符 描 述 示 1+6 //返回值为7 5-2 //返回值为3 7*3 //返回值为21 9/3 //返回值为3 6%4 //返回值为2 例
第03章 输入
26
自增运算符。该运算符有两种情况：i++ i=1; j=i++ //j的值为1，i的值为2 （在使用i之后，使i的值加1）；++i（在 i=1; j=++i //j的值为2，i的值为2 使用i之前，先使i的值加1） 自减运算符。该运算符有两种情况：i-（在使用i之后，使i的值减1）；--i（在 使用i之前，先使i的值减1） i=6; j=i-- //j的值为6，i的值为5 i=6; j=--i //j的值为5，i的值为5
case
catch char
else
extends false
goto
implement s import
native
new null
static
super switch
var
void while
class
final
in
package
synchronized
with
WEB系统开发与设计
（C）运算符
• 可单选也可多选
• 基本格式
<select name=“名字" [multiple] size=n />运动 <option value=“值1” [selected]>显示的值1</option> <option value=“值2” [selected]>显示的2</option> <select name="province" id="province" size=1>
表示文本区域每行 最多20个字符（中 文10个），无滚动 条情况下显示8行。
WEB系统开发与设计
7、按钮
• “提交”按钮
<input type=“submit” name=“submit” value=“提交” />
第03章 输入
12
• “重置”按钮
<input type=“reset” name=“reset” value=“重置” />
var varible=17; var str="爱护地球"; //数值型 //字符型
WEB系统开发与设计
（B）变量
第03章 输入
24
• 但是变量命名必须遵循以下规则： A、必须以字母或下划线开头，中间可以是数字、字母 注意：关键字同样 不可用作函数名、 或下划线，但是不能有空格或加号、减号等符号。 对象名及自定义的 B、不能使用JavaScript中的关键字。JavaScript的关键 方法名等。 字如下表所示。
• 例如： 注册功能中，用户名的输入：
用户名：<input type=“text” name=“username” value=“张三” />
WEB系统开发与设计
2、密码框
• 输入密码时使用，显示“*”或者“.”
• 提交至服务器的并非“*”或者“.” • 基本格式
第03章 输入
6
<input type=“password” name=“输入信息的名字” value=“输入信息的 值” />
• 例如： 注册功能中，用户输入的密码
密 码：<input type=“password” name=“userpass1” value=“” />
B系统开发与设计
3、单选按钮
• 需要多选一的情况下使用