HTML - 表单

当您想要从网站访问者那里收集一些数据时，需要 HTML 表单。例如，在用户注册期间，您希望收集姓名、电子邮件地址、信用卡等信息。

表单将从站点访问者处获取输入，然后将其发布到后端应用程序，例如 CGI、ASP 脚本或 PHP 脚本等。后端应用程序将根据内部定义的业务逻辑对传递的数据执行所需的处理应用程序。

有各种可用的表单元素，例如文本字段、文本区域字段、下拉菜单、单选按钮、复选框等。

HTML <form>标签用于创建 HTML 表单，它具有以下语法 -

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

表单属性

除了常见属性之外，以下是最常用的表单属性的列表 -

先生编号 属性及描述
1

行动

后端脚本准备好处理您传递的数据。
2

方法

用于上传数据的方法。最常用的是 GET 和 POST 方法。
3

目标

指定将显示脚本结果的目标窗口或框架。它采用 _blank、_self、_parent 等值。
4

编码类型

您可以使用 enctype 属性指定浏览器在将数据发送到服务器之前如何对数据进行编码。可能的值为 -

application/x-www-form-urlencoded - 这是大多数表单在简单场景中使用的标准方法。

mutlipart/form-data - 当您想要以图像、Word 文件等文件形式上传二进制数据时使用。

注意- 您可以参考Perl & CGI了解表单数据上传如何工作的详细信息。

HTML 表单控件

您可以使用不同类型的表单控件来使用 HTML 表单收集数据 -

  • 文本输入控件
  • 复选框控件
  • 单选框控件
  • 选择框控件
  • 文件选择框
  • 隐藏控件
  • 可点击的按钮
  • 提交和重置按钮

文本输入控件

表单上使用三种类型的文本输入 -

  • 单行文本输入控件- 此控件用于仅需要一行用户输入的项目，例如搜索框或名称。它们是使用 HTML <input>标签创建的。

  • 密码输入控件- 这也是单行文本输入，但它会在用户输入后立即屏蔽字符。它们也是使用 HTMl <input> 标签创建的。

  • 多行文本输入控件- 当要求用户提供可能比单个句子长的详细信息时使用此控件。多行输入控件是使用 HTML <textarea>标记创建的。

单行文本输入控件

此控件用于仅需要一行用户输入的项目，例如搜索框或名称。它们是使用 HTML <input> 标签创建的。

例子

这是用于获取名字和姓氏的单行文本输入的基本示例 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

这将产生以下结果 -

属性

以下是用于创建文本字段的 <input> 标记的属性列表。

先生编号 属性及描述
1

类型

指示输入控件的类型，对于文本输入控件，它将设置为text。
2

姓名

用于为控件指定名称，该名称发送到服务器以供识别并获取值。
3

价值

这可用于在控件内提供初始值。
4

尺寸

允许以字符为单位指定文本输入控件的宽度。
5

最长长度

允许指定用户可以在文本框中输入的最大字符数。

密码输入控件

这也是单行文本输入，但它会在用户输入后立即屏蔽该字符。它们也是使用 HTML <input> 标签创建的，但 type 属性设置为password。

例子

这是用于获取用户密码的单行密码输入的基本示例 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

这将产生以下结果 -

属性

以下是用于创建密码字段的 <input> 标记的属性列表。

先生编号 属性及描述
1

类型

指示输入控件的类型，对于密码输入控件，它将设置为password。
2

姓名

用于为控件指定名称，该名称发送到服务器以供识别并获取值。
3

价值

这可用于在控件内提供初始值。
4

尺寸

允许以字符为单位指定文本输入控件的宽度。
5

最长长度

允许指定用户可以在文本框中输入的最大字符数。

多行文本输入控件

当要求用户提供可能比单个句子长的详细信息时使用此功能。多行输入控件是使用 HTML <textarea> 标记创建的。

例子

这是用于获取项目描述的多行文本输入的基本示例 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

这将产生以下结果 -

属性

