【HTML】之form表单元素详解

8,744次阅读

没有评论

共计 2358 个字符，预计需要花费 6 分钟才能阅读完成。

HTML 表单是网页与用户交互的关键组成部分，它允许用户输入数据并将数据提交到服务器进行处理。本文将全面详细地介绍 HTML 表单的各个方面，从基础元素到高级用法，并提供丰富的代码示例和中文注释，帮助你彻底掌握表单的使用。

表单由

元素有两个关键属性：

action：指定表单数据提交的目标 URL。例如 process_form.php 或 submit.aspx。如果没有指定，表单数据将提交到当前页面。
method：指定提交数据的方式，常用的有 GET 和 POST 两种：
- GET: 将表单数据附加在 URL 后面，以 ? 分隔，例如 form.php?name=john&age=30。GET 请求对数据长度有限制，且数据暴露在 URL 中，安全性较低，适合用于简单的查询。
- POST: 将表单数据放在 HTTP 请求体中，不会显示在 URL 中，安全性更高，适合用于提交敏感数据或大文件上传。

注释: 上面的代码创建了一个表单，当用户提交表单时，数据将通过 POST 方法发送到 process_form.php 文件进行处理。

2.1 标签

标签用于为表单元素定义标签（标题）。将与表单元素关联起来，可以提高用户体验。点击会自动将焦点移动到关联的表单元素上。关联方法有两种：

使用 for 属性：的 for 属性值应该与关联表单元素的 id 属性值相同。
将表单元素嵌套在标签内:

 用户名: 

 密码:

2.2 输入框

元素是最常用的表单元素，它根据 type 属性的不同，呈现各种类型的输入控件。name 属性是必须的，用于标识表单数据字段的名称，服务器端可以通过 name 属性获取对应的值。

text: 单行文本输入框。
password: 密码输入框，输入的字符会被遮蔽。
email: 用于输入邮箱地址，浏览器会进行简单的邮箱格式验证。
number: 用于输入数字，可以设置 min、max 和 step 属性来限制输入范围和步长。
date: 用于选择日期。
time: 用于选择时间。
datetime-local: 用于选择日期和时间。
month: 用于选择月份和年份。
week: 用于选择周数和年份。
range: 用于选择一个范围内的值，通常以滑块的形式展现。需要配合 min、max 和 step 属性使用。
color: 用于选择颜色。
search: 用于输入搜索关键词，外观通常是一个带有搜索图标的文本框。
tel: 用于输入电话号码。
url: 用于输入网址，浏览器会进行简单的网址格式验证。
radio: 单选按钮，同一组单选按钮的 name 属性必须相同，这样用户只能选择其中一个选项。value 属性指定选中该选项时提交的值。
checkbox: 复选框，可以多选。value 属性指定选中该选项时提交的值。
file: 用于上传文件。
hidden: 隐藏字段，用于存储一些不需要用户输入的数据，例如用户 ID。
submit: 提交按钮，用于提交表单数据。value 属性设置按钮上的文本。
image: 图像按钮，可以作为提交按钮使用。需要指定 src 属性来设置图像路径。
reset: 重置按钮，用于重置表单数据到初始值。value 属性设置按钮上的文本。
button: 普通按钮，需要通过 JavaScript 来定义其功能。

 用户名: 
 密码:

2.3 下拉列表

支持多选。

 城市:

2.4 文本域

元素用于多行文本输入。rows 和 cols 属性分别设置行数和列数。

 留言:

2.5

2.6

和

元素用于将相关的表单元素分组，

元素为

定义标题。


   个人信息 
   姓名: 

   邮箱:

除了 action 和 method 属性外，

元素还有其他一些常用的属性：

enctype：指定表单数据的编码方式，常用的有 application/x-www-form-urlencoded (默认值) 和 multipart/form-data (用于文件上传)。
target：指定提交表单后在哪里显示结果，例如 _blank 在新窗口中打开。
novalidate：禁用客户端表单验证。
accept、autocomplete、autofocus、disabled、form、list、maxlength、minlength、multiple、name、pattern、placeholder、readonly、required、size、step、value 等，具体含义请参考上一版本内容。

HTML5 提供了丰富的表单验证功能，例如：

required 属性：指定字段为必填字段。
pattern 属性：使用正则表达式验证输入格式。
min 和 max 属性：设置数字输入的范围。
minlength 和 maxlength 属性：设置文本输入的长度限制。
此外，还可以使用 JavaScript 进行更复杂的表单验证。

代码：

运行：

【HTML】之 form 表单元素详解

本文详细介绍了 HTML 表单的各个方面，包括基本结构、常用元素、表单属性和表单验证。通过学习本文，你应该能够熟练地创建和使用 HTML 表单，并实现各种用户交互功能。

学习网站推荐：面向开发者的 Web 技术 | MDN

原文地址: 【HTML】之 form 表单元素详解

正文完

发表至：开发笔记

2024-11-10

0

转载说明：

1 本网站名称：优杰开发笔记
2 本站永久网址：https://yojack.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站所有内容均可转载及分享, 但请注明出处
6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
7 站长邮箱：laylwenl@gmail.com

Tailwind CSS – 无需离开HTML即可快速构建美观的网站

后端和前端哪个难？如何选择？

后端开发的必备技能：如何成为一名优秀的后端工程师

HTML-标签之文字排版、图片、链接、音视频

(开题报告)django vue企业设备管理系统论文源码

【HTML】之form表单元素详解

1. 表单的基本结构

2. 常用表单元素

2.1 标签

2.2 输入框

2.3 下拉列表

2.4 文本域

2.5

2.6

3. 表单属性

4. 表单验证

5. 案例

6. 总结

WordPress3 和 jQuery（二）

CSS3新增属性(15个案例代码效果图素材)

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

一文彻底搞定MySQL中的JSON类型，效率飞起。

fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

【HTML】之form表单元素详解

1. 表单的基本结构

2. 常用表单元素

2.1 标签

2.2 输入框

2.3 下拉列表 和

2.4 文本域

2.5 元素

2.6

3. 表单属性

4. 表单验证

5. 案例

6. 总结

WordPress3 和 jQuery（二）

CSS3新增属性(15个案例 代码 效果图 素材)

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

一文彻底搞定MySQL中的JSON类型，效率飞起。

fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

2.3 下拉列表

2.5

CSS3新增属性(15个案例代码效果图素材)