js 获取form表单中的值|极客笔记

js 获取form表单中的值

在Web开发中，经常会遇到需要获取表单中输入的值的情况。使用JavaScript可以轻松地获取表单中各个输入框的值，并进行相应的处理。本文将详细介绍如何使用JavaScript来获取form表单中的值。

HTML表单

首先，我们需要有一个HTML表单，其中包含需要获取值的输入框。以下是一个简单的表单示例：

<form id="myForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br><br>

    <input type="submit" value="提交">
</form>

在上面的表单中，我们有三个输入框分别用于输入姓名、邮箱和密码，并且有一个提交按钮。

JavaScript获取表单值

接下来，我们将使用JavaScript来获取表单中各个输入框的值。我们可以通过form元素的elements属性来获取表单中所有的元素，然后遍历这些元素获取其值。

// 获取表单元素
var form = document.getElementById('myForm');

// 获取姓名输入框的值
var name = form.elements['name'].value;

// 获取邮箱输入框的值
var email = form.elements['email'].value;

// 获取密码输入框的值
var password = form.elements['password'].value;

// 输出获取到的值
console.log('姓名:', name);
console.log('邮箱:', email);
console.log('密码:', password);

在上面的代码中，我们首先通过getElementById方法获取到ID为myForm的表单元素，然后使用elements属性来获取表单中所有的元素。通过遍历这些元素，我们可以通过元素的name属性来获取对应输入框的值。

完整示例

下面是一个完整的示例，包含HTML表单和JavaScript代码，可以直接复制粘贴到一个HTML文件中运行。

<!DOCTYPE html>
<html>
<head>
    <title>获取表单值</title>
</head>
<body>
    <form id="myForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password"><br><br>

        <input type="submit" value="提交">
    </form>

    <script>
        // 获取表单元素
        var form = document.getElementById('myForm');

        // 提交表单时触发
        form.addEventListener('submit', function(event) {
            // 阻止默认的表单提交行为
            event.preventDefault();

            // 获取姓名输入框的值
            var name = form.elements['name'].value;

            // 获取邮箱输入框的值
            var email = form.elements['email'].value;

            // 获取密码输入框的值
            var password = form.elements['password'].value;

            // 输出获取到的值
            console.log('姓名:', name);
            console.log('邮箱:', email);
            console.log('密码:', password);
        });
    </script>
</body>
</html>

运行结果

当在浏览器中运行上述示例代码，并在表单中输入相应的值后点击提交按钮时，控制台会输出输入框的值，如下所示：

姓名: 张三
邮箱: zhangsan@example.com
密码: 123456

通过以上代码示例，我们学会了如何使用JavaScript来获取form表单中的值。

js 获取form表单中的值