以下是 <textarea> 标记的属性列表。

先生编号 属性及描述
1

姓名

用于为控件指定名称，该名称发送到服务器以供识别并获取值。
2

行

表示文本区域框的行数。
3

列

表示文本区域框的列数

复选框控件

当需要选择多个选项时，请使用复选框。它们也是使用 HTML <input> 标签创建的，但类型属性设置为复选框。。

例子

以下是带有两个复选框的表单的 HTML 代码示例 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

这将产生以下结果 -

属性

以下是 <checkbox> 标记的属性列表。

先生编号 属性及描述
1

类型

指示输入控件的类型，对于复选框输入控件，它将设置为复选框。。
2

姓名

用于为控件指定名称，该名称发送到服务器以供识别并获取值。
3

价值

选中该复选框时将使用的值。
4

检查过

如果您想默认选择它，请设置为选中。

单选按钮控制

当需要从众多选项中选择一个选项时，可以使用单选按钮。它们也是使用 HTML <input> 标签创建的，但 type 属性设置为radio。

例子

下面是带有两个单选按钮的表单的示例 HTML 代码 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

这将产生以下结果 -

属性

以下是单选按钮的属性列表。

先生编号 属性及描述
1

类型

指示输入控件的类型，对于复选框输入控件，它将设置为单选。
2

姓名

用于为控件指定名称，该名称发送到服务器以供识别并获取值。
3

价值

如果选择单选框，则将使用该值。
4

检查过

如果您想默认选择它，请设置为选中。

选择框控件

选择框，也称为下拉框，它提供以下拉列表的形式列出各种选项的选项，用户可以从中选择一个或多个选项。

例子

下面是带有一个下拉框的表单的示例 HTML 代码

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

这将产生以下结果 -

属性

以下是 <select> 标签的重要属性列表 -

先生编号 属性及描述
1

姓名

用于为控件指定名称，该名称发送到服务器以供识别并获取值。
2

尺寸

这可用于呈现滚动列表框。
3

多种的

如果设置为“多个”，则允许用户从菜单中选择多个项目。

以下是 <option> 标签的重要属性列表 -

先生编号 属性及描述
1

价值

如果选择了选择框框中的选项，则将使用该值。
2

已选择

指定该选项应该是页面加载时最初选择的值。
3

标签

标记选项的另一种方式

文件上传盒

如果您希望允许用户将文件上传到您的网站，则需要使用文件上传框，也称为文件选择框。这也是使用 <input> 元素创建的，但 type 属性设置为file。

例子

以下是带有一个文件上传框的表单的示例 HTML 代码 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

这将产生以下结果 -

属性

以下是文件上传框的重要属性列表 -

先生编号 属性及描述
1

姓名

用于为控件指定名称，该名称发送到服务器以供识别并获取值。
2

接受

指定服务器接受的文件类型。

按钮控制

HTML 中有多种方法可以创建可点击的按钮。您还可以使用 <input> 标签创建可点击的按钮，方法是将其 type 属性设置为button。type 属性可以采用以下值 -

先生编号 类型和描述
1

提交

这将创建一个自动提交表单的按钮。
2

重置

这将创建一个按钮，自动将表单控件重置为其初始值。
3

按钮

这将创建一个按钮，用于在用户单击该按钮时触发客户端脚本。
4

图像

这将创建一个可点击的按钮，但我们可以使用图像作为按钮的背景。

例子

以下是具有三种类型按钮的表单的示例 HTML 代码 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

这将产生以下结果 -

隐藏表单控件

隐藏表单控件用于隐藏页面内的数据，稍后可以将其推送到服务器。该控件隐藏在代码内部，不会出现在实际页面上。例如，以下隐藏表单用于保留当前页码。当用户单击下一页时，隐藏控件的值将被发送到 Web 服务器，Web 服务器将根据传递的当前页面决定接下来显示哪个页面。

例子

下面是示例 HTML 代码，显示隐藏控件的用法 -

现场演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

这将产生以下结果 -