form是HTML中比较重要的一块内容，<form>标签用于为用户输入创建 HTML 表单，表单用于向服务器传输数据。

希望通过本文的讲解，对于form表单的用途以及用法能够有个简单的了解。

简单参考: W3School - <form>

一个表单的形式如下：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <input type="submit" value="Submit" />
</form>

从例中的form开始，这当中的action涉及不同的脚本处理方法，而method则是不同的传输方式。这里面就涉及到了get 和post两种最常用的HTTP请求方法。

post 和 get 方式的区别

那么这两种有什么区别呢？

1. GET能被缓存，POST不能缓存 。
2. POST比GET相对安全：
   因为POST参数不会被保存在浏览器历史或 web 服务器日志中。GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。（所以在发送密码或其他敏感信息时绝不要使用 GET ）
3. GET方法只允许 ASCII 字符，且对数据长度有限制。
   而POST对数据长度没有限制，允许二进制数据。

更多post与get的区别 ： HTTP 方法：GET 对比 POST - W3cSchool
更深入理解： get和post请求的区别 - - 知乎回答
<br />

form表单的作用以及常用的input 标签

form表单用于收集用户输入，向服务器传输数据，使用<form>元素来定义一个HTML表单。

表单可以包含 input, label, menus, textarea, filedset 和 legend 元素。

下面简单介绍这些表单中常见元素的用法：
常见的input的标签格式 <input type="" name="" /> 而不同的type类型就会有不同的输入形式。

常见input类型及作用

<br />

input里的name 有什么作用，它和value 有什么区别？

由于表单提交的数据一般都是以key:value（键值）的方式提交，所以input中的name属性主要用来标识提交的数据的key值，好让服务器处理程序分辨。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

例如：

<input name="gender" value="male">
<input name="hobby" value="travel">

则服务器在后台收到的数据格式可能是这样的：

{
gender:male,
hobby: travel
}

name是控件的名称 （键），value是控件的值。
value通常指默认值，但并非所有标签都会显现出来。而name是控件的名称（键），它在网页中是不会显现出来的，主要用来供后台读取。
<br />

radio/checkbox 如何实现分组?

在一组input标签的属性均设置为type=radio的情况下，再将同组的标签name均设置为相同值，则这些name均相同的标签为同一组。

例：

<input type="radio"  name="hobby" value="game">Playing Game
<input type="radio"  name="hobby" value="coding">Keep Coding
<!-- 组别1 为兴趣组 -->

<input type="radio"  name="travel" value="BJ">北京
<input type="radio"  name="travel" value="ZJ">浙江
<!-- 组别2 为旅游组 -->

<br />

下拉框

前面说过了radio/checkbox 的分组，还有一个重要的选择标签还没有提到，就是下拉框。

<select name="mycar">
    <option value="BC">奔驰</option>
    <option value="SB" selected>萨博</option>
    <option value="BMW">别摸我</option>
</select>

首先设置select包括需要下拉框的内容，并设置好name。

在不同的选项设置标签option，含有selected ="selected "的为默认项（也可以简写为selected），效果如下图:

select效果图

<br />

placeholder 属性

placeholder是HTML5的新属性，它一般会在输入框有一个提示，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注意：placeholder 属性适用于以下的 <input>类型：text, search, url, telephone, email 以及 password
<br />

[type = hidden] 隐藏域的作用

隐藏域在页面中,用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，供后台调用，例如数据的id等。

应用举例 :

• html中隐藏域的作用
• CSRF 详解与攻防实战

后记

这里标签介绍的比较简单，就算是对HTML form表单部分的一个简单入门，大部分内容还是需要自己多去实践，并且观察实现效果。