js怎么显示表单所填好的信息
时间: 2024-05-03 21:21:21 浏览: 21
可以使用JavaScript来获取表单元素的值,然后将其显示在页面上。具体步骤如下:
1. 获取表单元素的值
可以使用document.getElementById()或document.querySelector()方法来获取表单元素的值。例如:
```
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.querySelector('#message').value;
```
2. 创建显示信息的元素
可以在页面中创建一个div元素来显示表单填好的信息。例如:
```
<div id="form-info"></div>
```
3. 将表单信息显示在页面上
可以使用innerHTML属性将表单信息显示在页面上。例如:
```
const formInfo = document.getElementById('form-info');
formInfo.innerHTML = `Name: ${name}<br>Email: ${email}<br>Message: ${message}`;
```
完整的示例代码:
HTML:
```
<form>
<label for="name">Name:</label>
<input type="text" id="name">
<label for="email">Email:</label>
<input type="email" id="email">
<label for="message">Message:</label>
<textarea id="message"></textarea>
<button type="button" onclick="showFormInfo()">Submit</button>
</form>
<div id="form-info"></div>
```
JavaScript:
```
function showFormInfo() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.querySelector('#message').value;
const formInfo = document.getElementById('form-info');
formInfo.innerHTML = `Name: ${name}<br>Email: ${email}<br>Message: ${message}`;
}
```