form 表单

2018-01-09

表单的概念在生活中很常见，就像是问卷调查表一样，别人先把问卷发给你，你照着问卷的要求填写，完事过后再将填完的问卷发给别人，从而达到一个将别人需要的信息传递给别人的一种方式。
传统的网页大多数的作用都是展示数据，就是将信息传递给用户。而在现代化的 Web 开发中，非常注重信息交互，所以表单也随处可见，只是形式上变成网页，性质上还是一模一样的。主要的作用任然是 收集指定的用户信息。

表单的基本使用

HTML 中有一个专门用于提交数据的标签： <form>，通过这个标签可以很容易的收集用户输入。

form标签有两个必要属性

action：表单提交的地址
method：表单以什么方式提交

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF‐8">
  <title>登录</title>
</head>
<body>
  <form action="login.php" method="post">
    <div>
      <label for="username">用户名</label>
      <input type="text" id="username" name="username">
    </div>
    <div>
      <label for="password">密码</label>
      <input type="password" id="password" name="password">
    </div>
    <button type="submit">登录</button>
  </form>
</body>
</html>

如上用户第一次请求得到这个表单页面，点击登录会自动发给login.php 。之后就是考虑如何在login.php中获取到用户提交过来的内容

PHP 中有三个超全局变量专门用来获取表单提交内容：
1. $_GET ：用于获取以 GET 方式提交的内容
2. $_POST ：用于获取以 POST 方式提交的内容
3. $_REQUEST ：用于获取 GET 或 POST 方式提交的内容

例如：

<?php
// 获取表单提交的用户名和密码
echo '用户名：' . $_REQUEST['username'];
echo '密码：' . $_REQUEST['password'];

提交地址

action 提交地址指的是这个表单填写完成过后点击提交，发送请求的请求地址是什么。
从便于维护的角度考虑，一般我们最常见的都是提交给当前文件，然后在当前文件中判断是否是表单提交请求：

<?php
if ($_SERVER['request_method'] === 'POST') {
  //表单提交的请求
}

使用$_server['PHP_SELF']动态获取当前页面的访问路径

1
2
3

<form action="<?php echo $_server['php_self']; ?>">
  <!-- ... -->
</form>

提交方式

method用于设置表单提交的方式详情请看 http

表单元素

单选按钮

1 2	<input type="radio" name="gender" value="male"> <input type="radio" name="gender" value="female"

复选按钮

1 2	<input type="checkbox" name="agree"> <input type="checkbox" name="agree">

如果需要提交多个选中项，可以在name属性后面跟上[]:

1
2
3

<input type="checkbox" name="funs[]" id="" value="football">
<input type="checkbox" name="funs[]" id="" value="basketball">
<input type="checkbox" name="funs[]" id="" value="world peace">

选择框

<select name="sub">
  <option value="1">语文</option>
  <option value="2">数学</option>
</select>

属性的列表

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定何处提交表单地址（URL）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码(莫认：url-encoded)
method	规定在提交表单是所用的HTTP方法（莫认：GET）
name	规定识别表单的名称（对于DOM使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定action属性中地址的目标（默认：_self）