当您想从网站访问者那里收集一些数据时，HTML表单是必需的，如在用户注册期间，您希望收集诸如姓名，电子邮件地址等信息。
HTML form标签用于创建HTML表单，它具有以下语法-
<form action="Script URL" method="GET|POST"> form elements like input, textarea etc. </form>
Form 属性
除了通用属性，以下是最常用的表单属性的列表-
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
action URL 规定当提交表单时向何处发送表单数据。 |
| 2 |
method 上传数据的方法，最常用的是GET和POST方法。 |
| 3 |
target 规定在何处打开 action URL。 |
| 4 |
enctype 规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况) application/x-www-form-urlencoded - 这是大多数表单在简单方案中使用的标准方法。 multipart/form-data - 当您要以图像，Word文件等文件形式上传二进制数据时使用。 |
表单上使用三种类型的文本输入-
<input> - 单行文字输入控件。
<input type="password"> - 单行密码输入控件。
<textarea> - 多行文字输入控制。
Input 控件
此控件用于仅需要一行用户输入的项目，例如搜索框或名称。 它们是使用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>标签的属性列表。
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
type 指示输入控件的类型，对于文本输入控件，它将设置为 text 。 |
| 2 |
name 用于给控件命名，该控件将被发送到服务器以进行识别并获取值。 |
| 3 |
value 这可用于在控件内部提供初始值。 |
| 4 |
size 允许以字符为单位指定文本输入控件的宽度。 |
| 5 |
maxlength 允许指定用户可以在文本框中输入的最大字符数。 |
Password 控件
这也是单行文本输入，但是在用户输入字符后立即将其屏蔽。 它们也使用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>标签的属性列表。
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
type 指示输入控件的类型，对于密码输入控件，它将被设置为 password 。 |
| 2 |
name 用于给控件命名，该控件将被发送到服务器以进行识别并获取值。 |
| 3 |
value 这可用于在控件内部提供初始值。 |
| 4 |
size 允许以字符为单位指定文本输入控件的宽度。 |
| 5 |
maxlength 允许指定用户可以在文本框中输入的最大字符数。 |
Textarea 多行文字
当要求用户提供可能比单个句子更长的详细信息时，将使用此选项。 使用HTML <textarea>标签创建多行输入控件。
这是用于进行项目描述的多行文本输入的基本示例-
<!DOCTYPE html> <html> <head> <title>Multiple-Line Input Control</title> </head> <body> <form> 描述 : <br /> <textarea rows="5" cols="50" name="description"> Enter description here... </textarea> </form> </body> </html>
这将产生以下输出-
以下是<textarea>标签的属性列表。
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
name 用于给控件命名，该控件将被发送到服务器以进行识别并获取值。 |
| 2 |
rows 指示文本区域框的行数。 |
| 3 |
cols 指示文本区域框的列数 |
Checkbox 复选框
当需要选择多个选项时，将使用复选框。 它们也使用HTML <input>标签创建，但type属性设置为复选框。
这是带有两个复选框的表单的示例HTML代码-
<!DOCTYPE html> <html> <head> <title>复选框控制</title> </head> <body> <form> <input type="checkbox" name="maths" value="on"> Maths <input type="checkbox" name="physics" value="on"> Physics </form> </body> </html>
这将产生以下输出-
以下是<checkbox>标签的属性列表。
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
type 指示输入控件的类型，对于复选框输入控件，它将设置为复选框。。 |
| 2 |
name 用于给控件命名，该控件将被发送到服务器以进行识别并获取值。 |
| 3 |
value 如果选中此复选框，将使用的值。 |
| 4 |
checked 如果要默认选择，请设置为选中。 |
Radio 单选按钮
单选按钮用于许多选项中时，只需选择一个选项。 它们也使用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>
这将产生以下输出-
以下是单选按钮的属性列表。
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
type 指示输入控件的类型，对于复选框输入控件，它将设置为radio。 |
| 2 |
name 用于给控件命名，该控件将被发送到服务器以进行识别并获取值。 |
| 3 |
value 如果选中单选框，将使用的值。 |
| 4 |
checked 如果要默认选择，请设置为选中。 |
Select 选择框
选择框，也称为下拉框，它提供选项以下拉列表的形式列出各种选项，用户可以从中选择一个或多个选项。
这是带有一个下拉框的表单的示例HTML代码
<!DOCTYPE html> <html> <head> <title>选择框控件</title> </head> <body> <form> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> </select> </form> </body> </html>
这将产生以下输出-
以下是<select>标签的重要属性的列表-
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
name 用于给控件命名，该控件将被发送到服务器以进行识别并获取值。 |
| 2 |
size 这可用于显示滚动列表框。 |
| 3 |
multiple 如果设置为"多个"，则允许用户从菜单中选择多个项目。 |
以下是<option>标签的重要属性的列表-
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
value 如果在选择框框中选择一个options，将使用的值。 |
| 2 |
selected 指定在加载页面时此options应为初始选择的值。 |
| 3 |
label 标签options的另一种方法 |
File 文件上传框
如果要允许用户将文件上传到您的网站，则需要使用文件上传框，也称为文件选择框。 这也是使用<input>元素创建的，但是type属性设置为file。
这是带有一个文件上传框的表单的示例HTML代码-
<!DOCTYPE html> <html> <head> <title>文件上传框</title> </head> <body> <form> <input type="file" name="fileupload" accept="image/*" /> </form> </body> </html>
这将产生以下输出-
以下是文件上传框的重要属性列表-
| Sr.No | Attribute & Remark |
|---|---|
| 1 |
name 用于给控件命名，该控件将被发送到服务器以进行识别并获取值。 |
| 2 |
accept 指定服务器接受的文件类型。 |
Button 按钮控制
HTML中有多种创建可点击按钮的方法。 您还可以通过将<input>标签的type属性设置为按钮来创建可单击的按钮。 type属性可以采用以下值-
| Sr.No | Type & Remark |
|---|---|
| 1 |
submit 这将创建一个自动提交表单的按钮。 |
| 2 |
reset 这将创建一个按钮，该按钮会自动将表单控件重置为其初始值。 |
| 3 |
button 这将创建一个按钮，该按钮用于在用户单击该按钮时触发客户端脚本。 |
| 4 |
image 这将创建一个可单击的按钮，但是无涯教程可以将图像用作按钮的背景。 |
这是具有三种类型的按钮的表单的示例HTML代码-
<!DOCTYPE html> <html> <head> <title>文件上传框</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>
这将产生以下输出-
Hidden 表单
隐藏的表单控件用于隐藏页面内的数据，以后可以将其推送到服务器。该控件隐藏在代码内部，并且不会出现在实际页面上。
这是示例HTML代码，显示隐藏控件的用法-
<!DOCTYPE html> <html> <head> <title>文件上传框</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>
这将产生以下输出-
