输 入 表 单 (form) 对 某 些 Internet 上 的 网 页 而 言 是 很 重 要 的。 通 常 form 的 输 入 内 容 会 被 送 回 server 中 做 处 理。 JavaScript 具 有 确 认 输 入 值 的 功 能, 可 以 事 先 确 保 这 些 值 是 属 於 "合 法 的",进 而 避 免 将 错 误 的 输 入 值 送 回 server。 首 先 我 将 告 诉 您 如 何 对 form 的 输 入 做 确 认 的 工 作, 再 来我 将 会 提 到 用 JavaScript 将 资 料 送 回 server 的 可 能 性。 咱 们 开 始 吧 ! 我 先 写 一 个 简 单 的 语 法。 在 下 面 我 加 了 两 个 text- 元 件 (element), 请 将 您 的 大 名 写入 第 一 个 空 格, 并 将 您 的 e-mail address 写 入 第 二 个 空 格。 您 可 在 这 两 个 空 格 中 任 意 输 入 并 按 下按 钮。 您 也 可 以 不 输 入 任 何 东 西 就 按 下 按 钮 试 试 ! 请 输 入 您 的 大 名 : 请 输 入 您 的 e-mail address : 对 第 一 个 空 格 而 言, 若 您 没 有 键 入 任 何 东 西, 电 脑 便 会 出 现 一 个 错 误 讯 息, 并 请 您 再 输 入 一 次。当 然, 此 空 格 会 把 任 何 输 入 的 字 串 都 视 为 "合 法 的" 输 入, 它 无 法 辨 认 出 您 输 入 的 名 字 是 正 确 的或 是 胡 的。 即 始 您 输 入 的 是 数 字, 它 也 会 把 此 数 字 当 成 您 的 大 名。 例 如 您 输 入 '17', 它 将 会显 示 '嗨 ! 17'。 第 二 个 空 格 就 设 计 得 稍 微 复 杂 一 点 了。 您 可 试 着 输 入 一 个 简 单 的 字 串 - 例 如 您 的 大 名, 它 将 会显 示 错 误 讯 息, 并 请 您 再 输 入 一 次 (除 非 您 输 入 的 字 串 含 有 @ ...)。 这 个 空 格 的 确 认 标 准 是 检 视您 输 入 的 字 串 中 是 否 含 有 @ 。 即 使 只 输 入 一 个 @, 它 也 会 被 视 为 合 法 的 输 入 --- 虽 然 这 也 不 是正 确 的 e-mail address。 所 有 Internet 的 e-mail address 皆 含 有 @ , 因 此 对 e-mail address 输 入 值做 此 种 确 认 工 作 是 很 适 合 的。 接 下 来 看 看 上 述 功 能 的 原 始 码 吧 : <html> <head> <mce:script language="JavaScript"><!-- Hide function test1(form) { if (form.text1.value == "") alert("您 没 写 上 任 何 东 西, 请 再 输 入 一 次 !") else { alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !"); } } function test2(form) { if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1) alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !"); else alert("您 已 输 入 完 成 !"); } // --></mce:script> </head> <body> <form name="first"> Enter your name:<br> <input type="text" name="text1"> <input type="button" name="button1" value="输 入 测 试" onClick="test1(this.form)"> <P> Enter your e-mail address:<br> <input type="text" name="text2"> <input type="button" name="button2" value="输 入 测 试" onClick="test2(this.form)"> </body> 先 看 看 body- 之 後 的 HTML 语 法。 我 们 嵌 入 了 两 个 text 元 件 和 两 个 按 钮。 第 一 个 按 钮 呼 叫 test1(...), 第 二 个 按 钮 呼 叫 test2(...)。 this.form这 个 变 数 会 将 此 form 的 名 字 (在 此 例 中 就 是 first) 传 给 函 式 (function), 以 便 能 正 确 将 元 件 "定 址" (address)。 test1(form) 的 功 用 在 於 检 查 您 是 否 输 入 字 串 (亦 即 检 查 是 否 为 "空 字 串") ? 此 项 工 作 是 由 if(form.text1.value == "")... 所 执 行。 'form' 这 个 变 数 将 会 接 收 由 'this.form' 所 传 来 的 值。 但 我 们如 何 在 test1(...) 中 抓 取 我 们 所 输 入 的 字 串 呢?您 可 利 用 'value' 这 个 变 数 再 加 上 'form.text1' 来 抓 所输 入 的 字 串。 然 後 将 它 和 " " 比 较, 检 查 是 否 为 "空 字 串"。 若 是 "空 字 串" 则 表 示 并 无 输 入 任 何东 西, 那 麽 Netscape 将 会 出 现 警 告 并 要 求 您 再 输 入 一 次。 若 test1(...) 检 查 结 果 并 非 "空 字 串",则 会 出 现 "您 已 输 入 完 成 !" 的 讯 息。 请 注 意, 即 使 只 输 入 一 个 空 白 (space), test1(...)也 会 将 之视 为 合 法 输 入。 当 然, 您 也 可 以 略 施 小 技 来 排 除 上 述 可 能 性, 我 相 信 这 很 容 易。 现 在 请 看 test2(form)。 在 此 函 式 中 我 们 利 用 相 同 的 方 法 来 检 测 输 入 值 是 否 为 空 字 串, 但 是 我 在 if- 指 令 中 加 入 了 额 外 的 检 测 功 能。 || 这 个 符 号 代 表 OR 运 算 子 (operator), 您 可 在 第 六 章 中 学 习它 的 用 法。 if- 指 令 用 来 检 测 第 一 与 第 二 个 比 较 式 是 否 其 中 之 一 为 "真"?若 有 其 中 之 一 为 "真", 则 整 个 if- 指令 即 为 "真", 如 此 便 会 执 行 其 後 的 指 令。 换 句 话 说, 若 您 没 有 输 入 任 何 字 串 或 您 输 入 的 字 串 中没 有 包 含 '@', 均 会 被 视 为 "不 合 法" 输 入。 您 知 到 有 几 种 方 法 可 用 来 送 出 form 的 内 容 吗?最 简 单 的 方 法 就 是 利 用 e-mail 来 送 出 form 的 内容。 我 下 面 介 绍 的 方 法 就 是 属 於 这 一 种。 若 您 不 想 利 用 e-mail 来 送 出 form 的 内 容 且 想 让 server 能 自 动 处 理 form 的 输 入 值, 此 时 此 刻 只 有 CGI 能 做 得 到。 譬 如 您 想 做 一 个 类 似 Yahoo 可 以 让使 用 者 迅 速 得 到 结 果 的 搜 寻 引 擎 (search engine), 您 就 必 须 使 用 CGI。 如 此 一 来 使 用 者 才 不 需 等待 系 统 管 理 者 处 理 form 的 输 入 值, 而 可 由 server 自 动 处 理 并 迅 速 将 处 理 结 果 报 告 给 使 用 者。目 前 JavaScript 无 法 达 到 此 种 功 能。 即 使 您 想 制 做 一 个 "访 客 签 名 簿" (guestbook), 也 不 可 能 利用 JavaScript 来 叫 server 自 动 将 资 料 加 入 网 页 中。 目 前 只 有 CGI 能 做 到 如 此。 但 您 可 以 制 做 一个 利 用 e-mail 传 送 使 用 者 资 料 的 guestbook, 只 是 您 需 以 手 动 (manual) 方 式 来 处 理 使 用 者 所 传 来的 资 料。 若 您 一 天 不 是 收 到 很 多 使 用 者 送 来 的 资 料 的 话, 这 也 未 尝 不 可。 以 下 语 法 只 使 用 到 普 通 的 HTML 语 法, 并 不 需 用 到 JavaScript ! 只 有 当 您 想 在 资 料 送 出 前 做 一些 确 认 工 作 的 话, 才 需 用 到 JavaScript。 虽 然 目 前 有 些 浏 览 器 无 法 使 用 mailto- 这 项 指 令, 我 相信 较 新 版 的 浏 览 器 都 会 支 援 这 个 指 令。 <FORM METHOD=POST ACTION="mailto:your_email@goes.here"> <H3>您 喜 欢 我 的 网 页 吗 ?</H3> <INPUT NAME="choice" TYPE="RADIO" VALUE="1">一 点 也 不 喜 欢。<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简 直 浪 费 我 的 时 间。<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="3">这 简 直 是 Net 上 最 烂 的 站 台。<BR> <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send"> </FORM> 上 述 语 法 可 藉 由 e-mail 收 到 使 用 者 对 您 网 页 的 观 感。 唯 一 的 困 扰 是 您 可 能 会 收 到 内 容 类 似 密 语 (cryptic) 的 mail。 mail 内 容 的 空 格 (space) 有 时 会 以 '+' 代 替, 有 时 会 以 '%20' 代 替。 看+起+来+ 就+像+这+样。 我 相 信 网 路 上 应 有 某 种 程 式 可 将 收 到 的 mail 转 换 成 "可 读" 的 语 句。 另 外 有 一 种 不 错 的 应 用 可 使 您 的 表 单 输 入 更 具 "亲 和 性" (user-friendly)。 您 可 以 指 定 一 开 始 先"定焦" (focus)於 哪 个 元 件 (element, 简 单 的 说 就 是 输 入 项)。 或 是 您 可 让 浏 览 器 "定 焦" 於 使 用 者 输入 错 误 的 表 单。 换 句 话 说, 浏 览 器 将 会 把 mouse 的 游 标 放 在 您 "定 焦" 的 元 件 上, 如 此 一 来 使 用者 便 不 需 在 输 入 字 串 之 前 按 一 下 mouse。 请 看 这 项 功 能 的 原 始 码 : function setfocus() { document.first.text1.focus(); return; } 这 项 语 法 是 将 "定 焦" 放 在 第 一 个 text- 元 件 上 (以 本 章 为 例, 就 是 在 "请 输 入 您 的 大 名" 的 空 格 中有 游 标 在 闪 烁)。 您 必 需 在 语 法 中 指 定 您 想 "定 焦" 的 表 单 名 字 (以 本 章 为 例, 就 是 first) 和 元 件的 名 字 (以 本 章 为 例, 就 是 text1)。 若 您 在 一 开 始 载 入 网 页 时 就 想 "定 焦" 於 某 个 元 件 上, 只 要在 <body>- tag 中 利 用 onLoad- 即 可 : <body onLoad="setfocus()">