HTML表单有哪些基本元素？怎样设置表单的提交方式？-html教程-PHP中文网

HTML表单通过form标签的method和action属性决定数据提交方式与目标，其核心由input、textarea等元素构成，用于收集用户信息。1. 表单元素需name属性作为服务器识别依据，否则数据无法提交；2. GET方法将数据附加于URL，适合非敏感、小数据量的幂等操作如搜索；3. POST方法将数据置于请求体，适合敏感或大量数据传输，如登录或文件上传；4. HTML5新增email、url、date等输入类型，提升客户端验证、移动端体验及可访问性。

html表单有哪些基本元素？怎样设置表单的提交方式？

HTML表单，说白了，就是网页上跟用户打交道的界面，它由一系列互动元素构成，比如你常见的文本框、密码输入框、选择按钮等等。这些元素的核心作用是收集信息。至于表单数据怎么送出去，这主要通过

<form>

登录后复制

标签的

method

登录后复制

属性（决定是GET还是POST）和

action

登录后复制

属性（指定数据要发到哪里）来搞定。

解决方案

在我看来，理解HTML表单，首先得从它的“骨架”和“血肉”说起。

表单的基本元素：

一个HTML表单的核心是

<form>

登录后复制

标签，它像一个容器，把所有输入控件都包在里面。这里面会用到各种各样的元素来满足不同的输入需求：

立即学习“前端免费学习笔记（深入）”；

<input>
登录后复制
：这是最常用也最灵活的元素，它通过
```
type
```
登录后复制
属性来决定自己的形态。比如：
- ```
type=&quot;text&quot;
```
  登录后复制
  ：普通的单行文本输入框。
- ```
type=&quot;password&quot;
```
  登录后复制
  ：密码框，输入内容会隐藏。
- ```
type=&quot;checkbox&quot;
```
  登录后复制
  ：复选框，用户可以多选。
- ```
type=&quot;radio&quot;
```
  登录后复制
  ：单选框，用户只能选一个。
- ```
type=&quot;submit&quot;
```
  登录后复制
  ：提交按钮，点击后发送表单数据。
- ```
type=&quot;reset&quot;
```
  登录后复制
  ：重置按钮，把表单内容恢复到初始状态。
- ```
type=&quot;file&quot;
```
  登录后复制
  ：文件上传控件。
- ```
type=&quot;hidden&quot;
```
  登录后复制
  ：隐藏字段，用于传递不需用户看到的后台数据。
<textarea>
登录后复制
：如果你需要用户输入多行文本，比如留言或者评论，这个标签就派上用场了。它支持
```
rows
```
登录后复制
和
```
cols
```
登录后复制
属性来控制显示大小。
<select>
登录后复制
和
<option>
登录后复制
：这俩是搭档，用来创建下拉列表。
```
<select>
```
登录后复制
是容器，而每个
```
<option>
```
登录后复制
代表列表里的一个选项。用户只能从预设的选项里挑一个（或者通过
```
multiple
```
登录后复制
属性实现多选）。
<button>
登录后复制
：另一种形式的按钮，比
```
<input type=&quot;submit&quot;>
```
登录后复制
更灵活，可以包含HTML内容（比如图标和文字）。它的
```
type
```
登录后复制
属性可以是
```
submit
```
登录后复制
、
```
reset
```
登录后复制
或
```
button
```
登录后复制
（普通的通用按钮，需要JavaScript来赋予功能）。
<label>
登录后复制
：这个标签对可访问性（accessibility）非常重要。它用来关联一个输入控件，点击
```
label
```
登录后复制
就能聚焦到对应的输入框上。通常用
```
for
```
登录后复制
属性和输入控件的
```
id
```
登录后复制
属性进行匹配。
<fieldset>
登录后复制
和
<legend>
登录后复制
：当表单内容很多时，可以用
```
<fieldset>
```
登录后复制
来把相关的控件分组，而
```
<legend>
```
登录后复制
则作为这个组的标题。这让表单结构更清晰，用户理解起来也更容易。

