HTML - 表单

当您想从网站访问者收集一些数据时,

需要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

操作

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

2

方法

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

3

目标

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

4

enctype

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

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

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

注意 : 您可以参考 Perl& CGI 有关表单数据上传的详细信息.

HTML表单控件

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

  • 文本输入控件

  • 复选框控件

  • 收音机盒控件

  • 选择盒子控件

  • 文件选择框

  • 隐藏控件

  • 可点击按钮

  • 提交和重置按钮

文本输入控件

表格上有三种类型的文字输入和减号;

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

  • 密码输入控件 : 这也是单行文本输入,但只要用户输入它就会屏蔽该字符.它们也是使用HTM1< 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>

Attributes

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

Sr.NoAttribute & Description
1

type

Indicates the type of input control and for text input control it will be set to text.

2

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

3

value

This can be used to provide an initial value inside the control.

4

size

Allows to specify the width of the text-input control in terms of characters.

5

maxlength

Allows to specify the maximum number of characters a user can enter into the text box.

Password input controls

这也是单行文本输入,但是在用户输入字符后立即将其屏蔽。 它们也使用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.NoAttribute & Description
1

type

Indicates the type of input control and for password input control it will be set to password.

2

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

3

value

This can be used to provide an initial value inside the control.

4

size

Allows to specify the width of the text-input control in terms of characters.

5

maxlength

Allows to specify the maximum number of characters a user can enter into the text box.

Multiple-Line Text Input Controls

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

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

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

Sr.NoAttribute & Description
1

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

2

rows

Indicates the number of rows of text area box.

3

cols

Indicates the number of columns of text area box

Checkbox Control

当需要选择多个选项时,将使用复选框。 它们也使用HTML <input>标记创建,但type属性设置为复选框。

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

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

Sr.NoAttribute & Description
1

type

Indicates the type of input control and for checkbox input control it will be set to checkbox..

2

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

3

value

The value that will be used if the checkbox is selected.

4

checked

Set to checked if you want to select it by default.

Radio Button Control

单选按钮用于许多选项中时,只需选择一个选项。 它们也使用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.NoAttribute & Description
1

type

Indicates the type of input control and for checkbox input control it will be set to radio.

2

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

3

value

The value that will be used if the radio box is selected.

4

checked

Set to checked if you want to select it by default.

Select 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.NoAttribute & Description
1

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

2

size

This can be used to present a scrolling list box.

3

multiple

If set to "multiple" then allows a user to select multiple items from the menu.

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

Sr.NoAttribute & Description
1

value

The value that will be used if an option in the select box box is selected.

2

selected

Specifies that this option should be the initially selected value when the page loads.

3

label

An alternative way of labeling options

File Upload Box

如果要允许用户将文件上传到您的网站,则需要使用文件上传框,也称为文件选择框。 这也是使用<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.NoAttribute & Description
1

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

2

accept

Specifies the types of files that the server accepts.

Button Controls

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

Sr.NoType & Description
1

submit

This creates a button that automatically submits a form.

2

reset

This creates a button that automatically resets form controls to their initial values.

3

button

This creates a button that is used to trigger a client-side script when the user clicks that button.

4

image

This creates a clickable button but we can use an image as background of the button.

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>

Hidden Form Controls

隐藏的表单控件用于隐藏页面内的数据,以后可以将其推送到服务器。 该控件隐藏在代码内部,并且不会出现在实际页面上。 例如,以下隐藏形式用于保留当前页码。 当用户单击下一页时,隐藏控件的值将被发送到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>