从表单获取用户名并将其放入段落HTML可以通过以下步骤实现:
<form>
标签包裹。设置method
属性为GET
或POST
,并指定表单的目标URL。<form method="POST" action="target_url">
<!-- 表单内容 -->
</form>
<input>
标签,并设置type
属性为text
,name
属性为一个唯一标识符,例如username
。<input type="text" name="username">
<input type="submit" value="提交">
<p>
标签,并设置一个唯一的id
属性,例如username-paragraph
。<p id="username-paragraph"></p>
<script>
// 获取表单元素和段落元素
const form = document.querySelector('form');
const usernameParagraph = document.querySelector('#username-paragraph');
// 监听表单的提交事件
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入框中的用户名
const username = form.elements.username.value;
// 将用户名放入段落HTML中
usernameParagraph.textContent = `用户名:${username}`;
});
</script>
以上代码中,通过querySelector
方法获取表单元素和段落元素,然后使用addEventListener
方法监听表单的提交事件。在事件处理函数中,使用preventDefault
方法阻止表单的默认提交行为。接着,通过form.elements.username.value
获取输入框中的用户名,并使用textContent
属性将其放入段落HTML中。
这样,当用户在输入框中输入用户名并点击提交按钮时,页面会显示一个段落,内容为"用户名:[输入的用户名]"。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云