表单的提交方式：

表单数据如何发送到服务器，这主要由

<form>

登录后复制

标签的两个关键属性决定：

```
action
```
登录后复制
属性：
- 它指定了表单数据将要被发送到的URL地址。这个地址通常是一个服务器端的脚本（比如PHP、Python、Node.js等），负责接收和处理数据。
- 举个例子：
```
<form action=&quot;/process-form.php&quot;>
```
  登录后复制
  ，这意味着数据会提交到服务器上的
```
/process-form.php
```
  登录后复制
  脚本。
```
method
```
登录后复制
属性：
- 它定义了数据提交的HTTP方法，最常用的是GET和POST。
- GET：
  - 数据会被附加到URL的末尾，以问号
```
?
```
    登录后复制
    开始，后面跟着
```
name=value
```
    登录后复制
    对，多个键值对之间用
```
&
```
    登录后复制
    连接。
  - 比如：
```
http://example.com/search?query=hello&page=1
```
    登录后复制
    。
  - 特点：数据可见，URL长度有限制，不适合传输敏感信息或大量数据。但优点是，URL可以直接收藏或分享。
- POST：
  - 数据会被放在HTTP请求体中发送，用户在URL中看不到。
  - 特点：数据不可见，没有大小限制（理论上），适合传输敏感信息（如密码）或大量数据（如文件上传）。但缺点是，不能直接收藏或分享这个请求。

实际开发中，根据数据性质和安全性要求，我们会在这两种方法中做出选择。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

为什么表单元素需要

name

登录后复制

属性？

你可能注意到，上面提到的很多表单元素，比如

<input>

登录后复制

、

<textarea>

登录后复制

、

<select>

登录后复制

，它们都有一个共同且至关重要的属性——

name

登录后复制

。在我看来，

name

登录后复制

属性是表单数据能够被服务器正确识别和处理的“身份证”。

想象一下，你填了一份很长的问卷，里面有“姓名”、“邮箱”、“电话”等好几个输入框。如果没有

name

登录后复制

属性，当这些数据被提交到服务器时，服务器接收到的只是一堆值，它根本不知道哪个值对应“姓名”，哪个值对应“邮箱”。

name

登录后复制

属性就像是给每个输入框贴上了唯一的标签，比如

<input type=&quot;text&quot; name="username">

登录后复制

，当用户输入“张三”并提交时，服务器就能清晰地知道：“哦，

username

登录后复制

这个字段的值是‘张三’。”

没有

name

登录后复制

属性的表单元素，它的值是不会被发送到服务器的。这是一个非常常见的初学者错误，有时候我会看到一些新手忘记给

<input>

登录后复制

加上

name

登录后复制

，然后抱怨为什么后端收不到数据。所以，记住，

name

登录后复制

属性是服务器端脚本识别和获取表单数据的唯一标识。对于单选框（

radio

登录后复制

）和复选框（

checkbox

登录后复制

），拥有相同的

name

登录后复制

属性才能实现分组选择的功能。比如，一组单选框，只有

name

登录后复制

属性相同，才能确保用户只能从中选择一个。

GET和POST提交方式在实际应用中如何选择？

选择GET还是POST，这其实是个老生常谈的问题，但它确实是表单设计中一个很关键的决策点。我个人在做项目时，通常会从几个维度来权衡：

