一、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属性用于指定表单数据提交的编码方式。一般情况下,我们不需要设置,除非你用到上传文件功能。