html表单form – HTML教程 htmlform|HTML

上一章HTML教程请查看：html颜色和字体
当你想从站点用户收集一些数据时，需要HTML表单。例如，在用户注册期间，你希望收集诸如姓名、电子邮件地址、信用卡等信息。
一个表单将接受网站访问者的输入，然后将其发布到后端应用程序，如CGI、ASP脚本或PHP脚本等。后端应用程序将根据应用程序内部定义的业务逻辑对传递的数据执行所需的处理。
有各种可用的表单元素，如文本字段、文本区域字段、下拉菜单、单选按钮、复选框等。
HTML < form> 标记用于创建HTML表单，它具有以下语法

< form action = "Script URL" method = "GET|POST"> 表单元素，如输入，文本区等。 < /form>

表单属性除了常见的属性外，下面还列出了最常用的表单属性

编号	属性和描述
1	action 准备处理传递的数据的后端脚本。
2	method 上传数据的方法，最常用的方法是GET和POST方法。
3	target 指定显示脚本结果的目标窗口或框架，它的值如_blank， _self， _parent等。
4	enctype 可以使用enctype属性指定浏览器在将数据发送到服务器之前如何对数据进行编码。可能值为： application/x-www-form-urlencoded ?这是大多数表单在简单场景中使用的标准方法。 mutlipart/form-data ?这是用来当你想上传二进制数据的形式的文件，如图像，word文件等。

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

文本输入控件
复选框控件
Radio box控件
选择框控件
文件选择框
隐藏控件
点击按钮
提交和重置按钮

文本输入控件表单上的文本输入有三种类型

单行文本输入控件——此控件用于只需要一行用户输入的项，如搜索框或名称。它们是使用HTML < input> 标记创建的。
密码输入控件——这也是一个单行文本输入，但它在用户输入时就屏蔽了字符。它们也是使用HTMl < 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>

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

编号	属性和描述
1	type 指示输入控件的类型，对于文本输入控件，将其设置为text。
2	name 用于为发送到要识别的服务器的控件指定名称并获取值。
3	value 这可以用来在控件中提供初始值。
4	size 允许指定文本输入控件的宽度(以字符为单位)。
5	maxlength 允许指定用户可以在文本框中输入的最大字符数。

密码输入控件这也是一个单行文本输入，但它会在用户输入时屏蔽字符。它们也是使用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> 标记的属性列表。

编号	属性和描述
1	type 指示输入控件的类型，对于密码输入控件，将其设置为password。
2	name 用于为发送到要识别的服务器的控件指定名称并获取值。
3	value 这可以用来在控件中提供初始值。
4	size 允许指定文本输入控件的宽度(以字符为单位)。
5	maxlength 允许指定用户可以在文本框中输入的最大字符数。

多行文本输入控件当用户被要求提供可能超过一个句子的详细信息时，可以使用这种方法，多行输入控件是使用HTML < textarea> 标签创建的。
例子
这是一个多行文本输入的基本例子，用于获取项目描述

< !DOCTYPE html> < html>< head> < title>多行输入控件< /title> < /head>< body> < form> 描述 : < br /> < textarea rows = "5" cols = "50" name = "description"> 输入描述... < /textarea> < /form> < /body>< /html>

属性
下面是< textarea> 标签的属性列表。

编号	属性和描述
1	name 用于为发送到要识别的服务器的控件指定名称并获取值。
2	rows 指示文本区域框的行数。
3	cols 指示文本区域框的列数

复选框控件当需要选择多个选项时，将使用复选框。它们也是使用HTML < input> 标签创建的，但是type属性被设置为checkbox..
例子
下面是一个带有两个复选框的表单的HTML代码示例

< !DOCTYPE html> < html>< head> < title>Checkbox Control< /title> < /head>< body> < form> < input type = "checkbox" name = "maths" value = "http://www.srcmini.com/on"> Maths < input type = "checkbox" name = "physics" value = "http://www.srcmini.com/on"> Physics < /form> < /body>< /html>

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

编号	属性和说明
1	type 指示输入控件的类型，对于复选框输入控件将设置为checkbox..
2	name 用于为发送到要识别的服务器的控件指定名称并获取值。
3	value 选中复选框时将使用的值。
4	checked 设置为“checked”，如果你想默认选择它。

