在网页开发中，表单是最常用的交互组件之一。要在HTML表单中添加输入框并实现添加功能，我们只需要使用form、input等基础标签，再通过少量JavaScript完成数据展示。下面先看一个基础示例的结构。
一、HTML表单与输入框的基础写法
输入框在HTML中使用<input>标签来定义，它必须放在<form>标签内部才能被当作表单字段提交。最常见的文本输入框类型是把type设为text。
<form id="myForm"> <label for="itemInput">请输入内容：</label> <input type="text" id="itemInput" name="item" placeholder="写点什么" /> <button type="button" id="addBtn">添加</button> </form> <ul id="list"></ul>
上面代码中，input的id方便脚本获取值，name用于表单提交时的字段名，placeholder是灰色提示文字。button的type设为button是为了防止默认提交刷新页面。
二、用JavaScript实现添加功能
点击添加按钮时，我们获取输入框的值，创建列表项并插入到页面中，然后清空输入框。核心逻辑如下：
// 获取元素
var form = document.getElementById('myForm');
var input = document.getElementById('itemInput');
var btn = document.getElementById('addBtn');
var list = document.getElementById('list');
// 点击添加
btn.addEventListener('click', function() {
var val = input.value.trim();
if (val === '') {
alert('请输入内容');
return;
}
var li = document.createElement('li');
li.textContent = val;
list.appendChild(li);
input.value = '';
input.focus();
});
常用input属性说明
| 属性 | 作用 |
|---|---|
| type | 决定输入框类型，如text、password、number |
| name | 表单提交时的字段名称 |
| required | 提交前必须填写，否则浏览器报错 |
三、完整可运行示例
把以下代码保存为html文件，用浏览器打开即可看到带添加功能的表单：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>添加输入框示例</title>
</head>
<body>
<form id="myForm">
<input type="text" id="itemInput" placeholder="输入待办事项" />
<button type="button" id="addBtn">添加</button>
</form>
<ul id="list"></ul>
<script>
var input = document.getElementById('itemInput');
var btn = document.getElementById('addBtn');
var list = document.getElementById('list');
btn.onclick = function() {
var v = input.value.trim();
if (!v) return;
var li = document.createElement('li');
li.textContent = v;
list.appendChild(li);
input.value = '';
};
</script>
</body>
</html>
通过上述方式，你就完成了在HTML表单中添加输入框以及点击添加按钮把内容展示出来的基础功能。后续还可以结合后端接口把数据存到服务器。
HTMLforminputJavaScript添加按钮修改时间：2026-07-24 21:57:26