在联系人表单域中显示div内容的方法可以通过以下步骤实现:
<script src="script.js"></script>
其中,"script.js"是包含JavaScript代码的文件名。
<form id="contactForm">
<!-- 表单字段 -->
<input type="text" id="name" placeholder="姓名">
<input type="email" id="email" placeholder="邮箱">
<textarea id="message" placeholder="留言"></textarea>
<button type="submit">提交</button>
</form>
<div id="displayDiv"></div>
在上述代码中,表单字段包括姓名、邮箱和留言,提交按钮用于提交表单。div元素的id设置为"displayDiv",用于显示内容。
document.getElementById("contactForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单字段的值
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
// 构建要显示的内容
var content = "姓名:" + name + "<br>";
content += "邮箱:" + email + "<br>";
content += "留言:" + message;
// 将内容显示在div元素中
document.getElementById("displayDiv").innerHTML = content;
});
在上述代码中,通过addEventListener方法为表单的submit事件添加一个事件监听器。在事件处理函数中,首先使用event.preventDefault()方法阻止表单的默认提交行为。然后,通过getElementById方法获取表单字段的值,并构建要显示的内容。最后,使用innerHTML属性将内容显示在div元素中。
这样,当用户填写完表单并点击提交按钮时,div元素中将显示联系人的姓名、邮箱和留言内容。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云