什么是 HTML 表单以及如何使用它们?

javascriptweb developmentfront end scripts

需要使用 HTML 表单来从网站访问者那里收集一些数据。例如,在学生在大学网站上注册时收集有关学生的信息,如姓名、年龄、地址、成绩等。

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

HTML <form> 标记用于在 HTML 中创建表单。

如上所示,我们已经使用了一些属性。以下是表单属性

HTML表单属性

以下是HTML表单的属性,

S.No
属性 &描述
1
操作
后端脚本已准备好处理您传递的数据。
2
方法
用于上传数据的方法。最常用的是GET和POST方法。
3
目标
指定将显示脚本结果的目标窗口或框架。它采用诸如 _blank、_self、_parent 等值。

4
Enctype
您可以使用 enctype 属性指定浏览器在将数据发送到服务器之前如何对其进行编码。可能的值是 −
application/x-www-form-urlencoded − 这是大多数表单在简单场景中使用的标准方法。
mutlipart/form-data −当您想要以文件形式上传二进制数据(如图像、word 文件等)时,可以使用此功能。

HTML 表单控件

可以使用不同类型的表单控件来收集数据,例如文本输入、复选框、单选框、文件选择框、提交按钮等。

让我们看一个简单的示例,使用 HTML 表单中的 <input> 标签获取用户输入:

示例

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Forms</title>
   </head>
   <body>
      <form>
         Student Name: <input type = "text" name = "sname" /><br>
         Student Subject: <input type = "text" name = "ssubject" />
      </form>
   </body>
</html>

使用上述代码,获取用户输入的姓名和主题。

我们使用了属性typename。让我们看看<input>标签的所有其他属性,

Sr.No
属性 &描述
1
type
表示输入控件的类型,对于文本输入控件,它将设置为 text。
2
name
用于为控件提供名称,该名称将被发送到服务器进行识别并获取值
3
这可用于在控件内提供初始值。
4
size
允许以字符为单位指定文本输入控件的宽度
5
ma​​xlength
允许指定用户可以在文本中输入的最大字符数框。

相关文章