javascript - 如何获取表单内输入的值？

Question

我只是想获取嵌入表单标记中的输入框的值。

例如，这工作得很好。

<div>
    <label>First Name</label>
    <input id="firstName" type="text" required />
</div>
<button type="submit" onclick="getName()">Submit</button>

<script type="text/javascript">
    function getName() {
        var name = document.getElementById('fistName').value;
        console.log(name);
    }
</script>

当单击提交按钮时，这将输出在控制台中输入的任何值。但是，如果我将其放入如下形式，它不会返回任何内容。

<form>
    <div>
        <label>First Name</label>
        <input id="firstName" type="text" required />
    </div>
    <button type="submit" onclick="getName()">Submit</button>
</form>

表单标签是否增加了一些保护？如何从表单内的输入标记中获取值？

Answer 1

it doesn't return anything

是的。

但是，由于您提交了表单，页面也会立即刷新，并且您将从头开始。

该表单不“保护”任何东西。代码在这两种情况下执行完全相同的操作。但在第二种情况下，在您有时间查看结果之前，form 还会执行其他操作(加载页面)。