js实现在表单中填写信息点击按钮将表单中的所有信息打印在页面上,点击删除则表单中的信息从页面中删除
时间: 2023-03-28 11:01:32 浏览: 61
可以使用以下代码实现:
HTML 代码:
```
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<button type="button" onclick="printInfo()">打印信息</button>
<button type="button" onclick="clearInfo()">删除信息</button>
</form>
<div id="info"></div>
```
JavaScript 代码:
```
function printInfo() {
var form = document.getElementById("myForm");
var name = form.elements["name"].value;
var age = form.elements["age"].value;
var email = form.elements["email"].value;
var info = document.getElementById("info");
info.innerHTML = "姓名:" + name + "<br>年龄:" + age + "<br>邮箱:" + email;
}
function clearInfo() {
var form = document.getElementById("myForm");
form.elements["name"].value = "";
form.elements["age"].value = "";
form.elements["email"].value = "";
var info = document.getElementById("info");
info.innerHTML = "";
}
```
当用户填写完表单后,点击“打印信息”按钮,表单中的所有信息将会被打印在页面上。当用户点击“删除信息”按钮时,表单中的信息将会被清空。