单选按钮控制单选按钮用于在多个选项之外，只需要选择一个选项，它们也是使用HTML < input> 标签创建的，但是type属性被设置为radio。
例子
下面是带有两个单选按钮的表单的HTML代码示例

< !DOCTYPE html> < html>< head> < title>Radio Box Control< /title> < /head>< body> < form> < input type = "radio" name = "subject" value = "http://www.srcmini.com/maths"> Maths < input type = "radio" name = "subject" value = "http://www.srcmini.com/physics"> Physics < /form> < /body>< /html>

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

编号	属性和描述
1	type 指示输入控件的类型，对于复选框输入控件将设置为单选。
2	name 用于为发送到要识别的服务器的控件指定名称并获取值。
3	value 如果选中单选框，将使用的值。
4	checked 设置为“checked”，如果你想默认选择它。

选择框一个选择框，也称为下拉框，它提供了以下拉列表的形式列出各种选项的选项，用户可以从中选择一个或多个选项。
例子
下面是带有一个下拉框的表单的HTML代码示例

< !DOCTYPE html> < html>< head> < title>Select Box Control< /title> < /head>< body> < form> < select name = "dropdown"> < option value = "http://www.srcmini.com/Maths" selected>Maths< /option> < option value = "http://www.srcmini.com/Physics">Physics< /option> < /select> < /form> < /body>< /html>

属性
下面是< select> tag > 的重要属性列表

编号	属性和描述
1	name 用于为发送到要识别的服务器的控件指定名称并获取值。
2	size 这可以用来显示一个滚动列表框。
3	multiple 如果设置为“multiple”，则允许用户从菜单中选择多个项目。

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

编号	属性和描述
1	value 如果“selected”框中的某个选项被选中，将使用的值。
2	selected 指定此选项应该是页面加载时最初选择的值。
3	label 另一种标记选项的方法

文件上传框如果你想让用户上传文件到你的网站，你将需要使用一个文件上传框，也称为文件选择框。这也是使用< input> 元素创建的，但是type属性设置为file。
例子
下面是带有一个文件上传框的表单的HTML代码示例

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

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

编号	属性和描述
1	name 用于为发送到要识别的服务器的控件指定名称并获取值。
2	accept 指定服务器接受的文件类型。

按钮控件在HTML中有各种创建可单击按钮的方法，你还可以通过将< input> 标记的type属性设置为button来创建一个可单击按钮，type属性可以取以下值

编号	类型和描述
1	submit 这将创建一个自动提交表单的按钮。
2	reset 这将创建一个按钮，该按钮将自动将窗体控件重置为其初始值。
3	button 这将创建一个按钮，用于在用户单击该按钮时触发客户端脚本。
4	image 这创建了一个可点击的按钮，但我们可以使用一个图像作为按钮的背景。

例子
下面是带有三种类型按钮的表单的HTML代码示例

< !DOCTYPE html> < html>< head> < title>File Upload Box< /title> < /head>< body> < form> < input type = "submit" name = "submit" value = "http://www.srcmini.com/Submit" /> < input type = "reset" name = "reset"value = "http://www.srcmini.com/Reset" /> < input type = "button" name = "ok" value = "http://www.srcmini.com/OK" /> < input type = "image" name = "imagebutton" src = "http://www.srcmini.com/html/images/logo.png" /> < /form> < /body>< /html>

隐藏表单控件隐藏表单控件用于隐藏页面内的数据，稍后可以将这些数据推送到服务器。该控件隐藏在代码中，不会出现在实际的页面上。例如，下面的隐藏表单用于保存当前的页码。当用户单击下一页时，隐藏控件的值将被发送到web服务器，在那里它将根据传递的当前页面决定下一步显示哪个页面。
例子
【html表单form – HTML教程】下面是展示隐藏控件用法的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 = "http://www.srcmini.com/10" /> < input type = "submit" name = "submit" value = "http://www.srcmini.com/Submit" /> < input type = "reset" name = "reset"value = "http://www.srcmini.com/Reset" /> < /form> < /body>< /html>