HTML表单及其Input输入类型-技术教程-亦有资源网

HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。

一、HTML表单

1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。

2、表单使用标签

来设置，示例：

运行结果：

二、HTML表单属性：

1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。

2、action属性

在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。

如果省略 action 属性，则 action 会被设置为当前页面。

3、method 属性

method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get。

如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。

4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：

First name:

Last name:

如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。

first name 不会被提交，因为此 input 元素没有 name 属性。

运行结果：

5、target 属性

target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：

默认值为 _self，这意味着响应将在当前窗口中打开。

6、Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：

运行结果：

7、所有

请注意表单本身是不可见的。

同时请注意文本字段的默认宽度是 20 个字符。

运行结果：

②　单选按钮输入（radio），示例：

运行结果：

③　提交按钮（submit），示例：

如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。

运行结果：

2、元素定义下拉列表，示例：

运行结果：

3、

元素

元素组合表单中的相关数据
元素为
元素定义标题，示例：
Personal information:
First name:

Last name:

运行结果：
4、元素<textarea> 元素定义多行输入字段（文本域）、示例：<!DOCTYPE html><html><body> <form> <textarea name="message" rows="10" cols="30"> The cat was playing in the garden.

运行结果：
5、HTML5元素
元素为元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
元素的 list 属性必须引用元素的 id 属性，示例：

运行结果：
四、HTML表单输入类型
输入类型
定义
text
定义供文本输入的单行输入字段
password
定义密码字段
submit
定义提交表单数据至表单处理程序的按钮
radio
定义单选按钮
checkbox
定义复选框
中的type：
类型
定义
radio
定义单选按钮
checkbox
定义复选框
button
定义按钮
number
用于应该包含数字值的输入字段
date
用于应该包含日期的输入字段
color
用于应该包含颜色的输入字段
range
用于应该包含一定范围内的值的输入字段
month
允许用户选择月份和年份
week
允许用户选择周和年
time
允许用户选择时间（无时区）
datetime
允许用户选择日期和时间（有时区）
datetime-local
允许用户选择日期和时间（无时区）
email
用于应该包含电子邮件地址的输入字段
search
用于搜索字段（搜索字段的表现类似常规文本字段）
tel
用于应该包含电话号码的输入字段
url
用于应该包含 URL 地址的输入字段

输入限制：
这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。

输入类型	定义
text	定义供文本输入的单行输入字段
password	定义密码字段
submit	定义提交表单数据至表单处理程序的按钮
radio	定义单选按钮
checkbox	定义复选框

类型	定义
radio	定义单选按钮
checkbox	定义复选框
button	定义按钮
number	用于应该包含数字值的输入字段
date	用于应该包含日期的输入字段
color	用于应该包含颜色的输入字段
range	用于应该包含一定范围内的值的输入字段
month	允许用户选择月份和年份
week	允许用户选择周和年
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）
email	用于应该包含电子邮件地址的输入字段
search	用于搜索字段（搜索字段的表现类似常规文本字段）
tel	用于应该包含电话号码的输入字段
url	用于应该包含 URL 地址的输入字段

亦有资源网

C++语言基础到进阶学习资源汇总

HTML表单及其Input输入类型