html表单数据如何提交到本页

在HTML中，表单是一个非常重要的元素，它常用于收集用户输入的数据，我们可能需要将表单数据提交到当前页面，以便在页面上进行处理和显示，如何实现这一功能呢？我将为大家详细介绍如何将HTML表单数据提交到本页。

我们需要创建一个HTML表单，表单中可以包含各种输入元素，如文本框、密码框、单选框、复选框、下拉列表等，以下是一个简单的表单示例：

Markup

<form id="myForm" action="" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" />
    <br />
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" />
    <br />
    <input type="submit" value="提交" />
</form>

在这个例子中，我们创建了一个包含用户名和密码输入框的表单，下面，我将分步骤教大家如何将数据提交到本页。

1、设置表单的action属性

html表单数据如何提交到本页

表单的action属性用来指定提交表单时向何处发送数据，在本例中，我们需要将数据提交到当前页面，因此可以将action属性设置为空字符串或者当前页面的URL。

2、设置表单的method属性

表单的method属性用来指定提交表单数据时使用的HTTP方法，通常有两种方法：GET和POST，在本例中，我们使用POST方法，因为它可以发送大量数据且不会在URL中显示。

3、编写JavaScript代码处理表单提交

要在本页处理表单数据，我们需要编写JavaScript代码来拦截表单的提交事件，并对其进行处理，以下是JavaScript代码示例：

Markup

<script>
    document.getElementById('myForm').onsubmit = function(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        // 获取表单数据
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        // 在这里处理表单数据，显示在页面上
        var resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '用户名：' + username + '<br />密码：' + password;
    };
</script>