html将表单数据展示出来
时间: 2023-10-11 14:08:22 浏览: 52
可以使用HTML和JavaScript来展示表单数据。具体方法如下:
1. 在HTML页面中,添加一个用于展示表单数据的DIV标签,例如:
```
<div id="output"></div>
```
2. 在HTML表单中,添加一个按钮,例如:
```
<input type="button" value="展示数据" onclick="showData()">
```
3. 编写JavaScript函数showData(),在该函数中获取表单数据,并将其展示在DIV标签中,例如:
```
function showData() {
// 获取表单数据
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
// 将表单数据展示在DIV标签中
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = "Name: " + name + "<br>Email: " + email + "<br>Message: " + message;
}
```
4. 当用户点击“展示数据”按钮时,调用showData()函数,将表单数据展示在DIV标签中。
注意:在实际开发中,应该对表单数据进行验证和过滤,以避免安全问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)