05. 表单处理

发表于 分类于 ，

表单可以包含大多数常见的图形界面元素，包括输入字段、单选按钮、复选框、弹出菜单和输入列表。另外，HTML 表单可以包含密码字段，这种控件可以避免用户的输入被别人偷看。

在填写表单之后，单击表单上的 Submit 按钮，会将表单的信息发送到 Web 服务器，在服务器上服务器端脚本会解释并操作这些数据。通常，将数据存储在数据库中供以后使用。在服务器端存储数据之前，需要确保用户输入的数据是“干净”的，也就是说，数据是准确的且具有正确的格式。JavaScript 是检查数据的好方法，这种技术称为表单验证（form validation）。尽管服务器端脚本可以完成验证（而且应该作为预防措施，因为有些用户会在浏览器中关闭 JavaScript 功能），但是在客户机上用 JavaScript 进行验证要快得多，而且用户操作的效率也更高。

在本章中，你将学习如何使用 JavaScript 确保表单包含有效的信息，针对另一个字段中的数据检查一个字段中的数据，以及突出显示错误的信息，让用户知道需要修改什么。

标签 属性 意义
form 这个标签包含下面的任何标签，构成有效的 HTML 表单
  action 在 Web 服务器上处理数据的服务器端脚本的名称
input 这个标签显示不同类型的表单字段，具体取决于 type 属性的值
  name 主要用来对单选按钮进行分组
  maxlength 用户可以在这个字段中输入的数据的最大长度
  size 在页面上显示的字符数量
  type 所需的输入控件类型，有效值是 button、checkbox、image、password、radio、reset、submit 和 t ext
  value 预先为这个表单字段设置的值
label 用来为没有内置标签的控件指定标签，比如文本字段、复选框、单选按钮和菜单
  for 将标签与特定元素的 id 关联起来
option 在 select 标签中可用的选项
  selected 指出这个选项是否作为默认选项
  value 每个选项的预设值
select 这种表单字段显示弹出菜单或滚动列表（取决于 size 属性）
  size 在页面上显示的选项数量。如果这个属性设置为 1，或者没有提供这个属性，就会显示弹出菜单

选择并转移导航菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <title>Select and Go Navigation</title>
    <link rel="stylesheet" href="script01.css" />
    <script src="script01.js"></script>
  </head>
  <body>
    <form action="gotoLocation.cgi" class="centered">
      <select id="newLocation">
        <option selected>Select a topic</option>
        <option value="script06.html">Cross-checking fields</option>
        <option value="script07.html">Working with radio buttons</option>
        <option value="script08.html">Setting one field with another</option>
        <option value="script09.html">Validating Zip codes</option>
        <option value="script10.html">Validating email addresses</option>
      </select>
      <noscript>
        <input type="submit" value="Go There!" />
      </noscript>
    </form>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = initForm
window.onunload = function () {}

function initForm() {
  document.getElementById("newLocation").selectedIndex = 0
  document.getElementById("newLocation").onchange = jumpPage
}

function jumpPage() {
  var newLoc = document.getElementById("newLocation")
  var newPage = newLoc.options[newLoc.selectedIndex].value

  if (newPage != "") {
    window.location = newPage
  }
}

动态地改变菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Menus</title>
    <script src="script02.js"></script>
  </head>
  <body>
    <form action="#">
      <select id="months">
        <option value="">Month</option>
        <option value="0">January</option>
        <option value="1">February</option>
        <option value="2">March</option>
        <option value="3">April</option>
        <option value="4">May</option>
        <option value="5">June</option>
        <option value="6">July</option>
        <option value="7">August</option>
        <option value="8">September</option>
        <option value="9">October</option>
        <option value="10">November</option>
        <option value="11">December</option>
      </select>
      &nbsp;
      <select id="days">
        <option>Day</option>
      </select>
    </form>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = initForm

function initForm() {
  document.getElementById("months").selectedIndex = 0
  document.getElementById("months").onchange = populateDays
}

function populateDays() {
  var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
  var monthStr = this.options[this.selectedIndex].value

  if (monthStr != "") {
    var theMonth = parseInt(monthStr)

    document.getElementById("days").options.length = 0
    for (var i = 0; i < monthDays[theMonth]; i++) {
      document.getElementById("days").options[i] = new Option(i + 1)
    }
  }
}

参考

第 6 章　表单处理-图灵社区
http://www.ituring.com.cn/book/tupubarticle/4839