HTML - 表单介绍 首页HTMLHTML - 表单

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

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

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

Form 属性

除了通用属性,以下是最常用的表单属性的列表-

Sr.NoAttribute & 描述
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.NoAttribute & 描述
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.NoAttribute & 描述
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.NoAttribute & 描述
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.NoAttribute & 描述
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.NoAttribute & 描述
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.NoAttribute & 描述
1

name

用于给控件命名,该控件将被发送到服务器以进行识别并获取值。

2

size

这可用于显示滚动列表框。

3

multiple

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

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

Sr.NoAttribute & 描述
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.NoAttribute & 描述
1

name

用于给控件命名,该控件将被发送到服务器以进行识别并获取值。

2

accept

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

Button 按钮控制

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

Sr.NoType & 描述
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?imageView2/0/q/75|watermark/2/text/bGVhcm5may5jb20=/font/Y29uc29sYXM=/fontsize/560/fill/I0YxMTQxNA==/dissolve/100/gravity/SouthEast/dx/10/dy/10" />
      </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>

这将产生以下输出-

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 请将遇到的问题写入评论区中,大家一起进步。

祝学习愉快! (右键可编辑)

点我分享笔记