目录
  1. WIKI教程
  2. 学习HTML
  3. HTML - Forms

HTML - Forms

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

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

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

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

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

表单属性

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

Sr.No 属性和描述
1

action

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

2

method

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

3

target

指定将显示脚本结果的目标窗口或框架。 它需要像_blank，_self，_parent等值。

4

enctype

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

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

mutlipart/form-data - 当你想以图像，文件等文件的形式上传二进制数据时使用。

Note - 您可以参考Perl和CGI以获取有关表单数据上载如何工作的详细信息。

HTML表单控件

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

  • 文本输入控件
  • 复选框控件
  • 无线电盒控件
  • 选择Box Controls
  • 文件选择框
  • 隐藏的控件
  • 可点击按钮
  • 提交和重置按钮

文本输入控件

表格上有三种类型的文字输入 -

  • Single-line text input controls - 此控件用于仅需要一行用户输入的项目，例如搜索框或名称。 它们是使用HTML 《input》标签创建的。

  • Password input controls - 这也是单行文本输入，但只要用户输入它就会屏蔽该字符。 它们也是使用HTMl“input”标签创建的。

  • Multi-line text input controls - 当用户需要提供可能长于单个句子的详细信息时使用。 使用HTML 《textarea》标记创建多行输入控件。

单行文本输入控件

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

例子 (Example)

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

<!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>

这将产生以下结果 -

新页面打开

属性 (Attributes)

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

Sr.No 属性和描述
1

type

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

2

name

用于为控件命名，发送到服务器以进行识别并获取值。

3

value

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

4

size

允许以字符形式指定文本输入控件的宽度。

5

maxlength

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

密码输入控件

这也是单行文本输入，但只要用户输入它就会屏蔽该字符。 它们也是使用HTML 《input》标签创建的，但type属性设置为password 。

例子 (Example)

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

<!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>

这将产生以下结果 -

新页面打开

属性 (Attributes)

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

Sr.No 属性和描述
1

type

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

2

name

用于为控件命名，发送到服务器以进行识别并获取值。

3

value

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

4

size

允许以字符形式指定文本输入控件的宽度。

5

maxlength

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

多行文本输入控件

当用户被要求提供可能长于单个句子的细节时，使用此方法。 使用HTML

例子 (Example)

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

<!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>

这将产生以下结果 -

新页面打开

属性 (Attributes)

以下是

Sr.No 属性和描述
1

name

用于为控件命名，发送到服务器以进行识别并获取值。

2

rows

表示文本区域框的行数。

3

cols

表示文本区域框的列数

复选框控件

如果需要选择多个选项，则使用复选框。 它们也是使用HTML 《input》标签创建的，但type属性设置为checkbox. 。

例子 (Example)

以下是带有两个复选框的表单的示例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>

这将产生以下结果 -

新页面打开

属性 (Attributes)

以下是标签的属性列表。

Sr.No 属性和描述
1

type

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

2

name

用于为控件命名，发送到服务器以进行识别并获取值。

3

value

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

4

checked

如果要在默认情况下选择它，请设置为checked 。

单选按钮控制

当有许多选项时，使用单选按钮，只需要选择一个选项。 它们也是使用HTML 《input》标签创建的，但type属性设置为radio 。

例子 (Example)

以下是带有两个单选按钮的表单的示例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>

这将产生以下结果 -

新页面打开

属性 (Attributes)

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

Sr.No 属性和描述
1

type

表示输入控件的类型，对于复选框输入控件，它将设置为无线电。

2

name

用于为控件命名，发送到服务器以进行识别并获取值。

3

value

选中单选框时将使用的值。

4

checked

如果要在默认情况下选择它，请设置为checked 。

选择Box Control

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

例子 (Example)

以下是带有一个下拉框的表单的示例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>

这将产生以下结果 -

新页面打开

属性 (Attributes)

以下是《select》标签的重要属性列表 -

Sr.No 属性和描述
1

name

用于为控件命名，发送到服务器以进行识别并获取值。

2

size

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

3

multiple

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

以下是

Sr.No 属性和描述
1

value

如果选中选择框中的选项，将使用的值。

2

selected

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

3

label

标记选项的另一种方法

文件上传框

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

例子 (Example)

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

<!DOCTYPE html>
<html>
   <head>
      <title>File Upload Box</title>
   </head>
   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
</html>

这将产生以下结果 -

新页面打开

属性 (Attributes)

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

Sr.No 属性和描述
1

name

用于为控件命名，发送到服务器以进行识别并获取值。

2

accept

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

按钮控件

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

Sr.No 类型和描述
1

submit

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

2

reset

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

3

button

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

4

image

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

例子 (Example)

以下是包含三种按钮的表单的示例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服务器，然后它将根据传递的当前页面决定接下来显示哪个页面。

例子 (Example)

以下是显示隐藏控件用法的示例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>

这将产生以下结果 -

新页面打开
<上一篇.HTML - Fonts
HTML - 嵌入多媒体( Embed Multimedia).下一篇>
↑回到顶部↑
WIKI教程 @2018