一、form标签简介

在HTML中，我们都知道表格的行（tr）、单元格（th、td）等都必须放在table标签内部。创建一个表单，跟创建一个表格一样，我们也必须要把所有表单标签放在form标签内部。

表单跟表格，这是两个完全不一样的概念，但是有不少初学者分不清。记住，我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

语法：

<form>
    //各种表单标签
</form>

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form>
        <input type="text" value="这是一个单行文本框"/><br/>
        <textarea>这是一个多行文本框</textarea><br/>
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>
    </form>
</body>
</html>

浏览器预览效果如下图所示：

分析：

input、textarea、select、option都是表单标签，一般要放在form标签内部。对于这些表单标签，后面会慢慢学到，暂时不需要深入。

二、form标签属性

在HTML中，form标签常用属性如下表所示。

表1 form标签常用属性
属性 说明
name 表单名称
method 提交方式
action 提交地址
target 打开方式
enctype 编码方式

form标签这几个属性，跟head标签中的几个标签一样，对于刚接触HTML的小伙伴来说，缺乏操作性且比较抽象。不过没关系，我们简单看一下就行，等学了后端技术自然就会有真正的理解。

1．name属性

在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单进行命名。

举例：

<form name="myForm"></form>

2．method属性

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。

get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多。

举例：

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

3．action属性

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

举例：

<form action="index.php"></form>

4．target属性

form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。

举例：

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

5．enctype属性

在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。