使用HTML构建在线表单提交功能，核心是通过form标签定义表单容器，搭配各类输入元素收集用户数据，再配置提交参数将数据传输到后端接口。整个过程不需要依赖复杂的JavaScript代码，仅用原生HTML就能实现基础功能。
步骤一：创建基础表单容器
首先需要用<form>标签创建表单的容器，这个标签是所有表单元素的父容器，必须设置两个核心属性：action和method。action用来指定表单提交的后端接口地址，method用来指定数据提交的方式，常用的有get和post两种。
基础表单结构代码如下：
<!-- 表单容器，提交到后端接口，使用post方式提交 -->
<form action="https://ipipp.com/submit" method="post">
<!-- 表单内容会放在这里 -->
</form>
步骤二：添加表单输入元素
在form标签内部，需要添加各类输入元素来收集用户的不同类型数据，常用的输入元素包括文本输入框、密码输入框、单选框、复选框、下拉选择框、文本域等，所有输入元素都需要设置name属性，这个属性是后端接收数据时识别字段的依据。
常用输入元素示例
- 文本输入框：使用
<input type="text">，用来收集普通文本信息 - 密码输入框：使用
<input type="password">，输入内容会被掩码显示 - 单选框：使用
<input type="radio">，多个同name的单选框为一组，只能选一个 - 复选框：使用
<input type="checkbox">，多个同name的复选框可同时选择多个 - 下拉选择框：使用
<select>搭配<option>标签实现 - 文本域：使用
<textarea>标签，用来收集多行文本
添加输入元素的完整代码示例：
<form action="https://ipipp.com/submit" method="post">
<!-- 文本输入框 -->
<p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>
<!-- 密码输入框 -->
<p>密码：<input type="password" name="password" placeholder="请输入密码"></p>
<!-- 单选框 -->
<p>性别：
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
</p>
<!-- 复选框 -->
<p>爱好：
<input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sports"><label for="sports">运动</label>
<input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label>
</p>
<!-- 下拉选择框 -->
<p>城市：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</p>
<!-- 文本域 -->
<p>个人简介：<textarea name="intro" placeholder="请介绍一下自己"></textarea></p>
</form>
步骤三：添加提交按钮
表单需要添加提交按钮才能触发提交操作，提交按钮有两种实现方式，一种是使用<input type="submit">，另一种是使用<button type="submit">，两种方式的提交效果一致，后者可以自定义按钮内部的显示内容。
添加提交按钮的代码示例：
<form action="https://ipipp.com/submit" method="post">
<!-- 前面的输入元素代码省略 -->
<p>
<!-- 方式一：input提交按钮 -->
<input type="submit" value="提交表单">
<!-- 方式二：button提交按钮 -->
<button type="submit">点击提交</button>
</p>
</form>
步骤四：配置提交参数与验证
除了基础的action和method属性，还可以给form标签添加其他属性优化提交体验，比如设置enctype属性，当表单需要上传文件时，需要将enctype设置为multipart/form-data，普通文本提交使用默认的application/x-www-form-urlencoded即可。
同时可以给输入元素添加基础验证属性，比如required表示该项为必填项，maxlength限制输入最大长度，pattern可以通过正则表达式限制输入格式，这些验证会在表单提交前自动触发，不需要额外写JavaScript代码。
带验证和文件上传配置的完整表单代码：
<!-- 需要上传文件时设置enctype -->
<form action="https://ipipp.com/submit" method="post" enctype="multipart/form-data">
<p>用户名：<input type="text" name="username" required maxlength="20" placeholder="必填，最多20字符"></p>
<p>手机号：<input type="text" name="phone" pattern="^1[3-9]d{9}$" placeholder="请输入正确手机号"></p>
<p>头像：<input type="file" name="avatar"></p>
<p><input type="submit" value="提交"></p>
</form>
get和post提交方式的区别
很多初学者不清楚method属性该选get还是post，两者的核心区别如下：
| 对比项 | get方式 | post方式 |
|---|---|---|
| 数据位置 | 数据拼接在action地址的后面，通过URL传输 | 数据放在HTTP请求体中传输 |
| 数据长度限制 | 受URL长度限制，一般不能传输大量数据 | 没有长度限制，可传输大量数据 |
| 安全性 | 数据暴露在URL中，安全性较低 | 数据不直接暴露，安全性更高 |
| 适用场景 | 适合数据查询、搜索等无敏感数据的场景 | 适合表单提交、数据新增修改、包含敏感信息的场景 |
完整可运行示例
下面是一个包含所有基础功能的完整表单代码，保存为html文件后可以直接在浏览器中打开测试：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML表单提交示例</title>
</head>
<body>
<h1>用户信息提交表单</h1>
<form action="https://ipipp.com/submit" method="post">
<p>用户名：<input type="text" name="username" required placeholder="请输入用户名"></p>
<p>邮箱：<input type="email" name="email" required placeholder="请输入邮箱"></p>
<p>密码：<input type="password" name="password" required placeholder="请输入密码"></p>
<p>性别：
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
</p>
<p><input type="submit" value="提交信息"></p>
</form>
</body>
</html>
HTMLform表单input_inputaction属性method方法修改时间：2026-06-15 13:27:51