HTML表单form

阅读: 3669    发布时间: 2018-01-11 15:37:48

前面我们讲了HTML的各种数据输入方式,数据输入之后,一般来说应该提交给后台处理,HTML通过表单form来提交数据。


  • form包含1个或多个数据输入,如input,单选,复选,文件等等

  • form将其包含的输入项,打包提交给后台

  • form常用的2个属性action,method


一个注册表单如下,此表单包含3个输入项,用户名,密码,邮箱,1个提交按钮,点击提交按钮后,数据将以post方式,传给/test/form.php进行处理:

<form name="regist" action="/test/form.php" method="post">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    邮箱:<input type="email" name="email"><br>
    <input type="submit" value="提交">
</form>


form-属性action

  • action属性定义了处理表单的页面,一般为后台页面

  • action为空则由当前表单页面进行处理



form-属性method

  • method定义提交表单时所用的 HTTP 方法(get 或 post)


何时使用 GET?

  • 表单默认通过get方式提交数据

  • 提交数据量较少时,可以选择get方式

  • 当您使用 get 时,表单数据在页面地址栏中是可见的,因此涉及隐私等重要数据时,不适合get方式


如下代码,点击提交时,数据在浏览器地址栏中可见,

/test/form?username=**&password=**&email=**


<form name="regist" action="/test/form" method="get">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    邮箱:<input type="email" name="email"><br>
    <input type="submit" value="提交">
</form>


用户名:
    密码:
    邮箱:




可以看到,点击提交后,地址栏中显示了输入的密码,因此涉及密码等隐私数据,不能使用get方式传递数据

何时使用 POST?

  • 如果表单包含敏感信息(例如密码)

  • 如果表单包含大量的数据,如文章

  • 如果表单包含文件上传

  • POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。


<form name="regist" action="/test/form" method="post">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    邮箱:<input type="email" name="email"><br>
    <input type="submit" value="提交">
</form>



用户名:
    密码:
    邮箱:





form-属性enctype

  • enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

  • 一般form可以不填写该属性

  • 默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。

  • 在使用包含文件上传控件的表单时,必须设置enctype="multipart/form-data"


描述
application/x-www-form-urlencoded在发送前编码所有字符(默认)
multipart/form-data

不对字符编码。

在使用包含文件上传控件的表单时,必须使用该值。

text/plain空格转换为 "+" 加号,但不对特殊字符编码。


form属性列表:

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


-END-