数据敏感性： 如果是密码、银行卡号这类敏感信息，那毫无疑问应该用POST。GET方式会把这些信息暴露在URL中，不仅浏览器历史记录会留下痕迹，网络传输过程中也更容易被截获。POST数据在请求体中，虽然也不是绝对安全（仍然需要HTTPS加密），但至少不会在URL中明文显示。
数据量大小： GET请求的URL长度是有限制的（不同浏览器和服务器有不同限制，通常在2KB到8KB之间）。如果需要提交大量文本内容或者上传文件，POST是唯一的选择，因为它可以传输的数据量几乎没有限制。文件上传更是必须使用POST，并且需要设置
```
enctype="multipart/form-data"
```
登录后复制
。
操作的幂等性： 这是一个比较高级的概念，但很实用。幂等性指的是一个操作执行多次，其结果和执行一次是相同的。
- GET请求通常是幂等的，比如你多次刷新一个搜索结果页面（GET请求），结果总是一样的，不会对服务器数据造成副作用。所以GET适合用于获取数据、搜索、查询等操作。
- POST请求通常不是幂等的，比如你提交一个订单，多次提交可能会创建多个订单。因此，POST适合用于提交数据、创建资源、更新数据等会改变服务器状态的操作。这也是为什么提交表单后刷新页面，浏览器会提示你是否重新发送表单数据，因为那通常是一个POST请求。
书签/分享： 如果你希望用户能够收藏或分享某个请求的结果（比如一个搜索结果页），那么GET方式更合适，因为完整的状态信息都在URL里。POST请求无法直接被收藏或分享。

所以，总结一下：查询、搜索、筛选等不改变服务器状态、数据量小且不敏感的场景，用GET；而注册、登录、提交评论、上传文件、修改数据等会改变服务器状态、数据量大或敏感的场景，用POST。

除了基本的文本输入，HTML5还引入了哪些新的输入类型？

HTML5在

<input>

登录后复制

元素上做了很多有意思的扩展，引入了一大批新的

type

登录后复制

属性值，这在我看来，极大地提升了用户体验和前端验证的能力。过去我们可能需要大量的JavaScript代码来做一些基本的输入格式验证，但现在很多功能浏览器本身就支持了。

这些新的输入类型包括：

type="email"
登录后复制
：用于输入电子邮件地址。浏览器会提供基本的格式验证（比如是否包含
```
@
```
登录后复制
符号）。在移动设备上，通常会弹出带有
```
@
```
登录后复制
符号的键盘。
type="url"
登录后复制
：用于输入URL地址。浏览器会检查输入是否符合URL格式。
type="number"
登录后复制
：用于输入数字。浏览器通常会提供小箭头来增减数字，并且在移动设备上会弹出数字键盘。你可以通过
```
min
```
登录后复制
、
```
max
```
登录后复制
和
```
step
```
登录后复制
属性来限制输入范围和步长。
type="range"
登录后复制
：创建一个滑块，用于选择一个范围内的数值。同样支持
```
min
```
登录后复制
、
```
max
```
登录后复制
和
```
step
```
登录后复制
属性。通常需要JavaScript来显示当前值。
type="date"
登录后复制
：日期选择器，用于选择年、月、日。浏览器会提供一个日历界面。
type="datetime-local"
登录后复制
：日期和时间选择器（不包含时区信息）。
type="month"
登录后复制
：月份选择器。
type="week"
登录后复制
：周选择器。
type="time"
登录后复制
：时间选择器。
type="color"
登录后复制
：颜色选择器，会弹出一个颜色拾取器让用户选择颜色。
type="tel"
登录后复制
：电话号码。在移动设备上会弹出电话键盘，但浏览器本身不提供格式验证。
type="search"
登录后复制
：搜索框。在某些浏览器中可能会显示一个“清除”按钮。

这些新的类型不仅仅是外观上的变化，它们最主要的价值在于：

客户端验证： 浏览器会自动进行一些基本的格式验证，比如
```
email
```
登录后复制
类型会检查是否有
```
@
```
登录后复制
，
```
url
```
登录后复制
类型会检查是否是有效的URL格式。这减少了我们写JavaScript验证代码的工作量。
更好的用户体验： 尤其是在移动设备上，浏览器会根据
```
type
```
登录后复制
属性弹出最合适的键盘，比如
```
number
```
登录后复制
会弹出数字键盘，
```
email
```
登录后复制
会弹出带有
```
@
```
登录后复制
的键盘，这让用户输入更加便捷。
语义化： 明确告诉浏览器和辅助技术（如屏幕阅读器）这个输入框是用来做什么的，有助于提升网站的可访问性。