表单的目的是获取用户的信息，然后处理信息并返回给用户结果，比如百度搜索，登录表单，或者保存用户的信息到数据库中，比如注册表单，发表日志，评论别人的文章等。

一、表单的结构

1、必须有表单的标签<form></form>，把所有可以输入信息的控件包含在表单的标签里面。

2、要有用户能够输入或者选择信息的控件。

3、必须有一个提交按钮，把数据发送到服务器端，或返回用户结果，或存放在数据库中。

比如一个最简单的搜索表单的结构如下：

<form name="search" id="search" method="post" action="result.php">
    <input type="text" name="keywords" id="keywords" placeholder="请输入关键字" required>
    <input type="submit" id="btn_submit" name="tijiao" value="搜索">
</form>

首先认识form表单，method代表发送数据的方式，默认是post，还有一种是get，如果是get，表单的数据会显示在地址栏上，成为查询字符串，很不安全。action是表单处理页面，也就是连接数据库，查询关键字，返回用户结果的处理页面，一般是动态程序，比如php，asp.net，asp，jsp等页面。

input是表单的一种控件，可以让用户输入或者选择数据。最核心的是type属性，确定该控件是什么类型的控件，比如是单行文本、单选、多选还是密码等类型。placeholder是html5新增的属性，表示提示信息，required是一种布尔值属性，表示该控件不能为空。

一个表单必须对应一个提交按钮，也就是type="submit"的按钮。这种按钮才具备提交数据，发送数据的能力。按钮还有两种类型，一种是button，一般和javascript结合，完成交互行为，还有一种是reset，重置表单为初始状态，貌似很无用。

type=""这里的type类型里面的值是固定的，比如text表示单行文本，password表示密码类型，radio表示单选按钮，这种值是不能随便乱写的。

而input的id和name表示控件的名字，是可以自己命名的，按照命名规则命就可以了。

控件一般对应到一个label标签，它的目的是当点击label标签的文字时，光标可以放入对应的控件中，可以提高用户体验。比如：

<label for="yanse">颜色：</label>
    <input type="color" name="yanse"  id="yanse" />

如果是用户输入信息的控件，可以不要value属性，但是如果是选择性控件，则要加上value属性，因为传递给服务器的值是value对应的值，而不是你看见的文字。比如：

<p>性别：
    <input type="radio" name="sex"  id="sex1" value="男" />男
    <input type="radio" name="sex"  id="sex2" value="女" />女
</p>

二、控件类型

表单常用控件主要有三种：input（输入）、select（下拉）、textarea（多行文本），只有input具有很多的type类型。

这里罗列出常用的type类型：

type="text"                  /*单行文本*/
type="password"              /*密码类型*/
type="email"                 /*邮件类型*/
type="url"                   /*网址类型*/
type="range"                 /*范围*/
type="date"                  /*利用万年历选择日期*/
type="time"                  /*时间*/
type="week"                  /*周数和日期*/
type="datetime-local"        /*本地日期时间*/
type="number"                /*数量*/
type="color"                 /*颜色*/
type="radio"                 /*单选*/
type="checkbox"              /*复选*/
type="file"                  /*文件域，选择本地文件*/
type="image"                 /*图像域，可以用一张图片代替提交按钮*/

其次，select表示下拉菜单，比如：

<select name="address">
    <option value="四川">四川</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="深圳">深圳</option>
</select>

select必须和option组合在一起，option代表的是下拉菜单的选项。

最后，是多行文本，比如用来简单评论的多行文本框。

<p><label for="info">简介：</label>
    <textarea name="info" cols="50" rows="5" id="info" placeholder="请输入个人简介"></textarea>
</p>

具体效果可以查看案例。