HTML表单（HTML forms）是用来收集用户各种类型的输入。

---

<form> 元素

表单是用来收集用户输入；form元素是用来定义一个表单。

<form>
.
form elements
.
</form>

HTML表单内包含表单元素，例如：不同种类的input元素、textarea文本框、单选radio、复选checkboxes、提交按钮、等。

<input> 元素

<input>元素是最重要的表单元素。
根据<input>元素的type属性的不同，input元素则有不同的展示方式。

例如：

type属性	描述
<input type="text">	定义一个单行的文本输入框
<input type="radio">	定义一个单选按钮（多个选项里选一个）
<input type="submit">	定义一个提交按钮（提交整个表单）

亲，待会你会学到更多类型的input元素~

文本输入框 Text Input

<input type="text">定义一个单行的文本输入框（Text Input）：

<form>
  姓名:<br>
  <input type="text" name="name"><br>
  门派:<br>
  <input type="text" name="gang">
</form>

运行一下

单选按钮 Radio Button Input

<input type="radio">可定义单选按钮（Radio Button Input）。所谓的单选按钮就是用户在name属性相同的几个选项里只能选择1个。

<form>
  性别:<br>
  <input type="radio" name="gender" value="male" checked>男<br>
  <input type="radio" name="gender" value="female">女<br>
  <br>
  门派:<br>
  <input type="radio" name="gang" value="huashan">华山派<br>
  <input type="radio" name="gang" value="riyue">日月神教<br>
  <input type="radio" name="gang" value="yihe" checked>义和团
</form>

运行一下

提交按钮 Submit Button

<input type="submit">可定义某表单的一个提交按钮（Submit Button）。

表单数据会被提交到form-handler（处理表单的程序），通常来说就是提交到某个指定的API网址，即某个url地址。

<form>元素的action属性就是用来指定表单数据提交去哪里，而<form>元素的method属性即数据提交的方式（通常来说，主要包括post和get两种取值）。

<form action="/action_page">
  姓名:<br>
  <input type="text" name="name"><br>
  门派:<br>
  <input type="text" name="gang"><br><br>
  <input type="submit">
</form>

运行一下

Action 属性

<form>元素的action属性就是用来指定表单数据提交到哪个form-handler（处理表单的程序）。

通常来说，当用户点击提交后，这个表单会提交到一个具体的网址。例如：

<form action="/action_page">

form元素中的action属性如果是缺省的，则默认提交到当前页面

Target 属性

target属性在这里是用来定义表单提交后所跳转的页面是在当前选项卡打开、还是新开一个选项卡或窗口、亦或是在某个框架网页中打开。

target的默认取值是“_self”，意思就是在当前窗口显示新网页。

如果想在新选项卡中打开提交表单后跳转的网页，那就将target设置成“_blank”即可：

<form action="/action_page" target="_blank">

运行一下

Method 属性

刚才也提到过了，<form>元素的method属性即数据提交的方式；通常来说，主要包括post和get两种取值；如果缺省method属性设置，则默认为get方法。

<form action="/action_page" method="get">

或者：

<form action="/action_page" method="post">

运行一下

---

Post请求时，action所指向的url地址必须与当前页面保持在同一域名下，表单post方法的跨域请求是禁止的；如需跨域请求，请使用jsonp或反向代理等其他方式。

---

什么时候使用Get

当提交表单时，如果没有设置method属性，则默认为get方法。

使用get方法提交表单，表单的内容会明文显示在url地址栏中。如下所示：

/action_page?name=jerk&gang=riyue

• 表单数据会在url中以键值配对的形式展现；
• url的长度是有限的，所以通过get方法传递的数据也是有限的，也就是说get方法不适合发送大的数据；（大部分浏览器的限额是不超过3000个字符）
• 千万不要用get方法来发送有关敏感信息的表单；
• 用get方法提交表单跳转的目标页面，更适合用户收藏与转发；
• 只要是非敏感数据，且数据量不是太大，get方法都是一个更好的选择。

什么时候使用Post

一般来说，只要涉及用户的个人信息都会采用post方法来提交，像登录、注册这些肯定是要用post方法的。Post方法是不会把表单信息显示在页面的url地址栏上的。

• POST适合发送比较大的数据，理论上来说，post方法传递的数据是没有大小限制的；
• POST方法发送的表单数据是私密的，不会显示在页面的url地址栏上。

Name 属性

只有具有name属性的input元素才会被发送数据到服务器，否则在提交表单时该input元素的值根本不会被提交耶~

name属性的值则是提交的表单数据键值配对（key-->value）时的键（key）。所以如果根本不存在key，表单咋好提交该元素的值呢……

<!-- 此处把代表“门派”的input元素的name删去就根本不会提交该input元素的值 -->
<form action="/action_page">
  姓名:<br>
  <input type="text" name="name"><br>
  门派:<br>
  <input type="text"><br><br>
  <input type="submit">
</form>

运行一下

通过<fieldset>为表单元素进行分组

这是一个挺鸡肋并不常用的元素。所谓的分组，仅仅是视觉层面的分组，<fieldset>元素就是在它包起来的表单元素外面画个框框，此外还可利用<legend>元素对这一组表单元素命个名。之所以说这些功能比较鸡肋，就是不华也不实在，没事找事。

<form action="/action_page">
  <fieldset>
    <legend>个人信息</legend>
    姓名:<br>
    <input type="text" name="name"><br>
    门派:<br>
    <input type="text" name="gang"><br><br>
    <input type="submit">
  </fieldset>
</form>

运行一下